Comprehensive 14-Point Web Design Checklist & Guide

How do you design a website that is beautiful, converts well and provides great value for users? Designing and developing a website takes time and effort. Working efficiently helps us to deliver a great website at a competitive price. A systematic approach to designing a web page is usually recommended to create a cohesive, consistent site that is scalable across all devices and platforms. In order to work efficiently, it may be useful to record steps that are repeated in every project. By doing this you are able to save time and have more freedom to explore other areas of design.
This article includes a web design checklist and suggests a few approaches designers can take to make their workflow as fast as possible. This will not help you save time but figure out new solutions to design problems and that can improve the overall design of the website.

1.  Use visual hierarchy 

Web designers should use visual hierarchy to guide the user through the web page. Visual hierarchy refers to the organization of different visual elements in a high to low visual prominence. This order not only brings visual clarity but also helps engage the user as he or she is on your web page.

Combining different aspects of this law can help keep the page interesting to look at and read. An effective web page should be able to engage the user as he navigates through a series of images, messages towards the call to action.

2. Use standard layouts

When designing a web page, designers have to design the layout around human behavioral patterns. We have been accustomed to using websites a certain way, if we don’t keep the layout and structure consistent to the usual standards, users are going to find it hard to navigate through your web page. So it is better to stick to low visual complexity in design to keep it usable, simple and attractive. It is good to be able to differentiate your brand in the marketplace but adding complexity in the layout will only make it harder for the user to use it. Here are some of the common web design standards to keep in mind when designing a webpage.

•  Logo in the top left

•  Horizontal navigation in the header

•  The search bar at the top

•  Social icons at the bottom are f the page

•  Use focused headline on top of every page

Having a descriptive headline about the company will help the user know if they are on the right page. Users spend about 80% of their time above the fold. So having a clear value proposition above the fold is as important as the content itself.

Just because users spend most of their time above the fold of the web page doesn’t mean that your call to action should be placed on the same section. For users to take action, you have to market the company and the product throughout the page. Persuading the user this way will often make them take action. This is why the call to action buttons are usually placed at the bottom of the page where the interest of the user tends to be high.

3.  Clean, simple and tall layout

Designing web pages that are simple sans clutter can help the user really focus on the product and its value. Low visual complexity is often preferred because they cut the clutter out of the web page and make the site more readable.

Making use of space to create tall pages helps you add sections for frequently asked questions. By doing this, you are able to answer questions that a user might have about the business and the product. You want the user engaged while reading through the page so make sure to build a long page that answers all of their questions.

4. Avoid slideshows and tabs

Users only tend to look the very first image on the slide often without seeing the images and messages of the subsequent slides. So ‘call to action’ buttons placed here is unlikely to be clicked.

Avoiding tabs and expansively boxes will help your content be more visible to the user. Users prefer scrolling and usually don’t take the time to click on a button to learn more about a section. So it would make sense to have your content exposed without the need for you to click on a tab to reveal something.

5. Use the right Images

Using pictures of faces can help bring users attention to a specific content of the web page. Using face imagery can be useful in web design. Placing them in a specific way can guide them through different contents of the web page. For example, having an imagery of Hillary Clinton with her head turned towards the headline can help draw the user to the readable content on the left of the screen. Using visual cues like this can be beneficial to guide the visitors’ attention to statements or call to action buttons.

As web designers, you should be looking to build a web page that is capable of building a trust with the reader. So the imagery has to be picked carefully. Avoid using generic stock photos if possible. People prefer and want to see real people who actually work at the company.

6. Color and contrast

Color can be a powerful tool to draw the users attention. Colored call to action buttons designed in specific ways can impact the viewer in more ways than previously imagined.  Having a colored call to action button with a contrasting text or a background can bring the visitors eye towards the buttons.

Using action colors that separate from the colors of the brand palette can be another way to guide the visitor towards all the links, buttons and rollover effects.

7. Navigation and links

Visitors usually scan the web page from top left to right so anything placed on here is likely to be seen and used. To communicate your message with the menu, buttons and navigation link place them in areas where the eye is bound to travel. Be sure to use descriptive navigation links that are relevant to search engines and visitors. By doing so you will be able to leverage the web designs best practices. The most common area to place the home link is to the top left of the screen as visitors expect to find it here. The other items in the menu screen can be placed in any order you wish as they don’t directly affect the SEO rating and success of visitors.

8.  Linking to other websites and blog posts

As a web designer, you want the visitors to spend time on your web page. So try to avoid using any distracting links that take their attention away from the service page. Exiting the page they are on to go to an external website is bound to lower your conversion rate. To be able to successfully convert them to a lead, the user should find the service page engaging and of high interest.

9. Include social share and follow buttons in your blog site

Having great content on your site is not enough, a good experience can only be created when users can interact with it. People like to share what they have just read or learned. Including social share buttons on the top of the screen will persuade them to take an action. If you don’t leverage this feature, you will be missing out on social media traffic.

10. Optimizing for mobile

