Tuesday, 15 April 2014

Tools and considerations when designing websites part 1

Wireframing


Wire framing document features low- fidelity drawings that is primarily used to allow designers to plan layouts, navigation, interaction and hierarchy. Designers refer this as skeleton or blueprints.  Although wireframes are not the finished designs, there are representations of overall structure of the website design.  Moqups is a great recourse for designing wireframes. 
As for benefits, they enable designers to refine website's structure and navigation, anticipate the user's needs and evaluate the efficiency of the graphical and interactive elements.  Overall presenting this form of documentation presents to employers that the designer has contributed lots of time to produce a usable w
ebsite that user can obtain content and perform tasks.  Wireframing is inexpensive method of identifying the flaws and consolidating them. 
Learnability and fundability are very important aspects when it comes to user experience.  Wireframing enables the designer to experiment with the navigation. They can review whether the navigational element is clear or confuses. Identifying the process is a key aspect of ensuring that the users can perform task without getting lost. 

http://sixrevisions.com/user-interface/wireframing-benefits/
https://moqups.com/

Colour


colour meaning 

yellow

Yellow has one of the highest values in existence. It is generally a warm colour that conveys happiness, sunshine and energy. In some countries, this colour signifies hope and in Japan it symbolises courage. 

Designers needs to be aware that normal tone of yellow brings a sense of happiness more than bright yellow.  Dark yellow can be associated with antique and be used in website that wants to have an unchanging quality.  

Blue

Blue is well known for representing the sea and nature. Although it has a calming effect on people, the colour can come across as masculine.  In design, dark blue gives a trustworthy impression whilst other shades of blue can associated with finance. When used on websites, designers need to aware that accompanying blue with food reduces the appetite. 


Red

Red is among the most powerful of the warm colours. It is primarily symbolises violence, fire and blood. To extent, the colour gives a sense of power and anger. Red is well-known as the colour featured on the Soviet Union's flag and propaganda posters. 

Designs featuring high chroma red comes across as overwhelming to users.  It does convey a sense of passion and power. When bright red is included,  website designs will give a a sense of vibrancy whilst elegancy can be achieved with darker red. 

Green


Green also symbolise the nature. Leafs, grass and the countryside are the main objects that this colour signify.  However dark green could show a sign of greediness and jealously.  Green offers a sense of calmness but it also acts as a catalyst that releases power. 



 60-30-10 rule

Colour schemes convey a great range of moods but how they are used determines whether a website makes a good impression. The 60-30-10 rule is a great method to use when deciding on a colour scheme. This means that in terms of percentages, the first colour should cover 60% of the design whilst 30% represents the 2nd colour. The 10% of the website is covered by the accent colour, which compliments either the first or second colour 

Start with an image

Images are great sources of inspiration for an overall colour scheme.  These range from webpages to stock images. According to a source, we 'recognise colour by instinct'. When the colour offers engagement, the user get connected with the web design. The sea is a great example of this. Pictures of the sea consists of greens, blues, tints and dark tones. These colour form an emotional experience. 



http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
http://blog.crazyegg.com/2011/12/30/pick-website-color-combination/


No comments:

Post a Comment