Inspirations for design and layout and best practice research

This blog discusses about the inspirational responsive websites seen on the web. The split the websites listed below in many categories: layout, graphical elements, colour and typography. They identfy what they have to offer for responsive design.

Content

Both Field work and Done Done are very inspirational websites with great quality content. They both feature a sentence or 2 that describes the website. A home page should feature a navigation bar with a sentence about the subject in order to prompt user to explore the website.

With Field work, I enjoy the concept that the illustrations make the website look clean and visually pleasing. They all signify what the website offers without reading the content. As for responsive websites, the designer has successfully designed a phone site with these illustrations. In order for Iphone home page to work, the quantity of illustrations were reduced.


Done Done is another great website with great content style. Many of its pages feature one or two paragraphs next to a very visually effective illustration. Differtiating each section is a great  attribute that separates the content into small blocks. Each topic has its own section of the page where it features its own colour scheme, illustration and headings.

Navigation

Kojo.co.au features a very visual and very responsive navigation bar. The symbols are great imagery for students, the target audience. Many students are visual learners, therefore having symbols as well as word may alert to know the subject that the linked page offers.  When the navigation is hovered, the image slightly rotates. This makes it obvious to the student that the links is active.

Imagery, colour and typography

http://missmarysmix.com/

As retro was the visual style used in the Ibooks, it would make sense to conduct research in vintaged designed illustrations. I thought the typography found on missmarymix would be great grab the student's attention. The script face font is very reminiscent of many font found on retro designed posters.  One of the main aims for the website is to create noticeable moments in the site that will cause the audience remember the content and style. The script face font will only be used to present additonal information of the image.

A normal san serif would be used as headings. Bold san serif text allows to focus on the heading. San sanifs font feel more democratic, therefore using the san serif fonts would convey the right theme.

Using many type families within the same font to establish hierarchy is a great practice. The content body text is smaller and looks less bold. These factors enable the heading to stand out. A website with massive content, such as mine, having this characteristic would enhance the user experience.

Colour and feel are the main reasons I anaylised the website below. The colour scheme used for the Ibooks consisted of many cool colours, such as greens and blues.  There was often orange and white to allow my design to create the correct hierarchy structure.

This website has a similar colour scheme. The use of the 60 30 10 rule enables this website be visually engaging. The website uses a great range greens to add depth. I generally feel the use of solid colour causes the page to look trendy and clean. Placing red, orange and white in the most important parts of the site enables the audience to get the necessary information they need. I felt applying the same method of establishing hierarcy would enable the students to learn coral reefs.

I have realised that modern websites have one simple background colour. Applying clean colours to the coral website would allow the website to appear visually pleasing on future devices.  Using many shades of the colour is another design decison that improves the website's interface. Using many shades creates a modern feel that student would like to view.

The layout is another successful component. Each column has its own image or illustration above the heading and text. When the website is viewed on the Ipad, it just reduces the scale of both the columns and the images. As mention I thing that having 3 images on a row rather than having 2 does not require the user to scroll.  I would admit that the Iphone version should have 1 column of info.

Referring to Filed Work's website, the content is underneath a massive image that consumes the entire width of the site. To make it proportionally look right, the headings are smaller to ensure the page looks balance.

technical research

Joomal CMN

Joomal is a great content management systems that allows website developers and clients to change the website's content. It offers users a simple interface that allows them to insert HTML elements, such as video, without knowing the code. Making the content dynamic is one benefit of using a content management system. Clients or employees who have accessed to the website can correct, edit or add the information.

Hosting

Websites need hosting in order for them to presented on the internet. Hosting companies provide clients with domain names, the url, databases and other advance features. The price of getting the domain name depends on status of the clients. It is common for clients to pay a business tariff in order to get more domain names and perks. Reg123 also provide a premium tariff that give businesses unlimited access to some tools; for example the databases. 

NICE responsive website

Trafic light

Design 

When observing at the image effects and the graphical elements, I thought the website offered a vintage and retro feel. The use of vector shapes, such as the circle, makes the website look clean on the screen.  This is a great practice to follow because website need to look visually pleasing on future devices.  

