Design Process December 13, 2009
Posted by kd49 in : Class 14 - Design Process, Classes , comments closedDesign of bike rack for New York City: competition website, samples of winning entries
DESIGN PROCESS
The process of design is critical to successful results.
Most design studios follow in some form the following steps. Research can take a few formats depending on the scale of the project and the preferences of the client:
Discovery: the phase where the designers gather information about the project including the key questions:
- Who is the audience for the product?
- How will it be delivered?
- What is the content and in what format? How often will it be updated?
- Why is the product being created: if there are business objectives, what are they?
- How will the site or product be maintained or updated?
- Review competitive projects
- Interview key stake holders
- Research – seek inspiration
- Understand any creative or technical preferences
- Identify any document functional requirements
Site architecture
- Develop a site architecture that identifies the key pages on the site and their relative hierarchy: example
- Develop wire frame diagrams of the key pages:
- example for a website
- in animation or film this translates to storyboards
- Gain approval before starting design
Schematic Design: the translation of ideas and assumptions to visual form in an effort to further refine the objectives:
- Best to explore a range of options that have distinct differences:
- Seek reaction and feedback
- Redesign : design is an iterative process
- Define functional behaviors
- For print select a paper and solicit bids
Design Development
- Refine the design and apply it to all page templates
- Establish the language for all visual elements and behaviors such as buttons and icons
- Test with users
- Research photography, if appropriate
Production and Technology
- Acquire approval before starting code or sending to the printer
- Develop CSS rules
- Create style guide: sample for logo, sample for web
- Test the code
- Launch the site
- For print, check the printers proofs and approve: set of business papers
For product design, print design and even architecture the specifics can vary slightly but the key phases are the same: video
Recap of design process: video
- Discovery
- Schematic design
- Design development and testing
- Production and technology
- Testing and launch
Design Resources:
- Web statistics
- Latin text
- Font sources: Adobe, Emigre
- Photo sources: Getty Images, Corbis, Veer
- Patterns
- and more patterns
- Ad units
- Envelope standards
___Sample of trackback to jane bryant quinn: http://janebryantquinn.adhostclient.com/____
ASSIGNMENT
Continue to refine your portfolio site based on the feedback in class.
Interaction Design December 4, 2009
Posted by kd49 in : Classes, Interaction Design , comments closed An interesting look at billboardsReview of website design project
Interaction Design
We are surrounded by interactive design from alarm clocks, to street signs, to ATMs and voicemail. Voicemail is a particularly egregious examples of bad interaction design. Why do we have to listen to instructions on how to leave a message every time we make a phone call? Why do we have to learn how to fasten a seat belt every time we get on airplane?
Good interaction or interface design should be intuitive and not require instruction. Think NY taxis: consistent, intuitive and logical. [Interface deesign ppt]
Good examples of Interaction design:
- The walk signs in Mexico
- Parking meters (good model for video and audio files that time left is a more valuable metric than time spent watching (which requires thinking)
Bad examples
Principles of Good design
- Consistency Consistency Consistency in placement, behavior, color and labeling.
- NYC Taxis
- Be intuitive for the user
- Set standards and stick to them: keep search and other buttons in the same location on every screen
- As in information graphics, avoid visual clutter
- Yahoo establishes icons on the HP and then they disappear. Why use icons?
- Word your messages and labels effectively. Tell it like it is. A link to Job listing should say JOBS, not EMPLOYMENT OPPORTUNITIES or CAREER
- Provide indicators of where you are: You are here! Let users know where they are and where they need to go.
- Size, color and placement will suggest a hierarchy. Users don’t read, they scan
- Items that are logically connected should be grouped together: things to buy, things to read, things to play with
- Follow standards for search, checkout, home button, red = stop, green = go.
- Keep it simple mapquest vs google maps
- Allow for error recovery, assume users will make mistakes. Have error message align with the errors. back is the most frequently used navigation button.
Some interesting interfaces:
- zoomi.com
- real memories
- Johnson Bank
- Click bored
- mult-touch interface design (video)
- bumptop desktop (video)
- Save the Words
- Tour of Rio
- Tufte’s analyis of the iphone
______
ASSIGNMENT
Finalize your portfolio website design