My goal is to communicate with users by connecting the client's emerging brand to the information architecture. I use a collection of multimedia elements (color, line, sound, animation) to achieve it.
"Design is everything. Everything!"
— Paul Rand
As part of the visual design team, I work with the client's marketing and brand strategist to ensure the system, the content, and the visual representation is an integrated interactive branded experience. By identifying the features and functions that deliver differential value I brand the experience in various ways including content hierarchy, messaging, corporate color, image, icons, symbols, typography, and ease of use. I analyze the competitive research, conduct image research, and propose media delivery options.
Upon approval of the storyboards I define the visual theme and style, design a system of screen layouts, create the structural elements for each screen, create the control elements, integrate media elements, if any, create prototype screens, and develop the agreed-upon content.
Depending on the project, I initially present up to 3 distinct design treatments showing up to 2 levels of interaction. Upon review, I condense the feedback into 1-2 treatments again showing up to 2 levels of interaction. Ideally by the third review, when I present one final treatment with up to 3 levels of interaction, I have an approved direction and then proceed to develop the final design. The final design becomes the prototype’s GUI.
Throughout this phase, I conduct many usability testing to ensure I am on track with the creative brief and user requirements.
Visual Treatments. Single static images (often presented digitally as GIFs or JPEGs) which depict one approach to the visual design (including “look and feel,” color palette, typography, layout, etc.) of a page or page element.
Treatment Series. A series of Visual Treatments (per above) which typically depict a range of different approaches to the visual design of the same page or page element.
Hybrid Treatments. Single Visual Treatments which represents the best elements from a number of treatments in a prior Treatment Series, where those best elements have been combined to make one hybrid. Typically, the best elements are determined by the client as part of the client’s feedback to a Treatment Series.
Page Mock-ups. Preliminary depictions of a page layout, sometimes used to represent the layout of a given page and carrying very little visual detail.
Storyboards. Screen-by-screen illustrations showing functional and navigational elements on each page, as well as content areas.
Walkthroughs (also, “Clickable Mock-ups”). Navigable, clickable, onscreen systems of storyboards, often built in HTML or PDF; they show how one screen leads to another by allowing the user to click the links in a given screen mock-up in order to proceed to a different screen mock-up. Often created in collaboration with Information Architects and Design Developers.
Color Palette Explorations. Any depictions of various color combinations which might be applied to the visual design of a site. Typically represented as series of compatible color swatches, or as different treatments of the same page design which vary only in the color combinations applied to each treatment.
Typographic Explorations. Any depictions of various type families, weights, styles and sizes, and combinations thereof, which might be applied to the visual design of a site.
Page Design Templates. Master Visual Treatments (per above) which stipulate many of the visual design choices to be applied to other pages of the site.
Page Element Libraries. Collections of visual designs for all possible page elements (links, buttons, headers, subheads, callouts, etc.) depicted independently of any specific page on the site, and indicating all possible variations and uses of each page element.
Logo Designs and Identity Systems. Visual design explorations of a company’s mark, logo or logotype, as well as other visual design elements which create the company’s visual design personality or tone.
Web-optimized Image Slices. Component image pieces of a web page, typically saved as GIFs or JPEGs, which comprise the visual design of a page as viewed inside a browser window. To minimize download time, the file size of such image slices is made as small as possible (“optimized”) in such a way that the images still render well in a Web browser
Style guides. Documentation, visual design templates and code samples that enable future design teams to reproduce and maintain the current site design and remain consistent with the original.
Projects, I worked as part of the visual design team, are:
Surrey County Council Claimchoices.com
Resolve Family Mediation.
By HDP Riviera
Emma Wright's Studio
La Florette, Biot
The Esplanade, Weymouth
Ashtead Cancer Group
Caterham upon-Hill Parish
Sara Faulkner Design
Parametric Technology Corporation
Cabinet d’Expertise Immobilière