Learning Web Design (Mira's Notes)A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics— by Jennifer Niederst Robbins —
Chapter1Getting Started in Web Design
The web has existed for more than 25 years. This chapter provides an overview of the profession of web design. It begins with an introduction to the roles and responsibilities associated with creating websites. It will also review the equipment and software you will be likely to use.
Where Do I Start?
If you're interested in pursuing web design or production as a career, employers will expect to see working sample sites that demonstrate your skills and experience. It's important that they look professional and have well-written, clean HTML, style sheets, and scripts behind the scenes.
It Takes a Village (Website Creation Roles)
Sites often begin with a business plan or other defined mission. Before launch, the content must be created and organized, research performed, code written, design from the broadest goals to the finest details must happen, and everything must be coordinated with what's happening on the server.
The biggest sites are created by teams of dozens, hundreds, or thousands of contributors, but smaller sites can be easily made with a team of one.
This section introduces the various disciplines that can contribute to the creation of a site.
Content Wrangling
Everything a 'web designer' does supports the process of getting the content, message, or functionality to users. Two content-related specialists are the Information Architect (IA) and the Content Strategist.
Information architecture
Also called Information Designer, organizes content logically and for ease of findability. May be responsible for search functionality, site diagrams, and how the content and data are organized on the server. Often entwined with UX and UI design and content management.
Information Architecture: For the Web and Beyond, by Louis Rosenfeld and Peter Morville (O'Reilly).
Content strategy
Ensures that all the text in a site, from essays to buttons, supports the brand identity and marketing goals. May also extend to data modeling and content management on a large, ongoing scale, like planning for content reuse and update schedules. May also be responsible for voice representation in social media.
Content Strategy for the Web, 2nd Edition, by Kristina Halvorson and Melissa Rich (New Riders).
All Manner of Design
Though this lists specialties related to designing a site, bear in mind that the disciplines often overlap.
User Experience, Interaction, and User Interface design
In web design, the first priority is designing how the site works, before how it looks. This includes the site's goals, how it will be used, and and how visitors move through it. These tasks fall under the disciplines of User Experience (UX) design, Interaction design (IxD), and User Interface (UI) design, which do often have a lot of overlap with each other.
UX design takes a holistic view of the design process, ensuring the entire experience with the site is favorable. UX design is based on a solid understanding of users and their needs based on observations and interviews. Coined by Donald Normal, UX design includes "all aspects of the user's interaction with the product: how it is perceived, learned, and used." For websites, that includes the visual design, user interface, the quality and message of the content, and even overall site performance.
Interaction design makes the site as easy, efficient, and delightful to use as possible. UI design more narrowly focuses on the functional organization of webpages and the specific tools (buttons, links, menus, etc.) that users use to navigate content or accomplish tasks.
Role Deliverables
User research and testing reports
User-Centered Design (UCD) is the approach of designing around the user's needs, desires, and limitations. Site designs often begin with user research, including interviews and observations. It's typical for designers to do a round of user testing at each phase of the design process to ensure the design's usability and spot where users struggle to find content.
Wireframe diagrams
Example of a wireframe diagram.
Shows the structure of a webpage using only outlines for each content type and widget. Purpose is to visualize how the screen real estate is dvided and where functionality and content, like navigation, search boxes, form elements, etc. are placed. Colors, fonts, etc., are omitted. Usually annotated with instructions for how things should work.
Site diagram
Example of a site diagram.
Indicates the structure of the site as a whole and how individual pages related to each other.
Storyboards and user flow charts
Example of a storyboard.
Traces the path through a site or app from the POV of a user (persona in UX design). Usually includes a script and "Scenes" consisting of screen views or the user interacting with the screen. Aims to demonstrate the steps to accomplish tasks, olutline possible options, and introduces some standard page types. A user flow chart is another method to show how parts of a site or app are connected, but it focuses more on technical details rather than telling a story. Ex: when a user does this, it triggers that function on the server. User flow charts are good for steps in member registration or online payments.
Books on UX, Ix, and UI design
The Elements of User Experience: User-Centered Design for the Web and Beyond by Jesse James Garrett (New Riders)
Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability by Steve Krug (New Riders
The Design of Everyday Things by Don Norman (Basic Books)
About Face: The Essentials of Interacton Design, 4th Edition by Alan Cooper, Robert Reimann, David Cronin, and Christopher Noessel (Wiley)
Designing Interfaces, 2nd Edition by Jenifer Tidwell (O'Reilly)
100 Things Every Designer Needs to Know About People by Susan Weinschenk (New Riders)
Designing User Experience: A Guide to HCI, UX, and Interaction Design by David Benyon (Pearson)
Visual (graphic) design
Graphi designers create the 'look and feel' of a site, including logos, graphics, type, colors, layout, et cetera.
There are many methods and deliverables to present a visual design to clients. The most traditional are sketches or mockups of the way the site might look.
Example of a site homepage mockup.
Today, with Responsive Web Design focusing on flexible site layouts, designers prefer to discuss the visual identity (colors, fonts, image style, etc.) in a way not tied to one specific layout.
Style tiles is a technique introduced by Samantha Warren (see Note). They include examples of color schemes, branding elements, UI treatments, text treatment, and mood. Once finalized, it can be implemented into prototypes and the final site.
May also be responsible for producing a site's image assets. Will need to know how to optimize images for speed and to respond to varying sizes. The development team may often do this instead.
Note
Designer Dan Mall uses element collages, a collection of design elements that give a site its unique look and feel without being tied to screen layout. Read more: [Read more...]
May also be responsible for creating a style guide documenting style choices like font, color, et cetera to keep the style consiistent over time.
List of Examples, articles, books, podcasts: "web Style Guide Resources"
