Content & interface design

February 25, 2009


scope-and-navigation

Initial Design Evaluation

December 9, 2008


Aspects of your design that you could discuss with others for evaluating your intial interface design

  • Visual Appeal – first impression?
  • Emotional response – how do they feel about it?
  • Cultural links – does it remind them of anything/association?
  • Accessibility – colour/legibility/functions
  • Imaging Basics

    November 11, 2008


     

    Digital Imaging Basics

     

    Pixels

    A digital image is made up from a grid of pixels also known as picture elements. Every pixel is square in shape and is the same size. To create the image they are positioned in rows and columns to form a grid.  Each pixel can be assigned a specific colour value, however, there is no variation in colour or brightness across a pixel.

    Image quality is directly related to aspects such as

    • Number of pixels used to create the image.
    • The size of the pixels.
    • The number of tones or colours available for a pixel to use.

    Images represented by a grid of pixels are also known as raster or bitmap graphics.

         
         
         

    3×3 grid

     

     

    Colour models

    Colour models are a formal means of describing colours using numerical values or colour components.

    There are different types of colour models for different types of applications.

    The RGB colour model is useful for computer graphics as it works in a similar manner to your eye.  It is based on the 3 primary colours.

    Red
    Green
    Blue

    These are mixed together to produce the desired colour.  This is known as an additive colour model. All the colours of the spectrum can be created by mixing red green and blue light together in different proportions . 

    When red green and blue are mixed together in equal amounts they produce white light.

    The CMYK model is used in the print industry and uses the colours cyan, magenta, yellow and black. 

    It is known as a subtractive colour model where some wavelengths of light are absorbed whilst some are reflected.

    200px-additivecolormixingAdditive

    cmyk_color_swatches

    Cyan, magenta, yellow & Key (Black)

    100px-subtractivecolormixing

    Subtractive

     

    RGB Channels & Bit Depth

    For computer display purposes a pixel can be regarded as having a red, green and blue channel.

    Each pixel is typically allocated 24 bits of memory split into 8 bits for each red, green and blue channel. This is known as the colour depth (or more commonly bit depth) of the image.  A 24 bit image (8 bits x 3 channels) will usually produce a good quality colour image.  This gives 256 possible values for each colour channel which, when mixed together, means that approximately 16.7 million possible colours variations could be displayed by a pixel.

    RGB channels R G B
    Red 255 0 0
    Green 0 255 0
    Blue 0 0 255
    Cyan 0 255 255
    Magenta 255 0 255
    Yellow 255 255 0
    Black 0 0 0
    White 255 255 255
    Mid grey 127 127 127

    Note that other bit depths are possible depending on the image quality and file sizes that you want to work with.  For example, images of 48 bit depth can be created for high end work where each channel is assigned 16 bits of memory. 

    200px-colourshadingColour wheel 
     

    Hue Saturation & Brightness

    The terms hue, saturation and brightness can be used to describe three basic characteristics of colour.

    Hue The name of the colour.  Can be precisely defined by its location as a angle on the standard colour wheel. 
    Saturation Refers to the intensity of a specific hue. It describes how pure the colour is.  For example if red is mixed with grey it is still red, but is less saturated.  Saturation increases moving from the centre of a standard colour wheel. 
    Brightness Is the relative perception of lightness or darkness of a colour.  In more technical terms it can be regarded as mean of the RGB colour coordinates in the RGB colour space.

    Also known as the HSV colour space it can be a useful alternative to the RGB and CMYK colour models as it describes colour using terms that are more familiar to humans.

     02hue

    Hue

     

    01saturation_rgb

    Saturation

    02brightness

    Brightness

    hsv_sample

    HSV colour model

     

    File formats

    The data for an image file can be stored in a large number of different formats. Compared with text digital images can create large files sizes and large amounts of computer memory can be needed to display, store or print an image. Many file formats a use different techniques to reduce the file size.  This is commonly known as compression. In addition to this each format has its own set of benefits and drawbacks which lend themselves to different applications.

    JPEG Pronounced Jay-Peg, it is an industry wide standard for compressing photographs. It is a “lossy compression” where different levels of compression can be applied with a trade off between size and image quality. Stands for Joint Photographic Experts Group 
    TIFF Tagged Image File Format. Commonly used in the print industry for raster graphics.  Is a lossless compression format.  Can handle multiple images and data within a file. 
    PNG Portable Network Graphics is a lossless format design to replace and improve upon the GIF format.  Becoming common on web pages. 
    PSD Adobe Photoshop file format.  Useful for keeping a master file, especially when using layers.
     
     

    Resolution

    Describes the level of detail within an image.  The higher the resolution the greater the image detail.  The greater the number of pixels that are used to create the image at the scanning or capture stage the better the quality, or resolution, of the image.  Note that file size also increases as resolution increases! Common ways to describe resolution include

    • Pixel rows times pixel columns i.e. 800 x 600
    • Pixel rows and columns multiplied together i.e. 1 Megapixel
    • Pixels per unit area i.e. pixels per inch or ppi

    Example

    Say a 1 inch square image is scanned at a resolution of 10 ppi.

    The image will be described using a 10 x 10 pixel grid giving 100 pixels in total.  When displayed at same size on screen each pixel will measure 1/10 of an inch.

    If the same image is scanned at 20 ppi we get a 20 x 20 grid of pixels where the image is made up of 400 pixels each measuring 1/20 of an inch.

    And so resolution (and image quality) can be increased by increasing the resolution. 

    Resolution at input is usually governed by the resolution of the output device such as a screen or printer.  Say, if the scan resolution exceeds the resolution required by the printer to produce its best quality output then the extra resolution is wasted.  

    A pixel has no fixed size, its size is dependent on the output size of the image.

    Once you have captured your image the number of pixels remains fixed.  For example, say you scan a 3X2 inch image at 100 ppi. This give you an image that measures 300 x 200 pixels.  If you were to increase the size of the image to 6 x 4 inches you will effectively reduce the resolution to 50 ppi This is because the same number of pixels are being used to display a larger version of the image, so they also have to get bigger. 

    As you increasingly reduce the resolution of an image (by increasing its size) the pixels will start to become visible and the image is said to be pixelated.

    For a hardcopy output printers transfer ink onto the paper as dots not squares like pixels.  This is defined as dots per inch dpi.  Many more dots are required to print an image than pixels to display it on a screen.  As a rough guide divide printer output resolution by 3 to get the optimum input resolution say for a scanner.

    res55

    res10101
    res2020
    res5050
    res1001001
     

    cb ver 0206


    Target dates

    Brand Identity – 5 Logos analysis – 29/10/08

    Typography – 5/11/08

    Colour – 12/11/08

    Layout – 19/11/08

    Initial Design ideas – paper prototypes- 3/12/08

    Graphic Design Exercise 1

    September 30, 2008


    Brand Elements and Identity

     

    The design elements of branding

     

     

    Visual

    How should it look and why? Key elements here are colour, typography, logo and packaging.  How do they appeal to the target market?

     

    Experiential

    How should clients feel when they use the service.  How could this be communicated in the design?

     

    Functional

    What benefits do the users get from the brand?  How could it be communicated in the design?  Explicitly or implicitly?

     

    Emotional

    How should the client feel about owning or being associated with the brand?

     

    Rational

    Should the brand appeal be more objective and logical?  How could this be communicated?

     

    Cultural

    Does a culture of buying this brand exist?  If so, who, where and why?

     

     

     

     

    Exercise

    Identify 5 brands/logos that you like and explain in terms of brand elements

     

    Reference

    Wikipedia

     

     

    Typography

     

    Thinking with type

     

    Word project, test your imagination – project guide

     

    Font demo leaflet exercise – project guide

     

     

     

    Colour

     

    Colour Theory

     

    Good introduction to the science of colour – Colour Vision and Art

     

    Colour palette exercise

     

    Produce a colour pallete for your design idea using Kuler or similar

     

    Layout

     

    Webstyle guide

     

    Expressive typographic poster exercise

     

     

    Visual presentation

     

    Mood Board PACT analysis, initial ideas etc..

     

    Design ideas board – exercise demonstrating ideas about logo/branding, typograpghy, colour and layout

     

     

     

     

     



    Student Portfolio

    Create an electronic portfolio for Media Space students to showcase their work.  Use DVD format as the main platform with additional web and mobile versions.

    MacBeth

    Create a DVD with mobile and web versions of a package to support learning and teaching.  Target audience 12 to 18 years studying relevant subjects at school.  Make use of current technology and culturally relevant.

    New Media Space promo

    Create a DVD with mobile and web versions to promote an independant spin-off of media space.   Emphasis on improved student experience with current software and hardware and stronger links with business.