DropzoneJs + PHP: Developing a Multiple Files Upload - Complete Guide In this tutorial we are going to learn using DropzoneJs library to upload files to the server by simply...
The Ultimate Guide to Amazing Web Site Design – The Website Design Check List 2017 to Create an Amazing Website
What makes an Amazing, appealing website that looks professional, convert more and bring more business? Definitely, It’s design. If a website is not appealing, it will not convert well and will definitely decrease it’s ROI (Return on Investment).
I am developing websites for the last, about 17 years, since 1999, when I was working as a Designer with Dot Creative, an advertising agency, based in Lahore, Pakistan. Since then, literally, I read thousands of articles and hundred of books on Web Design to make my client’s websites, more interesting and inspiring.
There are 7 main components of a website, that includes the followings
- Graphics and Multimedia
- Page Design
- Site Structure
What is good and what is bad for the text used on a website? There are beautiful ways to draw attention to your website text that stick your website visitors to your website and ugliest ways to distract the visitors, thus as a result leaving your website.
There are beautiful ways to draw attention to your website text that stick your website visitors.
You can make beautiful typography in your web design. Always, use 1-2 typefaces and 1-3 type sizes per page on your website. Use emphasize on text wisely, not all paragraph bold, or Italic or set paragraph ALL CAPS. Use underline text, where necessary. There must be Headings next to text and links should be separate from the body text. Don’t use graphics text for main content. Using heading text inside a image is fine, don’t forget to use Alt text.
2. Graphics and Multimedia
Graphics should be fit on the screen, use CSS3 responsive rule-set to make images fit on different screens with different screen resolutions. A graphic wider then user screen, will make a bad impression and bad user experience. Always use some suitable file format; Jpg, Jpeg, PNG and GIF are common file format. A rule of thumb is, use JPEGs for photos and other images that contains millions of colours and use PNG for anything else, for example, for charts, graphs and maps etc.
The large multimedia files should not be downloaded automatically, until unless, visitor/user request them explicitly. When creating multimedia files, check and test with different file format. A wrong format could create a large file that will take time to download, specially on a slower internet connection. Also, make sure, your multimedia file don’t required a uncommon browser plug-in to play. If necessary, inform the user about require plug-in.
3. Page Design
The website focal point should be clear, the user should not undergo to find the focus of attention (main theme of the website). Alignment should be consistent throughout the website, margins from top to bottom and from left to right should be equal on all pages. Section heads will define the website structure. Page design should be fit on the screen. Most important elements of the design, are recommended at top.
The design, itself, should be consist throughout the website, on all pages and sections. There should be sufficient contrast between background and text, a lighter background with a bit darker text, convert well and looks engaging. On the other hand, a page with little contrast, make it dull and boring.
The page should be transform gracefully, under different viewing conditions, various screen sizes and on frequently used browsers; rendering applications.
Don’t use old-fashion blinking and moving elements, like, blinking banners or a marquee, unless yours is a news website. Don’t confuse page with too much of contrast. I have seen websites with black background and white text, websites with blue background and red text. I close them as soon as page downloaded and open. More then 95% user will do the same. Furthermore, don’t use complex backgrounds, that will reduce legibility.
4. Site Structure
Maintain all your contents, under sensible and persistent categorization. The actual content should not be more than 2-3 click away from website home page. The links/label should be clear and not confusing. The top level categories should be not more then eight.
It is admitted, the navigation bar design and structure is most important factor in a website success or failure. It can effect conversion, your website search engine ranking and user friendliness. Everything on your website is connected by the navigation.
If navigation is clear and consistent, the visitors will stay longer; while browsing your website, that will decrease bounce rate 1, that is good for higher ranking in search engines.
If the website is large, create sections and sub-sections navigation option. Provide descriptive link labels and descriptive page titles. It is not required but if your web page navigation could tell the users “Your are here” option, there are less chances that users lost while navigating or browsing your website, again making positive effect on user engagement.
Create and add a site map or table of contents on your website, that you should submit to search engines, if you didn’t already submitted, for search engine crawlers to crawl and index your website. For example, you may use Google Search Console (formally known as Webmasters Tools) to submit to Google. Here is how to create and submit site map complete information from Google.
If you are using graphical links, provide matching text links for a better user experience.
Search box is another crucial element of content heavy websites, that your website users will be using as a last resort to find the information, they are looking for. It will be helpful to those users who want direct, quick access to information.
You created a stunning website but if it is not working, can’t be accessed by a large target audience, it is useless and waste of time and resources. What ever you are designing and developing, it must be functional. Functional for the right targeted audience. Functional to fulfil the purpose, for which it was created. Functional design is both a process and the end product.
There are certain set of rules for the functional design. At least you should check, if all links are working and leads to the correct pages. Is there any need to download the plug-in’s to use your website, if yes, the website provide the links to download? Website loads quickly and works well on all major browsers and most popular Operating Systems, without crashing or errors.
Background music and auto downloading must not start automatically without explicit user permission/knowledge.
“Content is King” said Bill Gates, back in 1996 in an article, he wrote and that was published on Microsoft website. That is still ruling the internet. The full article can be found on Wayback Machine here.
The information you are sharing must be current and updated often. There should be NO typos and grammatical errors. All the text must be clean, well formatted, well organized and beautifully structured. To be stand out from millions of websites, contents must be valuable, authentic and worth user’s time.
That is all from me, if you please want to add something or have question(s), comment area is all yours.
1. Bounce Rate: when a visitor visit only single page of a website and left.