Simple is the key word to describe the page designs. The designer has chosen to apply a nice simple background that offers clarity and uniformity. Using white and black enables the images to blend in. This helps the website to establish a relationship between the pictures and pictures. The black and white filtered applied on the imagery causes them to strike the audiences' eyes. This results in the pictures being among on top levels of hierarchy.  

Typography

There is a great use of many type families presented on all pages. The bold Helvetica font entices the audience to red the tagline 'we create new web'.  Applying capitals gives a sense of power to the headings and tag lines. Upper case letters are used to signify shouting or offer posters the ability to encourage customers to take a course of action 

 Design navigation and animation

The designer has done a professional job at presenting a massive vertical navigation bar. The scale of the text makes the process of navigating through the website is easy. The pop up menu features a nice transition that makes the navigation look smoothe.

However, the navigation bar on the home page looks slightly out of place. The other pages feature a horizontal navigation bar on the top of the page whilst the home page navigation is postioned at the bottom. Although it can work if there is enough striking elements that causing the navigation bar to be the 2nd focal point, having just a white background for the links does not achieve that.

Responsive design 

When I scaled down the website, both the Iphone and the Ipad website were professionally designed. One of the dramatic changes in the design is the navigation. The image below presents the home button on the top right of the banner. The left section of the header features a navigation drop down menu leading to all sections of the site.  Being a fixed navigation bar causes it to be seen at all times, therefore, making the process of navigating to other very quick.  

Having the text centrally justified is another great typography feature. Justifying the text cleanly presents the content to the user. The font and and the content are highly legible and readable on both iPad and iPhone 

The layout on the desktop and the Ipad versions are very simliar in certain aspects. There are 3 image c presented on the row on both versions.  It common for Ipad sites to only have two columns but the designer has chosen to make the image florid. The image seen on the Ipad are smaller compared to the computer website.

http://www.trafficlight.se/

Shokunin

Skokunin is a very imaginative website with relevant content and very effective use of colour and typography. The home page reveals a detailed illustration of a waiter that acts as metaphor for serving a great web service. The background features red but there are slightly faded web themed illustrations to enable the user to figure out the website's theme and products. 

As for the content, I enjoyed the concept of using puns make this website look comical. The word 'Can I take your order' is a link that would apply ordering food. However, this leads the users to an application for hiring the web services. 

Typography is one of its boldest components. Presenting one font's type families makes the website look consistent and simple. The headings feature bold character whilst body content feature the regular letter forms. 

The colour conveys a sense of happiness and power. In context red is often is to assoicate China and its food. The colour compliments with the comical theme and compliments the yellow and white. Against a white background, the red comes across as elegant. 

The interactive page is the most engaging part of the website experience.  The image shown below is an image gallery positioned inside a graphics tablet illustrations. Although the section needs captions to explain each picture, the detail and the visual imagery makes this one of the most memorial parts of the website.

Responsive design 

I generally think that the phone and the graphics tablet website is very engaging. The header only reveals the tagline and the link that takes the user to application form. The empty white space makes the content very visual. The website is quite text heavy but the spacing on the phone site creates relationships between the image and the content more than the content website.

As for the layout, the Ipad version cramps the content and images together. Websites with cramped information maybe off putting. 

Navigation and interactive elements

Unlike other websites seen, activating a link causes a very fast moving animation sequence to occur. When the user selects ' I'm ready to order' button, the website immediately scrolls down to the bottom part  at a fast pace. There is a form that enables user to input the details. Beneath it are 4 links that allows the customer to select the kinds of service required.

However the navigation is quite unusable when viewed on the phone and a graphics tablet. When the 3 lined button is press, the website presents a new page with the primary links. However the illustrations overlap the links, making the text illegible.

http://www.shokunin.pro/en

