Web Design Elements

Nowadays, every aspect of modern life is connected to the internet, and thus website has became the main marketing tools for many companies/organisations. However, besides products/services information, what other elements should be included in their web pages?

A great web design makes important content or desired actions obvious and appealing to the visitors. One of the effective websites that I found online is Whitehouse.

It has a clear page structure. Header, hero element, body and footer are the main skeleton of their website.

Whitehouse.gov Homepage

It has a consistent theme. Although most of the organisations prefer to have a more eye-catching homepage to other interior sub pages, it is important for us to maintain the overall website’s theme. In whitehouse.gov, their theme is focused, clear and obvious. The use of layout is very consistent in every sub pages.

Whitehouse.gov Subpage

It has a clean monochromatic design. Blue is the only colour used in this website. A right amount of white and black are being added to the base (blue) colour. The simplicity of this colour scheme and the peacefulness of the design make the site looks classy and elegant.

It has good typography. Studies have shown that serif fonts are easier to read in printed works and sans-serif are better on the web. In whitehouse.gov, font-family of Helvetica, Arial and Whitney SSm A (sans-serif typeface) are being used. Besides that, an appropriate amount of line-height, word spacing and margin/padding are used to improve the users readability.

It is easy to navigate. Their primary and secondary navigations have greatly improved the users experience in finding their way. All the links are grouped and organised in a clear manner, thus viewers can find their resources in just a few clicks. Besides that, there is always a “What are you looking for?” search box to help the users if they couldn’t find the information they want.

Whitehouse.gov navigation bar

It has hover effect that helps the visitors to keep track of where they are looking on a page. For example, when users hover to “Music & Arts Performances” link, the colour of the link changes from #6394c5 to #036 and the font is underlined. Furthermore, a title which serves as help words is also shown when we hover to each and every link.

Whitehouse.gov Hover Effect

It has images and videos. When we first view their home page, our attention will definitely be drawn at the giant image located at the hero element. On top of that, various small pictures and videos are being inserted into the website. Besides making the website more lively, many believe that a meaningful video/image leaves a greater impact than words.

Whitehouse.gov Video and Image

Data is organised neatly with read more button. Instead of showing the whole article, the website provides us the “read more” button, making the page looks less cluttered. In whitehouse.gov, flat buttons are used throughout the web pages. The use of flat button has avoided the excessive layering, and thus it fits the minimalist design theme well.

Whitehouse.gov Read More

The best homepages aren’t always static. Whitehouse.gov constantly changes its website to reflect the needs, problems, and questions of their visitors. The dynamic contents encourage the visitors to visit their website more often, and thus making the whole online system very successful.

Reference:

Whitehouse: https://www.whitehouse.gov/

Elements of modern web design: http://blog.hubspot.com/marketing/elements-of-modern-web-design-list

Choice of fonts: http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/

Best website homepage design examples: http://blog.hubspot.com/blog/tabid/6307/bid/34006/15-Examples-of-Brilliant-Homepage-Design.aspx?__hstc=93759874.3ec21f8749c2d6404465186856fb8160.1441358935000.1441358935000.1441358935000.1&__hssc=93759874.1.1441358935000&__hsfp=3605072521

Advertisements

One thought on “Web Design Elements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s