A mixture of responsive and non-responsive websites

NOTE: There will be a post showing more responsive websites

Behance

Design elements

Behance.com is a fantastic design website that is build for all devices. The layout and the imagery are the website's boldest components.

Behance.com's layout strangely presents 4 columns on the main section. This is not a common practice that website designers follow. Due to the use of negative space and large graphical elements, this attribute does not reduce the interface design.  Not applying a border to the main section contributes in the layout look visually pleasing. 

When visiting the website, there is a sense that the design contributing in establishing a structure and hierarchy. The bright blue and the contrast enables the navigation and the central section of the banner to be the main focal points.  The buttons visible in the image have gradients applied to them, making them stand out. On a flat colour background, it adds contrast and balance to the site. Having a dark or mild chroma colours on a grey background stand out. 

The text also enables the website to draw to the primary information. Larger and bolder links suggests that they lead to important page whilst smaller and sometimes italic links apply secondary content, such as profiles.

Navigation and interaction

Having optimised navigation bar for all 3 devices is a sign this is professionally designed. There is a simple horizonal navigation bar for desktop version whilst the Ipad and Iphone version features symbols.  Pressing the button with the links causes a dropdown menu with links to the primary pages whilst the symbol on the right acts as a search button. Overall having large and legible symbols enhances the usability. 

I have also concluded that the hover effects applied enables the audience to navigate through the website. When hovered or active, an elegant blue gradient appears behind the link.

User experience and interface design considerations (theory)

Many of the common practices of usability and interface design have been followed. I can see a content audit has been used because the website presents links leading to the primary information. This causes the homepage to have the most important information that the user would require. 

Many aspects of the is very forgiving towards the user. When the user activates the search function, the user has the choice to cancel the process. This is a great feature to include in a website. Simple animation is applied to prevent the website feeling sluggish.

Symbols is one of the key aspects of the navigation and web design. The symbols signify the context each page. The world symbol signifies discover whilst and an arrow facing downward suggest that the function cause text or images to appear.

Overview 

Behance.com is a great website that follow many practices that causes the user to have a great user experience. The website enable users to explore artist by following them. It offers stats about the artist and presents their most recent work. 

National Geographic

Design elements

Overall the typography,  composition and the colour scheme produces that visually pleasing and well designed  for nature enthusiast. The National Geographic channel's website features a layout with a great use of negative space, a colour scheme that creates contrast and typography that offers an effective reading experience. However, only the

Yellow is a high value colour that enables the hierarchy to be established. Particularly on the black, the graphical elements featuring the bright yellow are most likely seen as the main focal points. The logo and couple of the links are very noticeable at a first glance. The use of flat colour instead of gradients makes this site's design very sophisticated. Many web sites and applications use this colour to make their design offer audience clarity.  

Helvetica Neue is the font for the navigation. Although its tight rhythm makes it a slightly bad font choice for web, the colour scheme and the font's tracking enables it to be still legible. In contrast to the san serif text Minion Pro Display is an elegant and modern serif font  used as the main body content. 

The composition on majority of the page are give an clean impression. Negative space enables the website structure to feel spread out and harmonious. The horizontal navigation presented has reasonably size text that differentiates the primary to the secondary pages. This has been achieved due to the primary links having the largest font size. 

User experience and interface design considerations (theory) and responsive design

Overall the pages with videos offer great usability. There are large icons that signify interaction. Lets take this video. The large triangle inside  circle immediately tells the user it is a video. There is text that offers a summary to the user to left section of the site. This enables the user to get a preview of what the video provides. The scale of the more button suggests that is an interactive link.  Having captions is a great usability feature that allows the user to figure out the page's purpose and context. 

Although it has responsive issues on the home page, there are few pages that are designed for desktop, phone and graphics tablet. When viewed at full screen, there are 4 images per row. When seen on graphics tablet, there are two thumbnails per row. The Iphone version reduces the gallery to 1 image per column. This is a great feature that suggest that the designer has designed a great usable website for all devices.

Filtering the information is another characteristic that reduces the time for the user to search for the video. Users can select clips produced by certain video editors and dates. The gerne and most popular bold, making them the most visible. The gallery has very recogisable symbols that are self explanotory. They sigify that the symbols allow the user to enter the National Geographic social media pages.

Navigation and interaction

Majority of the site only presents the desktop version. The desktop design contains a simple and very conventional navigation bar where users can search for data about the wildlife. The far right section of the navigation consists of a search bar where users can insert terms. 

When on the responsively designed pages, the navigation structure facilitates Ipad and Iphone users. When the drop down menu is activated, both the links and the search button appears. Fits Laws is applied to  the vertical navigation bars to enhance the experience of touching the links. Having a disappearing drop down menu causes the interface design look clean.

Overview

 Although there is responsive issues, the website is very forgiving and self explanotory. The symbols enable people to immediately to get a sense of what the context of the page. 

History

Design elements

History channel is one of the most interactive website analysed in this study. The home page features massive and bright links for the primary pages, such as the shows page. The main section features a massive interactive gallery where users can select text to explore the subjects. The bold text on the gallery are links that lead to videos. Although white text is not the clearest colour for links, the scale and thickness compels the audience to select the font.

The banner is not overbearing due to the simple colour scheme.  A dark colour scheme makes the website look modern and clean. The navigation only feature thin borders rather than blocks of colours to make the home page look simple and balanced. The white background used on popular shows.

User experience and interface design considerations (theory)