I thought to get some retro design inspriation, I decided to conduct some research onto a retro designed website. When I entered the webs page, my initially thought the design was very vibrant. The colour scheme generally signify nature. The use of pale and strong great offers the design great depth and elegancy. The complementary colour red is draws the audiences' eye to the tag line and the brand name. 

 One of the greatest aspects of the site is the hierarchy. The heading font features very bold characters that strikes the user's eyes. The use of of anomaly also draws the audiences' eyes to the heading.  Some headings features a bold word but it followed by word featuring condensed or italic styles. It is a great gestalt principle to apply to enhance the hierarchy structure.

The visual imagery on the site creates an enjoyable user experience. The imagery is relevant because they all promote an aspect of the surface. Although  the website is written in Spanish,  the clock image is adverting that the food company does take aways or their restaurant surfaces are very efficient. However there should more information and links that helps the user to find all the information needed in all pages.

Having a search for info button enables the user to explore secondary information. The boxes containing them feature a simple heading and a brief description about the image.  This may prompt the user to select the link and navigate to the related page. Overall it is a great concept but I think it may divert the audience from the path. Having too many pages causes the navigation process to be bit confusing. My solution to the issue is to present a box with a short paragraph but there should be a button that reveals the remaining content.

Navigation and links

One of unique buttons featured is the mute and sound on button. When the button showing a microphone is activated, suddenly music can be heard. It is a creative concept but I do not think is a good relevent feature. There should be another element that is more essential for user to interact.

The positioning of the social media website links could cause people to leave the website. Social media links are OK but they should the last part of the hierarchy.  I would advise the design to place the links down to the bottom of the page.

Although the navigation bar resembles the one analysed in the article, there a problem with the programming. When viewed on the Ipad, there is no navigation bar and no site map. This makes it impossible for either the Ipad or the Iphone user to navigate. This will prompt them to leave the website.

The other interactive elements I enjoyed viewing is the video. The imagery surrounding the YouTube video offers a cinematic feel that creates an enjoyable experience. This design attribute prompted me to view the clip. The layout and consistent use of one font also made page look visually pleasing.

http://sanchezromerocarvajal.com/la-jamoneta

Design and responsive design

The illustrations are one of the most visually striking graphical elements on the home page.  These vibrant illustrations add a creative feel. The illustrations first signify that the company produces art and web work.  Against the background, the elements really standout. 

Red is a very elegant colour  that draws the user onto the headers within the website. This enhances the reading experience because it allows the to use the headings as reference points.  The quanity of text does not become overwhelming due to the strong heading design.

Typography is







Responsive design

The designer has professionally designed the website for all devices. The design as really done a great job at making the content presentable on the other pages. I realised that the presenting 3 columns of information on the Ipad is very common. Not making the web page long reduces the need of scrolling in long periods. As a designer, I would present the information very efficiently.

I do enjoy the concept of not adding too many characters per line on the Iphone version. The phone site reveals 1 column of information. However the scale and the choice of font causes the content maintain the audience's attention. 

Navigation 

The horizonal bar is very interesting when viewed on all devices. The navigation links are postioned nearer to the centre of the page when the width of page is reduced. However, there was a button that I have never came across before. There was a buttons that reveals a drop menu for the other information. It is common for drop down menus to reveal sub sections.  There is a sense of the drop down menu has been unprofessionally design. There are some links without an underline, which suggests that they are not active links. It many take a long time for the user to figure which out of these words are links. 

http://madebyfieldwork.com/

Time management update

Todays post will be updating you on my time management. I have been conducting research into existing responsive and static websites. The research consisted on analysis of the websites' designs, the navigation structure and the animated elements that enhances the user experience. As you can see on the image above I separated the research into mini task. The only thing to include into the research is to include the written containing other research onto my blog.

There has been a lot of work done for the sketching process. With lot of sketches, mood boards, storyboarding and wire framing has allowed me to develop 3 kinds of layouts for the coral website. I am going to use mocups to develop these ideas forward. There will be high fidelity mocks created on paper to ensure I have enough content for the presentation. I will also start create some graphical elements in illustrator to present to my peers. Generally I have 2 weeks to complete the final stage of planning my website and preparing my presentation.

CSS Tags considerations

Descendant Combinator