A vast majority of website users own mobile phones. If you are designing a website for a business, chances are they are going to need you to design mobile pages to reach a wider customer base. About 61% of the users don’t go back to using a mobile site if they have trouble accessing it. So make sure to use the best practices for developing a mobile site to create a seamless mobile experience for the user.

11. Build an online presence

To be able to have a solid online presence, your website has to get found. How do you do this? Having a great SEO strategy in place will help you design a website that converts well. This means that you have to create content that your users will search for.

12. Use meaningful Words

Writing meaningful subheads may help visitors find relevant content. Having vague subheads with useful text underneath will defeat its purpose. To make the content helpful to users it’s better to have descriptive subheading instead of a vague one. This is not only good for usability but is also considered a good SEO practice.

It’s always good to break up a long paragraph into smaller chunks. This will not only make the content easier to consume but also help the overall design more readable. Another way to make the content more readable is to use simple, common words that appeal to a wide array of people. The goal is to create an effortless reading experience for the user and keeping the text simple will help them process information without much effort.
List any content within your copy in order of importance. As visitors scan the copy the text they read in the beginning and end tends to stay in their short-term memory.

13. Add testimonials and other types of social proof

Add evidence as to why the user should choose your company’s service over the others. Adding testimonials and reviews will help them understand your offerings and will, in turn, be able to form a sense of trust.
Here are some types of social proof that can be added to the page

• Endorsements from clients

• Customer reviews of your product

• Trust signage and symbols of proof

• Media releases and as seen in editorial images

• Email sign up forms for subscribers

Email sign up form is usually placed at the very bottom of the web page. It should be able to stand out within the page so pay attention it’s representation when designing this section. It should also clearly indicate their value offering and have social proof so users can verify their data.

14. Understand what makes the site unique and valuable

Visitors are interested in useful information more than just a pretty site. Let us take a look a recent study done on some of the important factors that influence the design of a website:

• 76% of the visitors said that they want to find what they are looking for

• 10% cared about the appearance

• 9% were interested in cutting-edge interactive experiences

• 5% cared about other factors

Now let us take at the causes of failure:

• 60% find-ability

• 12% search

• 9% page design

• 9% information

• 5% task support

• 3% fancy design

• 2% other

Visitors are drawn to beautiful design but that by itself won’t keep the user interested in the page. For a website to be successful, it has to go beyond its visual representation, it has to give the visitor what they need. We hope that you found this 14-point web design checklist useful. If you’ve got anything to add to the list, please let us know!

#vorzie, #vorziestudios, #webdesignchecklist, #jayvorzimer

www.vorzie.com

Original post: 

http://www.webdesigndev.com/web-design-checklist-guide/

These are some curated UX trends that should be dominating in 2019 which is just around the corner. Achieving good user experience will continue to dominate the industry and let’s show gratitude to all the experience designers around the world for proving experience matters in a product. Let’s dive into the topic.

1. Designing for Foldable display smartphones

2019 is just around the corner and we are going to witness smartphones with foldable display as we have seen leaked prototypes from major OEMs which no longer seems like fantasy and prototypes proved they are close to reality. According to Display Supply Chain Consultant (DSCC), a major display market research company carried out a research and estimated nearly 3.1 million units of foldable display smartphones to be shipped in 2019 and OEMs like Samsung, LG, Huawei, Oppo are already gearing up to introduce first in market trying to become pioneer in foldable display smartphone industry. Here is a prototype.

We should gear up to get adapted to hybrid design by designing for both the views in a foldable smartphone and this experience is not going to be like responsive design. Though the first models are not gonna leverage buyers to buy as there gonna be plenty of compromises just to bring the devices to the market but it is essential to learn it and move on.

2. Multiple Design experience for Geographic, Demographic and Psychographic segmentations

This might sound unreasonable for you but going through this might make sense. Let’s agree to the fact that the preferred app experience differs with different people, a design might not be widely appreciated by all age groups, people from different countries, people with different behaviours and this is where Geographic, Demographic and Psychographic segmentations play indispensable part.

Geographic
Geographic segment is an segment of audience where they are situated, it can be of region or country. For instance Chinese audience, Indian audience and western countries audience and these audiences don’t always have similar likings or way of life as they have their own tradition & culture. For a more hint Arabic app interfaces are implemented right to left instead of left to right which is universally accepted. Similarly Chinese people preferred to have their app to be presented more colourful playing emotions around compared to American apps more functional and straight to the context. Here is a example how app markets are being designed for respective people.

DemographicDemographic segment is aimed at few characteristics of the audience like gender, age, marital status, education, income and so on and here age and education is fundamental characteristics to be looked upon for deeper insights. For instance, different aged people has their own desire using a product, for instance people who falls between 18–30 years can get used to modern experience as they could easily get adapted like gestures. On the other side aged between 40–55 years are gonna expect a simple experience with no so sumptuous colours hanging around and animation on touches. And at last who aged 60+ years are gonna like old school experience expecting large images, huge font sizes, basically pays attention to the size of user interfaces. In one word you are going to mess if you offer them complex features and experience. Here is my favourite product testing clip with three senior gentlemen.

