There is no doubt, GUI (Graphical User Interface) is one of the most important aspects of web design. GUI plays a significance role in the virtual presentation of your business website layout. Whether you care or not about design, it will play vital rule in the presentation of delivering the message you want to your audience.

This article is just an introductory information for the design category of the criteria we use in website rating and benchmarking. Generally speaking, those could be the top 7 factors to consider when planning for the best www in the GUI part of the process.

1- FI / Following Web Design Trend

FI stands for First Impression. The very first moment you look at anything, a first impression shapes up in your mind. First impression plays key rule for any brand, since it is the the key shape reserved in your own brain long memory. It takes just one-tenth of a second for us to judge someone and make a first impression”, says Willis, J. in his study about “First impressions: Making up your mind after 100 ms exposure to a face”. The rule applies to anything you look at not only humans.

Your website will mostly be judged within the first seconds of visiting from your audience. No matter how frequently you will change the look and feel, eventually, first impression will have a bit of a long TTL (Time To Leave) in your audience brain when you try to change it. Taking good care of how to make killer first impression, in fact, covers huge percent of your business success.

Many facts affects first impression. To name some, culture, type of business, type of audience, website scale and the list goes on. Since the  internet is like a huge city with diverse society, an evolved common culture dominated the internet world. That culture had many things in common since they live in one virtual place. One of that common things among internet society, is what we call, “design trend”.

Web Design Trend

Web Design trend is one of the major key players when trying to achieve the best first impression. The more you try to style and customise your layout while playing within or near the followed global trend, the more you are successful to the target of making a good FI.

Major big brands in the market have their website undergoing continues development to cop with the up to date design trend. Take apple as an example, across 20 years, the website for apple has gone from text blocks which was the www trend at that time to the current flat and minimalism style of the design trend.

Web Design trend change for apple.com

 

To brief what other factors you should consider as a web designer when considering first impression in your design, it’s advised to look for:

What to do

  • Study the web design trend at the moment you intend to start a website design.
  • Focus on the first message you want the website visitor to know when first browsing to your site.
  • Focus identity colors around your main message.
  • Consider viewing many top ranking websites to get the flavor.
  • Put yourself in the shoe of the visitor, always close and re-open the design and look it from different angles.

You can check this article for more useful information about design trends for 2017.

2- Website Design Identity

Identity is the key part of any brand or presence. Every thing in our life has an identity, objects, houses, vehicles almost everything has it’s own identity.

Identity doesn’t always point to the look and feel of an object, there is to name some, business identity, character identity …etc. We want to focus on our part which is the look and feel, the GUI part of the identity.

In order to create a good web presence in the form of a website, your website design should reflect an identity which is in more  clear words, a common combination of colors, content and padding theme that is  persistent among your website pages.

Theme identity and colors are mostly of a concern to the marketing team in most entities. One of the best places to have a look at a good example is Harvard Business School. They have a dedicated website for branding identity. It makes a good example of how to write down your identity in a form of rules for other technical parties to follow.

Identity Characteristics

  • Clear color theme in the form of main and sub colors.
  • Rules for styling design elements such as paragraphs, headings, forms and buttons.
  • Rules for element spacing (design layout).
  • Present application of such rules among all website pages.

What to do

  • Design near the global followed trend.
  • Choose the right color choice that is relevant to the main website business.
  • Use a good combination of main and sub-main colors in your theme.
  • Use the best looking fonts for the heading and subheadings.
  • Style elements spacing the way that highlights the main message and helps with the overall web design identity and usability.

This just a brief and from here you could dig your way up the Internet massive resource data.

 3- Identity Homogeneity

In the recent point, we discussed what is identity for web design and branding and how it affects the quality of your work. Another main factor which we believe should have it’s own focus and title, is identity homogeneity. Spending many hours and hard work creating the best identity your design team could craft, might eventually, be screwed up by many factors. One of those main factors is how your identity is implemented among different website pages.

In many cases, we find websites beautifully designed and well organised but that’s only for the home page. Digging your way in the website you start to find the design layout is diverting from the original homepage design. While that might be a strategy, designing 2 layouts, one for the homepage and another one for all website sub-pages, eventually, it should be clear in the whole site navigation experience.

Scenarios where identity homogeneity is negatively impacted

  • It’s always the “Development team”. those guys who always care about equations and what made the apple fall out of the tree.
  • Large scale web portals such as that of the universities or global news networks where the main portal has sub and sub of the sub portals.
  • Having no identity book or written rules while most of the work lies on the designers laptop.
  • Having no quality control or assurance over the project, at least regarding that particular point.

