Layout

• A brand is a uniquely identifying name, term, design or symbol linked to one individual or organisation.
• Brands are used to market a business but also to create a presence.
• Brands should be reflected through digital design by using different colour combinations that relate to colours used by the organisation or individual brand.
  

• We’ve looked at the meaning of colour and it’s importance in both branding and what feel it creates.
• For example, red increases heart rate whereas blue calms the heart.
• Colour is at the centre of every digital design.
  

• For those more interested in finding out about typography and graphics design, the Graphics Design Rules book might be of interest.

• Since around 2006 or so all websites have begun to follow some very simple layouts that make it easier for users to use websites.
• Steve Krug’s book Don’t Make Me Think is one of the essential books for anyone interested in layout and user experience.

• Whilst the lesson content does focus on website design, it also affects different digital medias such as desktop publishing, graphics design and even video editing as well.
• Take what you learn here and use it wherever you work on digital media.

• User Experience (UX) is the most important thing related to website layout. Don’t pick a design you like because you like it – pick one that’s been tested and works.
• When we begin to develop our websites with code later in the year, UX will become the most important part of the development process. 

When designing or building a website, it is important to take advantage of several layout tools. In this lesson we will look at:

• Whitespace
• Visual balance

• Whitespace is spacing that is intentionally added to separate content or elements. It is called negative space (which implies that content therefore is positive space).
• Whitespace does not need to be white in colour, it simply needs to not contain any content or elements in it. 
• It can be any texture, or colour or anything. 
• Human beings find it more visually appealing if a digital product is not cluttered and has lots of whitespace.

• Not all websites need to be symmetrical, and in fact it is more common for websites to be asymmetrical.
• In digital design, when two objects are used that have the same appearance on either side, it is called reflective symmetry.

• Reflectional symmetry mirrors an element around a central axis.
• This axis can be in any direction or orientation
• Natural forms that grow or move across the earth’s surface develop a reflective symmetry.

• Pages can be asymmetric, meaning they are not symmetrical at all. 
• Pages that do this often employ compositional balance. 
• Asymmetric balance is far harder to achieve than symmetric.
• A standard asymmetrical design is one which features a sidebar.

• Whilst in all of the previous examples, the asymmetric balance was achieved using the size of the elements (e.g. the squares would equal about the same size), there are other methods of visual balance:
  • Balance by weight (size)
  • Balance by colour
  • Balance by value
  • Balance by density (quanity)

• This model looks to balance both sides by the size of each element.
• Notice that the left side matches up with the right side

• Some colours are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest.

• Similar to balance by colour, balance by value uses darker objects to build an effective asymmetric design.
• Darker objects have more weight than lighter objects

• Packing more elements into a given space, gives more weight to that space

•  Fixed width websites
• Liquid websites
• Responsive websites 

• These websites have a central container that is a fixed width, often this was 960 pixels but since screens have got much larger 960 pixels is not enough. 
• These are often easier to implement and modify later on. 
• These are becoming less common today

• A liquid/fluid layout is one in which the elements of the page resize based on the user's device.
• Instead of using a fixed number of pixels, they use a percentage. 

• A responsive design features the best design for several screen sizes. For example, on a very large display it might use a central container but then on a small display it might show things vertically.
• Responsive also hides certain parts of the website as the screen size goes down.
• Responsive is by far the most common type of website today
• It does take longer to accomplish than the other two designs

• Wireframes are a way of representing the visual design of a webpage or digital media and are very common in the industry.

• A wireframe should:

  • navigational bars/links

  • text elements on the page (but not necessarily including all the text that will be in the element)

  • interactive elements such as buttons

  • images, videos and audio

  • form inputs

  • hyperlinks (and where they go)

• Occasionally, wireframes will include annotations to give a rough idea of how an element will be styled.

• For example, a wireframe may include annotations such as colours, fonts and the size of media elements such as video or images.

• Wireframes use crosses where images should be, and wavy lines where text should be.

• They also seek to have multiple layouts where possible, so for example they have a layout for phones, tablets and desktop computers.

• They are then transferred from this design to digital media.