One of the most common practices for today's industry is to ensure the user is guided to the correct regional website. Although many websites do this automatically, it is a great usablity feature to allow them to make their preferences.  One of bad practices of designing is inserting pop arts to inform people. Neilson states that a website resembling an advertisment causes the website to look untrustworthy. 

Arranging videos and content using grids is a great practice to enhance the user experience. The designer has separated the videos into 2 columns when the website is viewed on the Ipad. Althought the layout of the videos are visually please, the text width do not correspond with the thumbnail. Not justifying the text cause the content to look messy.

Navigation and interaction

The History Channel's website does a professional job of differiatating the primary and secondary links on its overal navigation bar.. The main links are visibly striking due to the use of the high chroma blue. The verticle navigation bar immediately causes the user to focus on the first 6 links. A tinted grey is used for the secondary links. Above the main links are the close and the search functions. They are additonal features the creates a forgiven and learnable experience.

This was the first navigation bar designed as in the image above in my studies. Each page on all versions features links to all sections in a subject, such as the Titantic. There are buttons the guides the user to the related sections that offer the audience useful information. The arrow and the cross above the links respectfully cause this navigation bar to appear and disappear.

Overview 

This has been the most usable website of the examples anaylised so far. The navigation and the overall colour are its strongest traits. Users are able to take non-linear paths to explore the topics.

IGN

Design

IGN is one website that has followed bad practices of design.  There is an issue of the quantity of content on the home page and the composition of the links.  Having multiple navigation and links hinders the hierarchy.  A combination of the main navigation bar, links on the banner and inks above the horizontal navigation poses a question of what user should focus first. Although predicting user's viewing habits is impossible, the quantity of links could make the user confuse, discouraging them to explore the site.

The high chroma red is one compliment for this site. The use of red as the hover effect immediately alerts users that the link has been selected. The brand is identified due to the same red. The colour forces the audience to focus on the IGN logo.

User experience and interface design considerations (theory)

The layout needs improving but there are many good interface design practices being followed. The thick bold text causes the audience to focus in the area. The thick text act as headings and links connected to important pages. This enables the designer to sucesfully build a website where users would discover the most relevent and useful content. 


Animation is a key element to include when applying interactive elements. There is a short protrays it as efficient, modern and professioal. This attribute encourages the user to explore the website.

Borders seperates the links and pictures to ensure the compostion looks harminous. Having this and negative space makes rows of image feel spread out. I realised that some rows, for instance the example above, have 2 imagers per column. The design of the small gallery compliments the design because the imagery are scaled small enough that allows empty space to appear between the pictures.

Navigation and interaction

IGN offers one of the  most unqiue navigation structure. There is an existing horzontal bar filled with links, there a browse button containing links connected to the main categories of content.The first colunm features the primary pages that features the most essiental content. The second column shows the sub categories of content the website offers, ranging from reviews to blogs. 

The composition is one the best aspects of the navigation bar. The home button is positioned above the the browse button. This reduces the lenght of time to return to the home page. A search function on the side of the browes button makes easier for the user to type an input. This is one professionally design navigation element that makes navigating experience enjoyable.

Smashing Magazine

Design elements

Smashing magazine is one of the best designed information website for designers.  The use of font families and combination causes the content and headings to be highly readable.  The bold heading enables the user to realise that this is a section of the main content. Two kinds of fonts are used as main content. The serif font is applied to the primary information whilst the a regular san serifs act as captions.  This characteristic separates the content into smaller chunks, making the articles understandable.

The general colour scheme is very vibrant. The logo and the button have an attractive orange that complements the white background. A slightly bright and pale blue is used as links. The tone of blue compliments and maintains the dynamic feel. It causes the vibrant images or illustrations to blend with the website.

Navigation and interaction

The navigation design on all devices follow many interface design conventions. The desktop features a visually striking horizontal navigation bar where user can navigate through to designer's work and events occurring in the media industry.  The use of negative space surrounding the links makes a even and spacious row of links. 

When seen on an Ipad and on the Iphone the common button with 3 lines appear. The drop menu offers 2 columns filled with essential links. Smashing Magazine does a great drop at categorising the types of design, ranging from drawing to UX design. The clear and relevant links enable designer to explore the website to obtain content about theory relating to design. 

As mentioned in the design elements sections of the analysis, the colour scheme offers great contrast. The search and the hyperlinks are able to offer an efficient user experience due to high chroma colours used. The image above demonstrates that the contrast between the background and the search books is massive. This enables the interactive search bar to be visible to users, making it easier to navigate around the site. 

Next to the search is the back to the top button. This function's purpose is to allow the user to navigate back to the top of the page without scrolling.  Responsive websites use this function to ensure users do not have the need scroll regularly to return top section of the site. Top sections of website usually include a navigation bar. Enabling users to return to the navigation bar  to enter another page very quickly results in the an efficent user expeirence. 

Overview

This is a great information site for design. The interactive features, content and social media links enables user to explore the digital industry. The comment feature is a great attribute that enhances the interactive design. The scale and colour of the button prompts users to comment on articles and artwork. This is a great method of having the content engage with the audience.  

There are many cases where the layout fills the entire screen. Although many designers do not use this concept, Smashing Magazine's website benefits with a wide composition.  This layout offers enough white space to establish relationships and hierarchies.  The spacing between sections, comments and the images in the article causes the audience to recognise the patterns that helps them to differentiate paragraphs from headings and other information.  

http://www.smashingmagazine.com/

http://uk.ign.com/

http://www.history.com/

http://www.discovery.com/

http://www.behance.net/