What to do

  • Design a simple, definable and easy to apply identity to make it easy for developers and content creators to follow.
  • Translate your designed identity to words then create rules in the form of identity book to be followed by implementation team.
  • On large scale projects, have an authority grant policies for the look and feel identity rules of your website to be respected by any technical 3rd party.

 4- Main Colors

In the following lines, we will shed some light on the details of designing a good identity for your website. When you think about a brand, this brand has a logo or a presence some where either online or offline. One of the main characteristics of this brand is the brand unique colors. The first question we always ask a customer when designing for his business, “do you have a logo?”, “do you have a color identity to follow?”, “do you have any kind of branding work for your brand?”, “what colors do you prefer?”, many of that questions that help us understand which main colors to choose for our web design as part of the whole brand.

Succeding the mission of sites best design depends on how you succeed the following steps

Mission Success Steps

  • Picking up the correct colors that are relevant to your brand or business.
  • Giving each color of choice the correct weight so that you end up with main color and sub colors for your theme.
  • Using whites, blacks and grays to balance your color theme.
  • Choosing the right typography colors.

 5- Color Balance

Color balance in Web design is of an importance that we split it to its own title. After you have chosen your color theme, picked up main color and sub colors and even finalised your identity book defining the rules of using all that colors, eventually, you as a Web Designer or your team, are not finished with the design part yet.

Unlike many design fields such as product design, interior design, architecture design or even print design and advertising, where you finish your piece of artwork, look it from different angles and tweak here and there trying to balance colors and refine details, designing for Web publishing on the other hand has a major difference, content scalability.

In Web design, in most cases, you have no control over the amount of content that will be displayed per web page. You have to watch out for the rules you added that forms your color identity. The more of a color in a page view, could ruin your rules of what is the main identity color versus sub color or colors and thus unbalancing your design.
We find this problem more obvious in large scale web portals. In such portals, web page content varies from page to another some times, enough to break your identity color balance of the theme. It get’s worse when customising the page layout to add/arrange functional web-parts or advertisement banners while it’s less effective in articles or blog posts.

What to do

  • Create rules for balancing colors within your them.
  • Follow the X-Rule, the heavier the color on a specific side of the screen-view, the less weight this color should be on the other side.
  • ِAccording to your website scale, tend to use more filling colors (whits, blacks and in-between) than main colors in styling web-parts.
  • Scroll down the main headings of your page and focus on balancing colors within each stop-view.
  • Use gray shades to balance your theme.

 6- Font Representation – Typography

Back in the 90’s where every thing was text. Around the text, evolved sections and web-parts containing interactive forms and media elements. Unfortunately, some web designers overlook the importance of typography. They think that fonts are something from the past, we should now focus on media and graphics, finally, limiting their typographical creativity. Your font style affects not only your web design, in fact, it has much of an impact on your website usability.

In some cases, not only backgrounds are used to divide sections in your page, instead, you use fonts in the form of headings or may be both headings and backgrounds. Web-part title headings and form labels also plays a rule in the overall color balance of your identity and website usability.

What to do

  • Create rules for every font implementation case in your site.
  • Rules should indicate case type (Heading 1,2,3 .. etc., Notice, Disclaimer, Copyright, Paragraph ..etc) and font style.
  • Avoid using pure black (#000) for paragraph font color.
  • Use custom google fonts. They are speedy in loading and stylish.
  • Stay away from curve decorated fonts specially in paragraphs.
  • In your homepage use custom big size font decoration, that’s the trend.

Here you can find a great article about typography “Web Typography Inspiration, Tools & Learning Resources“.

 7- White Space

White space is the space between your design elements. We call iy white space. However, It doesn’t have to be white.
In Web design, white space is key part to a killer design. knowing how to space elements the way that adds more beauty to you design is a challenge so far. Using white space have evolved across time as much as the web design trend itself. Although it’s part of the trend.

In modern Web design trend, designers tend to respect white more than before. Designers tend to use more white space between layout elements than it used to be. It’s now common to hear “the more white space per view, the more elegant is your design”. However, it also depends on the business of your website.

What to do

  • Consider white space the very first moment you draft out your design layout.
  • Whatever was your website business or scale, more white space is always better than less of it.
  • Focus on more white space on your homepage than any other page.

Conclusion

This article is generic. It means to shed omni light on major areas you should consider when designing for www. For more information, you should google each of the recent titles, check more examples. You will find extensive resources around the web related to each topic.

We would like to hear from you about your thoughts for this article. Please take some time to register and leave your comment. We will be more than happy also if you shared this article with your friends or mention this non-profit site in your social media accounts. We also encourage you to subscribe to our newsletter.

Thank you for your time. Have a suggestion for a topic?, please leave it in the comments section.

Bonus Infographic

7 Pillars For Web Design Infographic

Infographic describing main pillars of web design