How to Design a Website – Web Design Essentials – theSocially

How to Design a Website – Web Design Essentials – theSocially

How to design a website? It is one of the most answered questions when asked on the internet. When I searched with the same query, I got almost a million of websites answering “How to design a website”. But I have had to crawl a few dozen pages to get a complete picture. All of my required information was there but scattered among many pages. I also noticed that some of the links are from high PR and well reputed sites, but are saying something related to my question but were not providing all the information or a very specific answer I was expecting.

At that moment I decided to write this article to save others from what I faced. I will try to discuss each and every aspect of a web design, which I think we should know about a well versed website design in terms of layout, color scheme, navigation, readability, usability, user experience, performance, load time and other major fundamentals of a web design.

See also: How to Chose Domain Name

How to Design a Website

How to Design a Website

How to Design a Website – Web Design Essentials:

For a successful web design first of all we will have to define some parameters for our upcoming website. Ask below questions to yourself or client to gather some information:

  • First and most important, what is this website about?
  • In which category does it lay, educational, informational, multimedia, social media networking, business, ecommerce, company portal or anything else.
  • What type(s) of information will it have? (Textual, Photos, Videos, etc)
  • What type of audience you require? (Profession, Communities, Age group, Gender, Country, Language, Religion, etc)
  • Colors Combination is very critical for targeted audience and success of a website, what colors you require?
  • Does your web design require a two way interaction or any interactive application to present information or provide service? How will it work?
  • And the last but not least, does your website belong to a single niche and is to target a specific group of audience or it is a multidimensional site to target multiple groups of audience with multiple categories?

See also: How to Chose Hosting for Your Website

How to Design a Website - Web Design Essentials

How to Design a Website – Web Design Essentials

Layout of a website and wire-framing:

Okay, until now I think you have already prepared a note for above questions. So, now let’s talk about the basics and fundamentals of a web design. First of all we will have to define a layout (which we can alter if required).  I will recommend you to make a wireframe for your web design, most of the designer design wireframe on computer.

But I will recommend you to design it on paper first and discuss it with your client or review it again and again and make changes as many as you could. My personal opinion is that once you get done with wireframe, then don’t change it while designing, but it depends on designer and/or client. However, try to finalize the wireframe for homepage first and start shaping it.

See also: SEO Friendly Web Design

How to present information:

All the information must be presented in a proper order as per their importance. So, make a list of all of the information you want to present in various sections of the website. It is a common perception that people usually focus more in the center of the screen than in any side or corner. So the top item of your list must be in the center of the home page.

Present Information On a Website

How to Present Information On a Website

The most engaging content should be in center and place the less engaging but important content on sides, this will make people to view it. Usually the contact forms, survey, polls and other less relevant content would have to be on the right side of the website.

Color Scheme for your web design:

Here I will not give a typical lecture; I will not try to tell you the importance of color scheme for a web design success, as a million of other people have already done this. So, let’s talk about a bit precise. Here are three major types of color schemes used by almost 90 % of the web designs on the internet:

Flat Colors for Web Design:

Flat colors are the most used color scheme all over the internet and can be used for any type of websites, blogs, portals, eCommerce, etc.

See also: eCommerce Website Designing

Flat Colors for Web Design

Flat Colors for Web Design Platters

Sharp Colors for Web Design:

Sharp Color schemes are suitable for blogs, forums, companies and social media sites and can be used equally on text centric and multimedia content sites, but preferred for less textual web design.

Sharp Colors for Web Design

Sharp Colors for Web Design Platters

Retro Colors for Web Design:

These days’ retro colors are also becoming popular in the industry and a large number of international brands had adopted them and more are coming. So could be used for all types of website.

See also: Online Shopping Cart – Payment Gateway Integration

Retro Colors for Web Design

Retro Colors for Web Design Platters

Navigation and User Interface:

Navigation and placements of other boxes (layout components) must have been defined in the wireframe. The navigation is one of the core factors of web design and I will recommend you to use only most important things in navigations. A long list of pages or links in navigation is annoying for some visitors and they could get confused due to information overwhelmed. The navigation for your web design is completely dependent upon the answers of the above questions. You must provide all the information in navigation with a proper hierarchy.

I mean, if a visitor comes to your site and couldn’t find what he is looking for he will simply jump to one of your competitor’s web site, which would be the failure of your web design. So all of the major categories (if more than three) should be available in the menu and all of the major links to internal pages or all of the major components of web design must be in a proper order, easy to accessible and well organized. If you have any interactive application then makes it sure that it is in the middle or top right side of your webpage and not on the sides (lower than the landing page) or far corner of the screen.

