Media & Branding

Information architecture and design concepts, from diagrammatic representation to a graphical user interface, branding and advertising

Design Concept

A design concept is the graphic designer’s idea or solution to a client brief. Often a designer will produce more than one concept, so that the client can have a choice. There is some debate amongst designers as to how many concepts to show a client. Companies often want to see many options – especially with logos – whilst many creatives argue that clients should only be given two or three well thought through ideas. Design concepts are often presented as either printed presentations or electronic visuals. Sometimes these are presented to the client in person on boards, or on a laptop or display screen. For smaller jobs, concepts are often simply emailed to the client as a PDF or image files. Visual concepts are often backed up with written documentation. The latter is especially important with larger design projects and for website design. [1]

Look And Feel

Look-and-feel describes is the way that branding and communication messages are reflected the design of a website. ‘Look’ relates to the visual design aspects of a website: type-size, page layout, etc. ‘Feel’ relates to the experience of using a website. For example, when using a website does a person find it to be friendly, formal, helpful or confusing? There are similarities between website ‘feel’ and the field ergonomics. A positive feel is often due to there being a good fit between what a person is seeking to achieve, and how the website works. Within the science of human-computer interaction (HCI), feel is often discussed in terms of usability. Look-and-feel is affected by (the combination of):

• Information architecture
• Navigation
• Interface cues
• Tone (writing style)
• Layout
• Typography
• Colours
• Imagery

[3]

Layout

A layout is simply the designed and formatted pages of a document, with text and pictures in place. Page layout software tools include QuarkXpres, InDesign, Framemaker and Pagemaker. In word processing and desktop publishing, layout refers to the arrangement of text and graphics. The layout of a document can determine which points are emphasized, and whether the document is aesthetically pleasing. While no computer program can substitute for a professional layout artist, a powerful desktop publishing system can make it easier to lay out professional-looking documents. WYSIWYG helps layout considerably because it allows you to lay out a document on the display screen and see what it will look like when printed. In database management systems, layout refers to the way information is displayed. You can change the layout by selecting different fields. [1]

GUI – Graphical User Interface

A graphical user interface allows a user to interact with a computer without entering code. The combination of an input device (such as a mouse or stylus) and visual representations of the workspace and tasks, the user is able to interact with the computer in a manner similar to the physical manipulations available in the real world. For example, in a GUI, an electronic file is typically represented by a file icon. Data contained in the file can be moved to a new location by simply moving the file icon. Behind-the-scenes this physical interaction is translated into a series of commands, i.e.

1. Access the chosen file
2. Copy the data from the file
3. Navigate to a new location on the computer
4. Insert the file data in the new location
5. Delete the data from the old location

An interface enables a user to interact with a system to perform a task. For example:

• Website navigation (hyperlinks, search tools, etc.) enables a user to find content
• A shopping cart/basket system enables goods to be ordered
• The formatting palette in Microsoft Word enables a user to change text colour, size, font, etc.

An interface may combine a number of types of sensory cues:

• Visual/graphic: text (labels); shape, colour and size; spatial cues such as beveling and shadows to indicate ‘click-ability’; icons; change when moused-over; etc.
• Aural: speech, beeps, clicks, etc.
• Tactile (touch)

An effective interface combines the available, contextually-appropriate sensory cues to:

• Inform users of the task the interface can be used to complete
• Provide feedback (in response to interaction) to confirm task status (often referred to as closure).

[3]

Design Patterns

Due to the decentralised nature of the web, interface design has also been popularised. The need for a new and often less-technical audience to engage with interface issues has given rise to the alternative term ‘design pattern’. The Yahoo Developer Network defines a design pattern as ‘an optimal solution to a common problem within a specific context’. The above definition combines the companion dimensions of:

• Scenario: the situation in which an interface is to be used
• Use-case: (loosely) the task(s) the user will complete using the interface
• Path: how a task is broken down into meaningful stages and sequences
• Interface conventions: sensory cues and interaction models likely to be known by the user

IA – Information Architecture

Information architecture is not limited to websites, nor virtual information spaces. In the real world, the discipline is often referred to as ‘wayfinding’, and is concerned with the design of signage systems, paths and information environments. Information architecture describes the structure and methodology by which information (such as website content), is organised. Information architecture is typically formulated through consideration of user intention (primary tasks), and managing the relationship between the user and content or services (how tasks can be completed). A humanist perspective would place emphasis on catering soley to the user’s needs however, for commercial organisations, business needs are an additional consideration. For example, a business may want to promote messages or products that would not be actively sought-out by the user. [3]