PsychographicThe last segmentation here is the Psychographic which deals with mental models of people, opinions, interests, lifestyle and so on and apparently most arduous and onerous segmentation among all. In order to achieve this a deep analysis, research needs to be carried out by meeting different people and comprehending their problems and virtue. This is near impossible segment to achieve as each people’s mental model works dissimilar and offering custom experience is impossible but close to the solution is to offer them configurable options on certain parts of the app as they can customize as per their needs.

3. Tunnelling User Experience

Tunnelling is a stratagem in UX which is a planned user journey and the end goal is to make users to interact with the things we designed. Basically you are guiding users to interact with the elements on each screen that are being navigated to end goal of a product. For instance how a wizard works in software industry, the wizard here explicitly tells user to do certain things in step by step in order to achieve.
Let’s take Uber as example how they cracked in tunnelling.

4. Thumb Friendly Experience

The ongoing 2018 saw the rise of 18:9 ratio panels over 16:9 ratio in display of smartphones which gave OEMs to achieve screen to body ratio upto 87% which is batty. This means more display and less bezel which is in track to attain futuristic 100% screen to body ratio which is no more going to be a fantasy. The average display size of Android mid-range smartphones launched in 2018 ranges from 5.8" to 6.2" which is prolong but thanks to the less bezels. Twist in the tale is bezels are being trimmed and display sizes are being increased so the compact factor don’t exist in modern smartphone world giving little gymnastics to your palm and fingers where you are forced to use both the hands sometimes to reach certain parts of the app.
Here is a example how reachability works on two different phones with two different aspect ratio.

The ideal solution to offer is to surface fundamental controls of the app at the bottom that is already being adapted by major apps realizing how handy it is and thanks to Apple for kickstarting this approach in their apps several years back and now it is criterion.

What else?

I have seen few apps that offer search field just under finger reachability rather than placing on top of the app which again causes inconvenience. Even Google’s pixel launcher comes with Google search just under reachability, simultaneously I kind of think this is to promote their Google now as well. Let’s take instance on newest launcher this time from Poco launcher again has bottom search bar for swifter app search.
Let’s go away from launchers and talk about apps that use bottom search bars. First hits my mind is Lyft ride share app, most user actions in the app are performed at bottom half of the app which was well thought by comprehending user models. Second I would pick floating action button which was introduced alongside Material design for Android and Google products. The floater button was utilized for multi purpose not just to compose but to search, filter, sort, account and so on and it mostly presented as shortcut.

Bonus

5. Evolving to contemporary Interface design (Just White)

You might be bit confounded by the title as what does this mean? We got acquainted by Window’s Metro design and Apple’s iOS 7 with Flat designmoving away from realistic interface Skeuomorphism. Flat design swiftly became admired mostly after Apple’s iOS 7 as Apple known for perfecting the things and designers had to get adapted to flat design language as it was clean, minimal and causes less distractions as it was purely two dimensional. Looking at past standing on a mountain’s peak tells you how flat design evolved and became much more intelligent in bestowing on user experience as well. A variation of flat design called Material design which was inaugurated back in 2014 which again brought bit of Skeuomorphism by adding emotions to design by offering depth, shadows and physics too! But as time progressed it became more flatter dumping material design aspects in their design language resembling flat design found on iOS specifically.

Flat design turning Just White!Just white is beautiful interface with user experience compromises! Flat design had minimal factor in design with contrasting colour to highlight crucial atoms of the screen like call to actions, filled iconography and so on to stand out against static elements. You would have observed how flat design evolved to more white minimal design meaning representing visuals of the screen mostly white offering pleasant experience along with clean visuals. Just white resembles newspaper approach which is proved to be good for reading. What I want to say is more apps in 2019 will go with just white approach by dumping choosing of solid colours and making way for this.

6. Gestures!

It’s no wonder gestures gonna gradually replace with current on-screen buttons to navigate found on Android phones making more room for apps. The on-screen navigation buttons mostly remains static in most of the time except in few departments like video, gallery view, gaming. So this is why Apple indeed introduced iPhone X with gestures instead of static multi-purpose home button on bezel which helped to navigate. Initially people had hard time getting used to gesture based controls as they are not visible as they are controlled programatically but people got used to it as they progressed to use the phone. Gestures can be operated in several ways by swiping up, down, sides, long swipe giving different options to each gesture which are being operated on top of display which detects touch.
Even Google’s recent phones Pixel 3 & Pixel 3 XL have gesture-based navigation inspired by Apple’s but it is not certain whether the intention was to copy Apple.
We also have hidden menus which can be operated by gestures and you would noticed especially in lists where you can see multiple actions for a item like delete but this feature was rarely used by users as they are hidden.

#Design, #UX/UI Design, #VorzieStudios, #SiliconeValleyTrends, #Jay Vorzimer

http://www.vorzie.com/