See also: Corporate Identity and Logo Designing

Navigation and User Interface in a web design

Navigation and User Interface in a web design

User Experience of a web design:

The user experience is one of the key to success, if you are providing best user experience you will win the game. For that you will have to look your web design as an ordinary visitor (who is visiting your website first time) and ask yourself, are you satisfied? Is the web design fulfilling all or most of your needs? Can you find what you are looking for at first sight? or you will have to do scrolling or scanning throughout the whole page?

If you found what you are looking for at first sight or with very little effort than it is okay, otherwise you will have to review your navigation and placements of important sections of your web design. User experience is critical and need to be taken under continuous considerations. So, to make your web design more successful you will have to present all the information in practical, organized and well structured manners.

See also: Web Designing Process

User Experience and Web Design

User Experience and Web Design

Scrolling and Parallax Scrolling:

First of all you should minimize the scrolling, especially there should be no any horizontal scrolling in the design at all unless you have the whole site with horizontal scrolling (used less often). Try to minimize the vertical scrolling as less as you could. Sometime long scrolling in a web design annoys the visitors. But if it is required by the content or for blogs, eCommerce and other sites like that, you can use scrolling.

Keep it in mind that the whole page should have something on sides. Try to minimize the emptiness of the web design. Parallax scrolling is also becoming popular these days. If you are using a parallax scrolling than try to present each section by keeping its content in mind. For each layer/section try to use its own color scheme and structure but be careful for navigation. You can use a side menu or sticky navigation as well and must use “Click To Go Up” button for parallax or vertical scrolling web design.

See also: Content Management System – CMS

Images and Animation for a web design:

Use high quality images on your website, but not as that high that could increase your load time. All the images used in the web design, whether related to design elements or content should be in optimal resolution and well optimized for their size as well. A web design with heavy images can slow down your overall performance of the website.

Images and Animations for a Web Design

Images and Animations for a Web Design

Icons and Iconic Animations (If used) should be used in a proper way, to present the idea of the whole design. I saw sometime the Iconic Animation looks like it is from another site (web design) and does not seem in line with the theme.

Free from resolution – SVG Image Format:

Yea, free from resolution. Use svg image format and forget the limitations of resolution. I will highly recommend you to use .svg formats for images. The web design and development industry is evolving very rapidly and the SVG is the future of web design industry. Most of the web designer are already shifting their designs on it, but are still very few. So, if you want to have a design with high resolution images and also want to enjoy the SEO benefits, use .svg.

See also: Online Marketing and Branding

Animations and Java Scripts:

Here is another SEO tip, if you want to use JS (Java Script) and JQuery to create animation on your site then fetch it with search engine to get maximum advantages of SEO. My personal suggestion is to minimize the usage of JS, JQuery, iFrames etc rather try to use HTML5 and CSS3.

Structured Layout:

It’s a new-to-market terminology, but is not a new concept at all. Search engines are using to get signals from structure of a web design since ancient times. Now its importance increased too much due to smartphone and mobile devices. Structured layout is also very helpful for responsive design and is considered to be compulsory for mobile-first web design approach.

Web Development - Structured Layout

Web Development – Structured Layout

Fonts and Typography for a web design:

All the fonts and typography should be easy to read and must be highly visible and must remain consistent throughout the web design. Try to use dark colors for fonts on light background and vise versa. The size of the fonts should be easy to read for all types of audience and must be visible on all resolutions, especially for responsive designs.

Responsive Vs Mobile Web Design:

If you searched for responsive vs mobile web design in Google you will found a hundred of thousands of article giving you a two thousand words comparison, which is a lot more confusing to be an answer. So, I will answer you in two short paragraphs:

See also: Social Media Marketing

Why chose responsive web design

If you talk about industry standards, today responsive web design is said to be used by 70 % of mobile compatible websites. Responsive is highly efficient on Smartphone and mobile devices (Tablets, iPads). Now we have a verity of screen sizes from 2 inches to 5.5 inch Smartphone, we have phablets and tablets as well and now smart television (with internet browsers) are also becoming popular. So, by considering the current trend I will highly recommend responsive web design.

Why chose separate mobile web design

Separate mobile version for a web design is also still in use and used by a lot of multinational brands. Mobile version is adoptive, especially designed for mobile phones and very small in the terms of size. Mobile web design have ability to load a lot faster than responsive as they use only required resources, but as for responsive it will have to download the whole page on any device, no matter you are opening it on a desktop, smart TV or a Smartphone. So, if your audience is in the region where the internet connections for mobiles are slow (less than 3G) the separate mobile version would perform better than responsive.

