Essential design checklist for website prototypes
If you want to launch a website successfully and achieve conversions, look no further than this essential design checklist
Clients will spend anywhere between $500 to over $15,000 dollars for a custom website. That is a big chunk of money. And it’s not surprising when, in the digital age, a website could be the first point of contact for many of your client’s customers.
80% of Americans use the internet to search for products and services. It’s one big market place. And with smartphones overtaking desktop as the way of surfing the internet, your website can no longer be cookie cutter.
Your website design has to come with multiple facets, such as adaptive design or device specific features like touch. If your website doesn’t exceed expectations, don’t expect anyone to stay on it for very long. In fact, research has found that 39% of users will abandon your website it’s unattractive. Don’t get us started the disastrous effects of slow load times either…
Since so much goes into creating a successful product, you’d be forgiven for forgetting a few key components. But to save you from design turmoil, Justinmind has crafted this essential design checklist for launching a new website. Let’s get into it.
With this design checklist, you can start building successful web prototypes. Download Justinmind.
Distinguish needs from wants first
Whether you’re designing a website for yourself or a client, it’s likely that you want to create something with all the bells and whistles. While having a dedicated ecommerce minisite, a content marketing blog and a newsletter all seem like great ideas, you might find that these are unnecessary in achieving your goals and that your design might suffer as a result of doing too much too soon.
Interaction Design Foundation suggests using Maslow’s Hierarchy of Needs. More on that here.
Needs can be characterized by what will make the website successful and wants are all the things that can be done with the website. Too many wants and your website could lose focus.
When starting out with a website design, there’s usually one core idea. If it’s a small business looking to sell solar panels then focus on that. If it’s a charity website about raising awareness for a particular condition, focus on that.
Once you’ve nailed the core purpose of the website you’ll have the direction needed to design the right solution.
Sketch your initial thoughts
Get down your design ideas onto paper. Sketching lets you organize your thoughts into manageable chunks that you can design around.
Think schematically and create lists. We wrote about how sketching can really boost your workflow and help you make better designs. All it takes is a pen and paper but these two tools can make the rest of your website launch smoother. If you’re still too attached to all things digital, try out digital sketching with a UI kit.
Ensure your layout responds to difference devices
At this point in time, with a whole plethora of devices on the market, ensuring that your design responds accordingly is vital for a successful website launch.
That means a firm understanding of the difference between adaptive web design and responsive.
Adaptive design detects which device you’re using and presents you with a design pattern to fit the real estate, resizing your browser has no effect on the layout. Responsive design responds to the changes in the browser size, making it more flexible than adaptive design.
Typically, responsive design takes less work to implement but this has a price — you have less control over your design on each screen size. These 7 inspiring examples of responsive design can help get you started.
Whichever design you decide to use, don’t neglect to maintain the visual hierarchy of your website. By taking into account the Gestalt theory of perception you can create a website which influences user behavior and give a visually pleasing user experience.
Make your typography choices complementary
Web design is typography. Most of the internet is made up of written content. That content is then presented to people using a wide range of different typefaces. If your font choices are bad, then your audience may struggle to read what you’re telling them. Kiss goodbye to those conversions.
Science editor, Sarah Knapton, noted that the internet is becoming unreadable because of the rise of lighter, thinner fonts. It’s serious stuff. If designers are using illegible fonts with poor contrast ratios, it can damage the universality of the internet.
Thankfully, there are resources out there to assuage this perennial problem. WebAIM, short for web accessibility in mind, has a color contrast checker which is free to use, tells you what your contrast ratio is and let’s you know if you’ve passed or failed the accessibility test.
A good rule of thumb is to pick one or two fonts which work well together (for more detailed font recommendations, check out Typewolf) and use a combination of different weights and sizes, in lieu of multiple fonts.
While proper type choices will go a long way in boosting the usability of your website, you might also consider the way in which fonts can make your users feel about your brand.
Proofread your content meticulously
Did you know a travel company nearly put the Yellow Pages out of business? Banner Travel Services put a monthly ad in the Yellow Pages advertising exotic vacations. Because of a typing error, the advertisement promoted erotic vacations. The company sued for $10 million nearly bankrupting Yellow Pages.
The lesson of this story is to proofread. Every word on your website should have a fine comb through it to pick up any errors in grammar and spelling. If you have so much as an ounce of uncertainty about an apostrophe, seek out help from a professional.
Your copy is what can persuade a customer to convert, evoke the right emotions and can alleviate user worries. While typography plays a role in improving readability and legibility, the real power lies with the words themselves.
Need examples of great copy to inspire you? Look no further.
Design for when things go wrong
Sometimes websites fail. For whatever reason – the server’s down, your user mistypes a URL, there’s a bug hidden somewhere, you know the usual culprits. This can cause users to abandon your website in droves. Planning and designing for these mishaps will help you create designs which instill trust.
Take a 404 error page. A well designed 404 error page can help improve the UX of your design and boost usability.
If your user ends up on a 404 page, use this as an opportunity to explain the error, not just tell them they’re experiencing one.
In fact, you can even pepper your 404 error page with links to other high converting pages of your website.
When you preempt something going wrong, you can think of unique solutions to turning the problem into an opportunity.
Take this time to learn more about 404 errors with these 6 best practices.
Is the favicon present?
Don’t underestimate the utility of a favicon. The favicon (favorite icon) is the little icon of the website you’re visiting that is found on the tabs of your browser.
They’re useful because they’re another brand identity marker but also if a user has plenty of tabs open for whatever reason, a favicon can act as a necessary beacon to guide them back to the tab that your website is on.
Let’s say you’re drowning in tabs because you’re researching something and suddenly you hear the ping of a new email arriving to your inbox. Gmail’s envelope favicon is instantly recognizable and within seconds you’ve checked that urgent email. It might seem like no big deal but for the user, it really helps.
A visual is far more recognisable than text. Using a personalized favicon helps you stick out and helps you give your user a better experience of your website.
Smooth out design-development hand off
After you’ve created your website and iterated numerous prototypes until you’ve got something that will work, it’s time for the designer-developer handoff.
If you’ve created your prototypes in Justinmind then this step should be a breeze because we have a developer UI which will give your developer all the information they’ll need to create an exact copy of your prototype.
Elements like CSS styles, color capture and exact measurements mean that no longer will you have to suffer from rework after rework.
Make sure that your documentation is all in order. You can generate that automatically in Justinmind else you’ll need to ensure all specs and assets are clearly named, in order and make sense for your developer to create that perfect website.
In summary, your design checklist for successful website launch should look like this:
- Understand wants versus needs
- Sketch your initial ideas
- Make sure your layout responds correctly
- Pick the right typography
- Proofread your content
- Design for the unexpected
- Create a personalized favicon
- Make sure hand off goes smoothly
What design elements can damage your website launch?
A user will abandon a page if it doesn’t load properly. In fact, they expect the page to load within two seconds. Aside from waiting, there are other bad design elements which can hurt your website launch.
Think about interface bloat. Uncompressed graphics, ads that auto-play and too many pictures are just a handful of UI elements that could frustrate your user and offer them a poor experience.
Poor navigation flow that is non-intuitive is another common website error. If your user is unable to find what they’re looking for because of confusing, long-winded or obtuse navigation patterns then your user’s eyes will miss what they want and that can hurt your profit.
A good way around these website errors is to prototype different solutions and to do usability testing on your website. This way you can iron out any kinks in the design, navigation flow and overall usability of your website, which can go a long way in creating successful user experiences that generate profit.
People are willing to part with big money for a successful website that creates converting customers. This design checklist should put you on the path towards happy customers while ensuring that your design go off without a hitch.