small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

Published on <a href="http://ift.tt/2tEEaJr">| Prototyping: From UX to Front End &mdash; Medium</a> Oriana Corbett 
Builders wouldn’t build a house without a blueprints, right? And if they did, what do you think would happen? I guess the house could be built but it would be pretty loosely constructed. And to make any amends it would probably take a lot longer than if you had the blueprints for guidance. The blueprints or plans are the perfect way for architects to explore their ideas, trying our different things, what will work, what might not work etc. The time an architect spends on these plans is never wasted — in the long term it will inevitably save time. These blueprints would not only be used for materials preparation and development but also to use for any renovations, updates or maintenance the client may need in the future.
<img alt="" src="http://ift.tt/2slLXrA">
So why would I design a website without wireframes? Well since you ask, I wouldn’t! A website can be a complex beast, often with dozens of pages, including multimedia, imagery and a host of other functional items. In order to build a website like this the process of creating wireframes is vital. It’s an additional process / step in the design process but in the long run they save time and are vital for numerous reasons.
First of all, let’s get back to basics.
<h3>What is a wireframe?</h3>
A wireframe is a simple visual representation (or skeleton) of a website and shows the basic layout, the structure, navigational structure and all major components of the website (header, footer, forms, videos, share buttons etc). The point is to focus on the hierarchy of information and events on the page and solving navigational and functional problems in a format that’s easy to adjust / redesign. It allows the designer to focus on how they want the user experience to flow without being distracted by font choices, colour and other decorative elements that are later incorporated into the design process.
<img alt="" src="http://ift.tt/2tERM7g">
So let me give you some of the most important reasons why we must create wireframes before jumping into design.
<h3>Communicate your ideas</h3>
Wireframes bring clarity to your projects. Designers can decide at an early stage what pages need to include which features and can decide the basic functionality for each of those elements. With wireframes you have the building blocks and solid layouts to your design very early on.
<img alt="" src="http://ift.tt/2slCHDD">
Using wireframes makes it easier to communicate your ideas to the client / team members and allows clients and team members to provide feedback at an early stage. The project more transparent and as a result of this communication between client and team members is undoubtedly improved.
<h3>Save time and money</h3>
There are so many ways wireframes save you time and money. The development team use them as a reference and understand what they are building. The design, developer and client are all on the same page and know roughly what to expect during the design process. Wireframes are also quick and easy to produce and designs tend to be more calculated.
<h3>Improve UX</h3>
Wireframes create a better user experience. At the end of the day we want to build sites that are easy to use and as attractive as we can make them without sacrificing user experience. Creating wireframes can push usability to the forefront — they allow us to look objectively at the navigation, labelling, typography hierarchy, call to actions and more. Wireframes get you into a problem-solving mindset by taking distracting design elements away. By solving these problems early on you are putting UX at the forefront.
<img alt="" src="http://ift.tt/2tEwoPI">
By using low fidelity prototypes (in Invision for example), the designer, dev team and client can get a sense of how the navigation will work throughout the entire site by clicking through the wireframes.
Wireframes makes content development more efficient, help deliver the main message of the website and gather feedback at an earlier stage from stakeholders, development team etc.
Wireframes play an important role in website responsiveness. We create wireframes for tablet and mobile also. This way we can plan how page elements will move and resize and we can decide how elements need to move visually to make for a better user experience. Wireframes ensures your site has the ability to adapt to a scaled down version.
<img alt="" src="http://ift.tt/2slCQqQ">
<h3>The last word…</h3>
When starting a project it can seem like an easier option to skip the wireframe phase but in my eyes this is a big, big mistake. They are necessary, they work and have been proven to work time and time again. It’s an integral part of the process of building a website and using them only improves user experience in the long term and improves collaboration amongst team members and clients.
<img src="http://ift.tt/2tDKy3G" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2slEsAV">To wireframe, or not to wireframe, that is the question.</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

To wireframe, or not to wireframe, that is the question.

To wireframe, or not to wireframe, that is the question.

Top Stories