In order to target specific tags , descendant combinators allow programmers to combine two selectors.  Lets take ‘Jump up with CSS’. There is a CSS code below that causes browser to to style a div class with the value of .box if it inside a container. If the box tag is positioned outside the container, then the browser will not style the box. Due to its function, it can code partly inflexible. 

Child Combinator

Child combinator has the same functions as descendant combinator. In terms of syntax, it features a greater sign. In order for the tag to meet the criteria, the targeted tag cannot be wrapped by another element. See the image below for example

Pseudo-class

Psueudo-class tag features a colon that informs the browser the state of the element. Navigation links consist of these tags in order for the links to change appearance when activated or hovered. Having a pseudo-tag that responds when the user interacts with the graphical elements are known as dynamic classes. Let’s take this example The hover pesudo-class tag has red in the colour property. When cursor interactive, the navigation link should turn red. 

http://www.w3schools.com/

Debugging your css

Ensuring the CSS code does not feature invalid tags and classes is one essential task to include in the production state. When there is one element with a syntax error, the browser will present the other element with wrong styling and in sometimes strange positions.

The syntax below has a invalid random name that is assigned to code that deals with box sizing. The incorrect syntax would cause the browser to disable the styling for the first rule . Applying braces next to an invalid div class causes the web browser ignores what is inside the empty bracket. It will only read the classes and the data within the next brackets

Using the source tools on Firefox and Chrome is another great tip the author of Jump Start CSS. The developers tools enables users to view the website’s  HTMl and CSS codes. When the designs sees the design on the browser, he or she can change the values to see what changed occurred. The values changed on the browser are not connected with the website files, 

Validating CSS

There are validators that enable designers to easily fix the syntax issues. There is W3 schools CSS validator but it does not recognise CSS3 attributes are not recogised. The designer can paste the code into the website or use the URL function that enables the validator to directly read the CSS.  With validators there are errors and warnings. Errors refer to the invalid syntax but warnings alerts designers that some of the code is not recogised. 

Although it is great for fixing solutions, the validator does not offer perfect results. Some errors presented  on the validator do not visibly effect the designer’s webpage. 

HTML tags considerations

Design problems with responsive websites

James Young is one of the authors writing articles for creative Bloq. His article offers advise on how to use design a responsive website. I explored his solutions to prevent the issues from occurring in the production state

Fledgling methodology

According to James, the traditional process of was quite linear. The designers were briefed and then given a wire framing and planning infrastructure to follow. The last part of the process was to develop simple pixel based mock ups at the presentation where the website would be signed off to complete.

However, the designing interface and the user experience for responsive websites is very complex. Responsive designs require more planning, therefore he recommends to use more wire framing, sketching and high fidelity documents to plan the website design and layout. Showing clients and peers with many versions of the websites, such as the wireframes, is very effective tool to get constructive feedback. 

Images

James states that working with images in responsive design is fragmented. W3 schools have not stated a specification, therefore it leaves designers with many personal options to improve the navigations usability by adding scripts. His main advise is to use vector based symbols in order to build a website suitable for future devises. James is using the quote ‘graphics on high-pixel-density devices don't look blurry is conveying that the imagery should be clearly seen when user views the website on a more sophisticated high quality device. 

Navigation

Many designers take navigation elements for granted.  Many navigation presented are usually positioned horizontally on the top of page. James argues that rather than downloading and then embedding it into the websites files, analyses the interactive element’s ability to offer efficient user experience. The designer also needs to bear in mind the website’s design, layout and architecture, including content. 

http://www.creativebloq.com/responsive-web-design/problems-8122790

Responsive Websites research and technical research part 2

HTMl5

HTMl 5 is the newest form of HTML that replaces HTML4 and xHTML. This code's function is to structure the text of the website. The code links the document to Jquery and CSS files to help the website be styled with colour, shadows and other graphical elements. Many conventions, such as the The World Wide Web, agreed that this version of the code should reduce external plugins, for instance Flash. The code's primary functions are to offer more markup rather than scripting and enable the website to be device independent. The elements introduced includes video, audio, new form of tags and control, such as calendar.