Granularity

The process of editing content to improve granularity is often referred to as ‘chunking’. Granularity is a relative measurement of how general or specific a piece of information is. Website content tends to be highly-granular due to a combination of factors:

• Download speed Longer-length web content is typically broken into smaller sections (webpages) to reduce file size and consequently the time it takes for each page to download.
• Navigation The process of making information available via a website often involves creating micro-content summaries, e.g. news headlines, navigation labels, related links.
• Subject matter Websites are often constructed around specific topics or in response to frequently asked questions – this information is granular by nature.
• The difficulty of reading onscreen Users have less tolerance for reading onscreen than in print, due to screen resolution, lack of orientation cues, etc.
• Search engine ranking Search engine ranking logics (algorithms) favour webpages dedicated to a specific topic (i.e. webpages that contain a large number of topic-specific terms) above webpages containing information on a range of topics.

[3]

Schematic, Wireframe

Also referred to as a ‘wireframe’, a schematic is a diagrammatic representation of where navigation and content is located on a webpage. For example a homepage schematic may identify where contact details, news items, events promotions and core navigation will be placed). It can be used to test navigation, and information hierarchies. A limitation of a schematic is, that as an abstraction, it does not provide an accurate representation of how information is to be presented; a schematic does not seek to address the specific challenge of reading onscreen. For example, a column set to 20% of the screen-width is conceptually a suitable allocation for news items; however onscreen headline length, copy-editing and type selection (size/typeface) may result in an unusable design. [3] (Website design) a skeletal version of a website or product that represents navigational concepts and page content. The term is used in 2 broad ways:

• A static wireframe or page schematic is a single drawing of an individual page template that shows the information components, especially the navigation, that will appear on a page, in a rough form, so that navigation components can be documented and assessed. The drawing may suggest a basic visual layout, but doesn’t commit to any specific appearance.
• A dynamic wireframe is a set of cross-linked pages acting as a functional prototype of the final website without the graphical components and often with only sketchy text content (e.g. “Product description goes here.”). It is often accompanied by a tree diagram or flowchart of the website. The wireframe does not address visual design or page layout.

[10]

Consistency

The principle that things that are related should be presented in a similar way and things that are not related should be made distinctive. Consistency applies across quite varied contexts:

• Information should be presented in a consistent way: if bold is used to provide emphasis in one part of a document, italics shouldn’t be used in another part
• Input and output should be consistent, pressing an up button should go up, not down
• an application (website) should behave consistently in any context and on any platform (cross-platform compatibility)
• what one person sees should be consistent with what another person sees, so that they can effectively communicate about it
• an application (website) should behave consistently with the metaphor that it presents

[10]

Above-the-fold, Fold, Canvas

The portion of a webpage visible in the browser window when the page first loads is decribed as being ‘above-the-fold’. The phrase is a reference to the area of a newspaper visible when folded for display in a news stand, typically containing the masthead and lead story. A more appropriate (medium-appropriate) equivalent being “before-the-scroll”. The concept of a fold was seen as key in the early days of the web, based on the belief that only content placed in this area of the page – usually the first 300 vertical pixels – could be guaranteed “eyeballs”. Over time, users have become more accustomed to scrolling, however the first fold continues to be highly sought-after by advertisers. Minimum first-fold dimensions First-fold dimensions in pixels for popular browsers (up to version 6 IE and NN) accounting for maximum browser chrome and system menubars (for WIN and Mac), by monitor size and default screen resolution. As minimum values, content placed within this area of a webpage is guaranteed to be seen by a user browsing with their screen set to the listed resolution.

• Monitor Size
• 15″ monitor
• 17″ monitor
• 19″ monitor

• Typical Resolution (w × h)
• 640 × 480
• 800 × 600
• 1024 × 768

• Width (scrollbar)
• 584
• 744
• 968

• Width (no scrollbar)
• 599
• 759
• 983

• Height (first fold)
• 290
• 410
• 578

Key

• Monitor Size is a physical measurement: the length of a diagonal line drawn between the top-left and bottom-right corner of the screen
• Resolution is the number of horizontal and vertical pixels displayed on a screen
• Computer monitors have only one monitor size, but may be run at different resolutions
• The smaller the resolution, the larger the content of the screen appears; a user with visual impairment may choose to run a large monitor at a low resolution to make text easier to read
• Vertical and horizontal scrollbars are shown when a webpage extends beyond the boundaries of the browser window.

