Factors Influencing Your Overall Website Design
When most people check out a new website, they sometimes think “yikes, this website looks like total crap” or “wow, this is one of the best website designs I’ve ever seen!” What is it that makes the great websites look so great?
In my experience, Website designing is not a piece of cake. It is something which needs both time and efforts from your part. Plus, there are certain factors that can directly influence your overall website design as well. Although there are many factors, but in this piece of writing, just for your concern, I have decided to disclose the most important and significant ones, and included examples of some great web designs out there that have mastered these factors.
You may be interested in the following related articles as well.
Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.
Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.
01. Niche
First major factor that would influence your overall website design is the niche of your blog. Suppose, if you are designing a business website then your website design has to be professional while on the other hand, if you are designing a personal blog or website then there is no need to design a professional looking website, you can simply design a website with the most simplest of feature if you want to design a personal blog or website.
ReadWriteWeb
ReadWriteWeb is one of the most popular technology blogs in the world, known for offering insightful analysis about each day’s Internet industry news.
TheAppleBlog
TheAppleBlog provide information and influential advice for Apple users. Published for the day-to-day Apple user, it is a prominent source for news, reviews, walkthroughs, and real-life application of all Apple products.
TechCrunch
TechCrunch is a web publication that offers technology news and analysis, as well as profiling of startup companies, products and websites
Gizmodo
Gizmodo is weblog that provide information about gadget and consumer electronics. They also write review for new gadget.
Mashable
Founded in July 2005, Mashable is the world’s largest blog focused exclusively on Web 2.0 and Social Media news. With more than 12.5 million monthly pageviews, Mashable is the most prolific blog reviewing new Web sites and services, publishing breaking news on what’s new on the web and offering social media resources and guides. It also got place in Top 25 blog of 2009 by Time.com and rated inside top 5 blog on Twitter and Technorati.
Useful Resources
- How to Blog: Choose a Niche for Your Blog [Why Niches are Important]
- How to Choose a Popular Niche for Your Blog
- 6 Easy Steps to Identifying Your Blogging Niche
- 10 Tips for Researching a Niche for Your Blog
02. Navigation
Navigation features of your website are also one of the most important factors that would surely influence your overall website design to an extent. Navigation means how the visitors of your website would be surfing or navigating over your website. If you add some complex navigation features on your website then your visitors would have a tough time while navigating through all the pages of your website. So, it is advisable here that you must keep the navigation properties of your website as simple as possible.
Healogix
Healogix asks the four most important questions of itself with large text that draws the users attention. When, what, why and who? Can all be answered one click away from the homepage.
Sarah Longnecker
The navigation of this website is simple and easy to use. The banners behind the selected page make the navigation easily identifiable from the rest of the page.
Clear Left
The menu on this site resembles that of a post it note as you mouseover the links. Then entire layout of the site is based on this concept.
Owltastic
Owltastic is a perfect example of good user experience. Every element of the main navigation animates when the user hovers the mouse over it. Like other examples on this list, the navigation is also prominent and easy to locate.
Useful Resources
- Buttonator – Buttonator.com allows site users to create, drag, and drop their own personalized web buttons. Users can manipulate the font style, height, and width to reflect the words they wish to convey.
- Tabsgenerator – TabsGenerator.com is a tool that lets you design and create your own tabs for your blogs and websites.
- 30 Excellent CSS Based Navigation and Buttons Tutorial – Provides many examples of CSS Based Navigation and also included a tutorial on how to make it.
- 50+ Nice Clean CSS Tab-Based Navigation Scripts – Provides a variety of collections scripts CSS navigation tabs that are ready to use.
03. Color Combination
This is one factor which is mostly overlooked by majority of the people when they plan to design their website. However, let me clear you one thing here that this is one factor which can either make or break the future of your website. This is a common psyche of the people that the thing which attracts them at first glimpse, they give it a try and the thing which influences them to take this step is the appearance, packaging or color combination of that particular thing. Same goes with website designs as well, people who find a particular website design attractive tends to visit them every now and then and eventually becomes loyal to those websites as well.
Curious Generation Group
Curiousgenerationgroup using a combination of bright colors and soft in a circle, giving rise to the impression of friendly.
Esintitasarim
Esintitasarim many use a combination of blue and added water to make a web splats have the impression you want to always approach the client and look elegant.
Domainadvertising
Domainadvertising using a variety of bright colors such as blue, green, red, orange. This gives the impression of a professional and smart.
Ndesign-Studio
Ndesign-studio using a illustrator design with a variety of colors but still retains the dominant color is light brown to give the impression of creative, dynamic and brave.
Useful Resources
- Color Scheme Designer – Color Scheme Designer is the color generator that most designers use the most. This tool provides a better preview, permanent URL for the scheme you create, loaded with a ton of features, and in my opinion, one of the best looking interfaces around.
- Colors on the Web – This website is dedicated to color theory and the use of colors in design. Whether you are a blogger who needs ideas for a color scheme or a designer in search of some color inspiration, the tools presented here should give you a starting point.
- Colour Lovers – COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles.
- Color Wizard – Color Wizard is a tool that lets you start with a base and it will return matching colors for your selection. It will also returns hues, saturation, tint, and shades of your color. Color wizard offers color selection feature selections using monochromatic, analogous, triadic, tetradic, complimentary, and split complimentary.
04. Content
Yet another important factor which would influence your overall website design is the content that you would be posting over your website once your website goes live over World Wide Web. Content that you would be posting over your website should be relevant to the niche you are promoting via your website plus at the same time, the content needs to be updated so that your visitor would like to visit again and again in order to find something new over your website every now and then.
DesignInstruct
Design Instruct is a regularly updated web magazine for designers and digital artists where you can find and learn design tips and tricks. They provide high-quality tutorials from some of the top designers and digital artists from around the world, as well as articles that cover an array of topics to keep you informed and inspired.
Noupe
Noupe passionately delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from; CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more.
PSDTuts
Psdtuts+ is a blog/Photoshop site made to house and showcase some of the best Photoshop tutorials around. They publish tutorials that not only produce great graphics and effects, but explain the techniques behind them in a friendly, approachable manner.
05. Theme
Theme is the word which best defines your overall website design. Theme is something which can be considered as the final appearance or the layout of your website. Majority of the people doesn’t realize the importance of theme and they select the theme for their website without making any consideration. Let me tell you one thing here that this is one of the most deadly mistake majorities of the people commit while designing their website. Let me explain you with an example, suppose if you are planning to design a health related site and the theme you have selected is especially designed for a flower website then do you think that it would work? It would surely not. So, I am sure that now you must have gotten an idea about how theme can influence your overall website design as well.
- 50+ High-Quality Free Magento Themes
- 60+ Latest High-Quality Free WordPress Themes
- 140+ Brilliant Free WordPress Themes Around
- 120 Best Free Blogger Templates Around
- 25+ Reliable Sources to Get Commercial WordPress Themes
Useful Resources
- Theme-Generator – Theme-generator.net is an online layout generator that allows you to design and dynamically generate a personalized wordpress theme for your blog.
- How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial – This WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch.
- How to develop magento theme? converting psd to magento? – Will learn how to develop magento theme and also converting PSD to Magento theme.
- Top 10 Tutorials for Developing WordPress Themes – Provide 10 tutorials will teach basic WordPress theming as well as some more advanced skills.
06. SEO
SEO is the abbreviation of search engine optimization. Although, it is not a very important factor when it comes to website design but it is surely a deciding factor when it comes to the fate of your website. SEO is a technique which has been in practice for quite some time now. Webmasters make use of this technique in order to get their website ranked higher among search engine. Why they do so is because of the fact that search engines are the most important source of attracting organic traffic towards your website and if your website is not ranked higher among search engines then by no means you would be able to attract traffic towards your website and eventually survive the overall competition as well.
Useful Resources
- 10 Free Google SEO Tools Must Know
- 100 Web Tools Free SEO Tools Google Yahoo MSN Search engine
- The 30 Free SEO Tools You Must Know
- 15+ Useful Firefox SEO Tools For Serious Bloggers And Web Designers
07. Layout
Another important factor that would surely influence your website design is the layout of your website. When we talk about layout, things such as banner advertising, pop up, text links comes under this umbrella. A website loaded with banner advertisements and pop ups are not liked by the visitors as they tends to annoy them rather sorting out their concerns, so it is advisable here that you must keep your layout simple plus, do not load up your website with pop ups and banner advertisements.
TapTapTap
tap tap tap uses a bold and eye-catching layout to deliver the message to its visitors. The layout, although basically consisting of the sidebar and content area, is not boring at all and looks attractive. The left-hand side navigation and further effects are created using JavaScript.
Get London Reading
An effective background image can help a layout stand out. The effect achieved here fits with the objective of the project — to encourage people to read more.
Mihmorandum
Mihmorandum uses a common 3-column-layout in an unusual way. Although the structure is quite usual, the design itself looks distinctive and resembles a pile of paper put inside a folder.
Matriz Communicacao
This Brazilian company delivers a perfect example of how design and content can seamlessly be integrated within a complete yet simple layout.
Tri-Win
Sometimes a background image is enough to make the layout stand out. Although one can recognize a conventional layout structure here, the design looks distinctive and memorable. The background image of the site perfectly fits the company, which offers mailing services.
Useful Resources
- 60 Web Design Photoshop Layout Tutorials From 2010
- Guidelines, Tools and Resources For Web Wireframing
- 50 Free UI and Web Design Wireframing Kits, Resources and Source Files
08. Comment Box
Comment box is a part of almost every website that is live over World Wide Web. This is a small feature but bears a lot of importance when comes to effective website design. You must a comment box over your website, so that visitors can share their views, thoughts and feedback over your website. This small comment box can prove to be the most effective medium of communicating with your visitors.
Pvmgarage.com
Nice design. If you roll your mouse over the reply button, you can see some cool rollower with pencil like sketches.
Animhut.Com
Comment area is like a talk bubble pointing to the avatar. Nice arrangement of the elements. Also backlinks to the latest posts of the commentor.
1stWebdesigner.com
This comment area inclueds a backlink to your latest blog. If you give your blog’s URL, it will automatically add the link to your latest post. This enables the users to read the comment along with the commentor’s latest blogposts.
Shannonomoeller Blog
This design is my favorite. By using “hello” sticker, the designer have made the comment area much more interesting.
Useful Resources
- IntenseDebate – IntenseDebate is a feature-rich comment system for WordPress, Blogger, Tumblr and many other blogging/CMS platforms.
- Disqus – Disqus Comments is a comment system and moderation tool for your site. This service lets you add next-gen community management and social web integrations to any site on any platform.
- Instacomment – Instacomment is an ajax based tool allowing website creators to easily implement a commenting system within their site. This is especially useful for sites that would benefit from extra feedback.
- ComLuv – ComLuv is a WordPress plugin that serves to display latest post title of the blog commentators and accompanied by a link to the article. So, suppose you make comments on this post, then the latest post from your blog will appear below your comment.
09. Subscribe Button/Option
There should be a subscribe button present over your website at all costs. Although, this is an optional thing but can have a huge impact for sure. With the help of a subscribe button, the visitors who find your website as per their requirements will remain in contact with you all the times as they will get regular update about your website via email. We can see, almost every website puts subscribe button on the right above, is to enable users to instantly find out how to subscribe.
Hongkiat
Hongkiat has a drop down menu to subscribe, you can choose or subcribe via RSS subcribe via email.
SmashingMagazine
Featuring a unique design of the RSS feeds and large,this is characteristic from smashingmagazine.
Tutorial9
Located on the right above with a larger font size so as to facilitate the visitor or reader to subscribe.
Problogdesign
Problogdesign displays subscribe button accompanied with a facebook button and twiter button, and all the buttons in the frame of a transparent blue box to make a more focused.
10. Contact Us Page
Last but not the least important factor that would influence your overall website design is the contact us page. Provide all the necessary info and guidelines over your contact us page so that, the visitors of your website can’t find any difficulty in contacting you or browsing through your website.
Alexey Abramov
The contact page of this site is a pop up box that includes a form. It uses a combination of simple and pleasant graphics and typography.
Juan Diego Velaso
Having a Contact form placed beside a short introduction of the author allows users to read and contact the author without any hesitation.
Blue Door Baby
Having a centralised form and a good use of white space makes this form easy and comfortable to use.
Odopod
The brightly coloured Contact page catches the attention of the user. With headers to group its content, it helps users to notice information quickly.
Useful Resources
- Wufoo – Wufoo is an extremely versatile application and allows you to generate a wide variety of forms. Some of the forms available include contact forms, surveys, invitations, quizzes, and planners.
- PhpForm – PhpForm is an on the fly, no coding skills needed form maker. There are three stems to making forms you site visitors will fall in love with. The first step involves choosing your color—there are 25 to select from in total.
- FormSite – FormSite is a self-service tool that enables the creation of HTML forms using only a web browser. Your form may be a survey, order form, employment application, product registration, or anything you can imagine which receives HTML form input.
- JotForm – JotForm is the premier web based WYSIWYG form builder. It offers user-friendly interface which will help you build a form rapidly. On this site you will be able not only to create forms but also to integrate them to your website as well as collecting submissions from your guests completely free of charge.
So, above mentioned are some important factors that would influence your overall website design. I am sure that if you have a website then you must already be aware of these factors plus, you must also have designed your website considering these factors in your mind as well. However, if you are aware of some more, then feel free to share as it would help plenty of others people who are unaware of such factors.
Image Credits
Find Something Missing?
While writing this article, it’s always a possibility that we missed some other great tips and techniques. Feel free to share it with us.
excellent article. thanks
Cool post all that on one place great point of view.
The color scheme of logos influences the outlook and views of the viewers. Colors also work as emotional triggers that can depict your company’s style, image and personality.
Great post, love odopod!
A great list and in-depth creative insight into great website design.
Nice post! thanks.
Thanks a lot of sharing
All design are very creative and i like it. But; i most like it : quoterobot.com . Very interesting and creative idea.
Great article, a useful summary of the many factors that contribute towards good web design. It can often be a balancing act keeping all these different factors in mind at once but at the same time I’ve often found that once you’ve established a couple of key elements such as the logo or colour scheme etc the rest can often naturally lead on from this. I think the challenge is to continually strive to create original designs that push the boundaries whilst not alienating the client or losing site of the original brief.
The examples are so engaging this article could take hours to finish.
Cool post all that on one place great point of view.
Thank you for posting this guidelines.
This is some great work on the designs overall, and I would literally pay a client to get him to read this first :)).
Thanks, as a web developer myself I find this very useful and good to keep in mind, I think its worth mentioning that almost all the points you mentioned are also very important for the overall ranking of the website on SERP. Alex
This is very useful post because it has really helped me alot. keep up
I’ve often found that once you’ve established a couple of key elements such as the logo or colour scheme etc the rest can often naturally lead on from this.