http://www.w3schools.com/html/html5_intro.asp

CSS3

CSS by itself is a markup language that stands for Cascading Style Sheets. This language enables designers to code in the look and style of the website.  CSS3 is the lastest addition of this but it has few new features that offers designers very efficient tools.  The main characteristic of CSS3 is to allow designers to develop media-rich website.  CSS3 code enables websites with advanced graphical features and enhance interface design to upload at a fast pace. 

Today's web browsers accept CSS3. FireFox, Safari, Chrome and Internet Explorer can present websites with desktop attributes, such as drop shadows. In regards to Internet  Explorer, only 9 and above can only read this code. 

http://www.maclife.com/article/features/what_css3

In relation to the previous post, I felt there was not enough responsive designed websites analysed.

Browser market

One of the things to consider as web designer is to consider the market share of the web broswers. According to W3schools,  Chrome used by 58% of the world's users whilst Internet Explorer is 8.9%. Firefox has the second highest marketshare of 24.9%. These results suggests that designers still have create website for all 3 browsers listed above.

http://www.w3schools.com/browsers/browsers_stats.asp

On the interesting note, screen resolution usage has unexpected results. At the moment 34% of users have a screen above 1920 x 1080 resolution. This would include Retina display and 4K display. The conventional screen resolution 1024 x 768 is only used by 6% of the world's users. Skeleton is a framework that is fits everything into a 960px container. 

http://www.w3schools.com/browsers/browsers_display.asp

Website Research

Design Council impression 

Generally this is a very usable responsive website with an effective home page. It presents a very vibrant image with its tagline on the foreground. This immediately informs the user about the company in a catchy tagline.  There is great content about their beliefs, values, their clients and their employees to demonstrate that the agency is a trust worthy site. The site mainly aims at designers and businesses who work in the industry. Users in the 21-50 age demographic would explore this site to find design related jobs.

Responsive Design

Desktop

This is one the most professionally designed responsive websites in the market. The desktop version presents a evenly constructed layout containing a massive image with a vertical navigation positioned at the left of it. The large scale of the link boxes enables the user to interact with the navigation with ease. The link is activated even if the cursor selects the background; not the word. This applies that the design has put in a lot of interface design considerations into the navigation section.

The large scale of the text enhances the readability. It is a very common practice to have a maxium of 60 characters per line. Block of text with more than the limit causes the audience to lost whilst reading.

Ipad

The Ipad version of the site is generally the same in terms of layout. The scale of the images reduced to accommodate enough empty space. I feel that having a lot of white space causes the composition to look natural to the human eye.

The navigation has altered dramatically on the Ipad website. The vertical navigation bar only appears if the user selects the button with the 3 buttons. When activated, a short transition appears to make website feel fast. The link boxes are large enough to accommodate finger interaction.

Kojo

Although the animated background causes the website design to give an overwhealming impression, the interface elements creates an captivating user experience.  A massive navigation bars with links leading to the primary page bar appears. Having an attractive navigation bar as the main focal point causes the audience to explore Kojo.

Kojo is a website with useful information that the user can obtain.  The large quantity of information available suggests that the company offers many products and services. There are 6 categories of services it offers: post, events, digital, film, motion sound. The process of entering some of the pages are too long but the brief information  may cause the user to ignore that factor. The content per page is around 3 paragraphs, making reading a short experience.

Responsive Design 

It is very unusual to positioned the navigation of the left hand side of the website. However,  the navigation bar size  and the high amount of graphical elements on the right section of the design causes it compliment the design.  When viewed on desktop, the animated links, which appear as logos, they appear as on the image above.  

There is a dramatic change in the postion of the navigation bar on both the Ipad and the Iphone version of Kojo.com. Presenting the links on the top of the page and place the links in a horizontal bar maintains both good user experience and interface design. The links are massive enough for user to touch the them with their fingers but the positioning of the links prevents the symbols overlapping. 

The layout does not change when viewed on the Ipad. The text and images are scaled down in relation to the device width and lenght. For example the text becomes very small when the website is presented on the IPhone version. 

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/