[3]

Skin

An element of a graphical user interface that can be changed to alter the look of the interface without affecting its functionality. Skins can give an interface an entirely different look than what it originally made as. Skins are often used to change the look and feel, altering the appearance and/or location of buttons, providing background images or borders, changing the colors and/or other graphic elements, etc. [2]

Stock Images

Stock photos/images are professional photographs of common places, landmarks, nature, events or people that are bought and sold on a royalty-free basis and can be used and reused for commercial design purposes. The photographer (or stock photography distributor) has ownership to the images, and the commercial designer has some limited usage of the photo (which is set out in the Terms of Service by the company you purchase the stock photos from). Some conditions of use may include things such as use of the images is licensed, not sold or in case of a stock photo being used in a magazine there may be a maximum number of copies of the image allowed to be printed under the agreement. Terms of Service policies will differ between stock photography distributors. Stock photography is a cost-effective method for designers to obtain professional photos and images without the costs of hiring a photographer directly. Stock photos and stock photography refer to the images purchased under this distribution method and may be photos, computer generated graphics, clip-art, vectors, and other form of imagery. Today stock photos can be purchased through a subscription and downloaded from a stock photography distributor’s Web site or purchased as a CD-ROM collection. [2]

Corporate Identity

Whilst having a link with branding, corporate identity generally applies more specifically to the visual perceived image of a corporation, rather than to an individual product. The intent of a strong corporate identity is to promote this cohesive visual image, both within the company – as a corporate culture – and externally to clients and rivals as a strong visual corporate identity. In practical terms, for designers, this involves the development of a logo (or group of logos) and a set of printed visual guidelines – usually in the form of a Corporate Identity Manual – as to how the organisation’s corporate identity is to be represented in publications, web sites and advertising campaigns. A Corporate Identity Manual would include samples of logotypes and layouts, instructions for their usage, color guides and color swatches. [1]

Logo

A distinctive, proprietary visual symbol used to identify a company or brand and express its unique attributes. OR A company or product identifier – for example, a representation of a company’s initials or a drawing that is the exclusive property of that company. In publishing usage, a virtual equivalent to the trademark.

Branding

Originally an advertising concept, branding is now an integral part of many graphic designer’s day-to-day exposure. A brand is a graphic, font, image or a series of concepts that defines a company’s, or product’s, identity. By establishing a strong and identifiable brand, a company or organisation is trying to convey to its consumers a sense of familiarity and trust of its products, over that of its competitors. [1]

Banner Ads

A banner ad is an image shown on a webpage for advertising purposes. Along with animation, contemporary ad banners often use simple forms of interaction as a lure, taking advantage of plug-ins such as Flash and Shockwave to create banner-based games. [3] A banner is a graphic image that is placed on websites as an advertisement. [6] Also referred to as a banner ad, a banner is a typically rectangular advertisement placed on a Web site either above, below or on the sides of the Web site’s main content and is linked to the advertiser’s own Web site. In the early days of the Internet, banners were ads with text and graphic images. Today, with technologies such as Flash, banners have gotten much more complex and can be ads with text, animated graphics and sound. Most commerce-related Web sites use banner ads. [2]

Letterhead

Business stationery and envelopes imprinted with the company’s (or, in such a case, the writer’s) name, address, and logo – a convenience as well as an impressive asset for a freelance writer.

Business Card

Business cards are cards bearing business information about a company or individual. They are shared during formal introductions as a convenience and a memory aid. A business card typically includes the giver’s name, company affiliation (usually with a logo) and contact information such as street addresses, telephone number(s), e-mail addresses and website. The exchange of business cards has become a common practice in social introductions. Some individuals carry personal business cards which contain only personal contact information and have no relation to their employer or business. Entrepreneurs and Small Office / Home Office (SOHO) professionals have become even more reliant on business cards. [5]

Folio

The folio is simply one page – one side of a half-folded sheet. In publishing terms, it also refers to the page number of a publication, as opposed to the actual position of the sheet in the document. [1]

Brochure And Flyer

Brochure is a piece of printed material used to describe a book, event, or other item. Customarily it has more than one page (sheet). Flyer is usually a single sheet or handbill designed to be handed out or picked up by consumers. [1]