See also: Facebook Connect and Integration

Responsive Vs Mobile Version

Responsive Vs Mobile Version Web Desogn

How search engine optimization impacts a web design:

Today Google is taking over the search engines market, yet Yahoo and Bing are also a strong competitor, but all of the three and some other popular search engines works on a same principle and using almost same criteria to rank a website. No matter you are interested in search engine optimization or not, I will highly recommend you to follow the web design related instructions by major search engines.

The web design must be able to present content in highly structured, scalable and accessible way. This will also enhance user experience and SEO. So, make sure your website uses standard format of images and components. I personally use .svg images most of the time, they are less in size but best in quality. It also helps me for responsive design.

See also: Search Engine Optimization

Load time and Animations:

Usage of heavily graphic centric components and animations in a web design could lead you to a mess unless and until you do it in a proper way. So, if you required using such things try to solve most of the things at server end so that you can download less and use fewer resources for your web design. Use optimally less resolution for images and media as much as you can. Consult with developer first before using any animation to get optimal results.

You can also use another domain (sub-domain) for resources and many other techniques are there to minimize load time. Also consider your audience as well, let say if your targeted audience is in Pakistan, where most of the people are using a bit slower internet connections, then your web design must be as quick to download as possible, but if your targeted audience is in Britain where the internet connections are faster you may use a bit heavy web design. So, at any stage of web designing keep considering your audience at first and the most.

See also: Facebook Ads – Pay-per-Click Advertising – PPC

Load Time and Animation

Load Time and Animation in a Web Design

Must have features in web design:

So, here is the deal. Here are some of the must have features for a web design:

  • Sensible layout
  • Clean Design and Pleasant Colors
  • Simple and easy navigational structure
  • Search Box
  • User Interaction Area
  • Capable of making visitor do what you want (Like, Share, Inquiry, etc)
  • A visible Contact and About Link/Section
  • Mobile friendly
  • All pages should inherit fundamentals of Homepage theme

If a web designer keeps above all points in mind while designing a website design, then there is no way his design get failed to perform well in cyberspace. Try to have a discussion with another pro graphic designer or consult a web design company and share your thoughts. Don’t use online website builder or web design software, most of them will create a mess for you and will waste your time.

See also: Google Adwords – Pay-per-Click Advertising

Must Have Features in Web Design

Must Have Features in Web Design

Conclusion:

Before beginning with a web design, first do gather information, set requirements and define the purpose of the website. First make it clear, what you or your client wants to achieve from that website and identify your audience. Divide the whole task into multiple steps. Start with wireframe and color combinations, make it sure that your design is capable of presenting all the required information in an effective and attractive manner, do some home work on that.

Focus on navigation and structure of the design. Pay attentions while choosing fonts. The text should be easy to read on all devices (if responsive). Load time is critical. Your website must be render properly on smart-device and computers efficiently. The placement of important sections and widgets should be organized and prioritized. One last tip, don’t do and redo things again and again. Feel free to ask me anything using below comment box. Connect with us on Google +Facebook or Twitter.


Disclaimer: All graphics/images are copyright to their respective owner unless stated otherwise. If you are the owner or you want to remove any of the graphic/image from this page please contact us HERE.

Summary
Article Name
How to Design a Website - Web Design Essentials - theSocially
Description
How to Design a Website, A complete guide about web designing for web design professionals and amateurs. Must have Web Design Features.
Author
Don't be shellfish...Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someone
About Humayun Hashmi

Hi, I am working as Search Engine Optimizer at RSI Concepts and i am an amateur blog writer. I love to share cool stuff on my blogs. I love to connect with people from around the world and always try to solve their problems. So, feel free to contact me via below comment box and i will be there to solve your issue or for just a friendly conversations. Connect with me on Google + Facebook Twitter

Comments

  1. Its helpful, precised and complete.

  2. how to attractive design to my blog.

    • Dear Kumar,

      I have visited your website, you are doing great. Just pay a bit more attentions on the color schemes and the placement of buttons, their background, fonts and thats it. Your design is fine just keep the visitor in mind while doing any change. My recommendation is to hire a professional designer and developer for your blog. However, if you are also interested in SEO (in first glance I got an impression that you are not interested in SEO) then focus on load time, UX and navigation.
      Thanks.

Speak Your Mind

*