The Web Designer’sRoadmap
Curious to see what we’ve got in store for you?
Good, because there’s plenty of meaty technique to get your teeth into along with lots of tips and tricks. Have a look through the table of contents to see what’s covered.
The Index
Symbols
- 960-grid system, Inspired By and Inspired To
A
- abduzeedo.com, Learning from Your Peers
- "above the fold", Emphasis of Content by Location
- accents (color), Brand Colors
- achromatic palettes, Brand Colors
- Adobe Swatch Exchange (.ase) files, Brand Colors
- aesthetics, Aesthetics: It's More than a Pretty Picture
- analytics, Users
- architectural patterns, Architectural Patterns
- Art Deco, Arts and Crafts
- art direction
-
- about, Art Direction
- concept-based, Illustration and Art
- content-based, Our Concept
- mood boards, Mood Boards
- reference material for, Reference Material
- Style Tiles, Style Tiles
- art movements
-
- Art Deco, Arts and Crafts
- Art Nouveau, Arts and Crafts
- Arts and Crafts movement, Arts and Crafts
- Cubism, Postmodernism
- Geometric Abstraction, Minimalism
- Minimalism, Modernism
- Modernism, Modernism
- Postmodernism, Postmodernism
- Art Nouveau, Arts and Crafts
- art tools
-
- Fireworks, Art Apps: Design that Biz
- GIMP, Art Apps: Design that Biz
- Photoshop, Spectrumagic, Art Apps: Design that Biz
- Sketch 2, Art Apps: Design that Biz
- Arts and Crafts movement, Arts and Crafts
- .ase (Adobe Swatch Exchange) files, Brand Colors
- aside element, The Subpage
- audience (see users)
B
- Balsamiq, How do we make all these wireframes?
- Barry, Jay, 4. Decide how the breakpoints will affect each area
- Bauhaus, Modernism
- beauty
-
- defined, What is beauty?
- design process, A Refined Sense of Beauty
- of mathematics, The Elegance of Science
- perceived, Perceived Beauty
- prettiness vs., A Refined Sense of Beauty
- relevance of, A Refined Sense of Beauty
- subjective nature of, The Eye of the Beholder
- Bootstrap, Conceptual Patterns
- brainstorming, Clustering
- brand colors, Mood Boards
- breakpoints, 3. Identify the areas that will be affected by breakpoints, 4. Decide how the breakpoints will affect each area
- browser dev tools, Dev Tools
- browser limitations, Progressive Enhancement
- BrowserStack, Dev Tools
- Burka, Daniel, Spectrumagic, Content
- buttons, vs. links, Conceptual Patterns
C
- cascading lists, Types of Design Patterns
- chair arrangements, The Critic Room
- Chrome Developer Tools, Dev Tools
- circular images, Mistaking Trends and Fashion for Design Patterns
- "clean" design, Minimalism
- client presentations
-
- games, Check Your Files: Dredging Up the Past
- mood boards, Mood Boards
- page mockups, Special Pages
- past projects, Check Your Files: Dredging Up the Past
- posters, Check Your Files: Dredging Up the Past
- storyboards, Storyboards
- clients
-
- communicating with (see client presentations)
- as inspiration, Inspired By and Inspired To
- limiting, Dynamic Content (Should that box really hold 500 words?), Dynamic Content (Should that box really hold 500 words?)
- Need to Know List, Ask Questions
- questionnaires for, Questionnaires
- clustering, Clustering
- CMS (content management system), Dynamic Content (Should that box really hold 500 words?)
- Codex Seraphinianus, Drawing a blank? Let's Look at Dribbble
- cognitive ergonomics, Interaction Design
- collages, Mood Boards
- color accents, Brand Colors
- color palettes
-
- achromatic, Brand Colors
- brand colors, Mood Boards
- COLOURlovers, COLOURlovers
- Kuler, Kuler
- mood boards, Mood Boards
- color triads, Brand Colors
- color wheel, Special Pages
- ColorZilla, CSS Tools: Whizbangery
- COLOURlovers, COLOURlovers
- column grids, Layout Patterns
- comfort zone, Inspired By and Inspired To
- Comic Sans, Wireframing for Content Hierarchy
- communication, with client (see client presentations)
- competitors, as resource, Research: What's the competition doing?
- conceptual design
-
- about, Conceptual Design: Just a Little Black Magic, Idea-driven Design
- guidelines for, Practical Implementation of an Idea
- illustrating ideas, Illustration and Art
- selecting styles, Design Elements and Style
- visualizing ideas, Creative Association
- conceptual patterns, Conceptual Patterns
- content
-
- designing without, Content
- dynamic, Dynamic Content (Should that box really hold 500 words?)
- grouping, Emphasis by Proximity to Other Elements
- hiding, Types of Design Patterns, 3. Identify the areas that will be affected by breakpoints
- limiting, Dynamic Content (Should that box really hold 500 words?), Dynamic Content (Should that box really hold 500 words?)
- location, Layout Patterns
- size, Architectural Patterns
- syndicated, The Subpage
- content hierarchy, Wireframes
- content management system (CMS), Dynamic Content (Should that box really hold 500 words?)
- content wireframes, How do we make all these wireframes?
- Converge SE
-
- about, Idea-driven Design
- art direction, Illustration and Art
- branding, Creative Association
- design elements, Design Elements and Style
- mascot, Illustration and Art
- conversion (of ideas), Step 4: Conversion
- Crazy Egg, Users
- creative process
-
- about, Creativity: Don't Think about Pink Elephants, The Critic Room
- brainstorming, Clustering
- conversion, Step 4: Conversion
- defining the problem, Adding Structure to the Creative Process
- Disney Method, The Critic Room
- evaluation, Step 3: Evaluation
- ideation, Step 2: Ideation
- specifying goals, Step 3: Evaluation
- structure and, Creativity: Don't Think about Pink Elephants, Adding Structure to the Creative Process
- structure "and, Creativity: Don't Think about Pink Elephants
- creativity
-
- about, Drawing a blank? Let's Look at Dribbble, Step 4: Conversion
- chair arrangements, The Critic Room
- comfort zone, Inspired By and Inspired To
- design patterns vs., Am I ripping people off?
- first ideas, Face It, Your First Idea Is Usually the Worst
- style and, Standing on the Shoulders of Giants
- creattica.com, Learning from Your Peers
- critic room, The Critic Room
- critical analysis (see evaluation)
- cross-platform design (see form factors, supporting)
- CSS limitations, CSS Tools: Whizbangery
- CSS Preprocessors, CSS Tools: Whizbangery
- CSS tools, CSS Tools: Whizbangery
- The CSS3 Anthology, Progressive Enhancement
- CSS3 Generator, CSS Tools: Whizbangery
- CSS3Please, CSS Tools: Whizbangery
- cssmania.com, Learning from Your Peers
- Cubism, Postmodernism
D
- da Vinci, Leonardo, What is beauty?
- De Stijl, Modernism
- deadlines, Production Schedules
- derivative design, Derivative Design: Copy cats or like minds?
- design
-
- "clean", Minimalism
- conceptual (see conceptual design)
- cross-platform (see form factors, supporting)
- derivative, Derivative Design: Copy cats or like minds?
- interaction (see interaction design)
- print, Newspapers: How do you surf the Web on those?, Information Hierarchy
- research in, The Parable of Cynthia
- user experience, User Experience Design
- wireframes vs., Wireframing for Content Hierarchy
- design galleries, Drawing a blank? Let's Look at Dribbble, Learning from Your Peers
- design history (see art movements)
- design journals, The Parable of Cynthia
- design pattern libraries, Great, but where's the list of design patterns?
- design patterns
-
- architectural, Architectural Patterns
- benefits of, Design Patterns: Tried and Trusted Solutions
- borrowing/sharing, Am I ripping people off?
- cascading list, Types of Design Patterns
- conceptual, Conceptual Patterns
- drop-down menus, Types of Design Patterns
- engineering, Design Patterns: Tried and Trusted Solutions
- faceted navigation, Mistaking Trends and Fashion for Design Patterns
- information hiding, Types of Design Patterns
- interaction, Conceptual Patterns
- layout, Layout Patterns
- Model–View–Controller (MVC), Design Patterns: Tried and Trusted Solutions
- style vs., Mistaking Trends and Fashion for Design Patterns
- user interface, Great, but where's the list of design patterns?
- visual, Visual Patterns
- for web design, How does this relate to web design?
- design process
-
- beauty and, A Refined Sense of Beauty
- importance of, Why not go straight to Photoshop?
- intuitive nature of, Intuitive Design
- steps in, Conceptual Design and Our Color Project
- design structure, Structure and Form
- design trends, Mistaking Trends and Fashion for Design Patterns
- details (drawings), Thumbnails
- development tools, Dev Tools
- device-agnostic, Getting What You Need: Grab Your Compass and Bowie Knife …
- Disney Method, The Critic Room
- dreaming room, The Dreaming Room
- dribbble.com, Learning from Your Peers
- drop-down menus, Types of Design Patterns
E
- educational sites, Research: What's the competition doing?
- Einstein, Albert, The Elegance of Science
- elegance, The Elegance of Science
- emotion
-
- mood boards, Mood Boards
- power of, Visual Patterns
- ergonomics, Interaction Design
- evaluation (of ideas), Step 3: Evaluation
F
- faceted navigation, Mistaking Trends and Fashion for Design Patterns
- filing systems, Check Your Files: Dredging Up the Past
- Firebug, Dev Tools
- Fireworks, Art Apps: Design that Biz
- first impressions, Perceived Beauty
- Fisher, Meagan, Intuitive Design
- Flight (game), Check Your Files: Dredging Up the Past
- float property, 1. Start with the desktop wireframe
- fluid layouts, 2. Identify the main site areas
- "the fold", Emphasis of Content by Location
- font limitations, Fonts: A Love-Hate Relationship
- footers, Layout Patterns
- form factors, supporting
-
- about, Inspired By and Inspired To
- design issues, Designing for Multiple Form Factors
- mobile sites, Cons
- responsive design, Wireframes
G
- galleries, design, Drawing a blank? Let's Look at Dribbble, Learning from Your Peers
- games, as demo, Check Your Files: Dredging Up the Past
- Gang of Four (GoF), Design Patterns: Tried and Trusted Solutions
- Geometric Abstraction, Minimalism
- GIMP (GNU Image Manipulation Program), Art Apps: Design that Biz
- gingerwhale.com, Drawing a blank? Let's Look at Dribbble
- goals, specifying, Step 3: Evaluation
- golden ratio, What is beauty?
- Google, Google It
- Google Analytics, Users
- grayboxing, Grayboxing, When is grayboxing useful?
- Greene, Brian, The Elegance of Science
- grisaille method, Grayboxing
- grouping (of content), Emphasis by Proximity to Other Elements
H
- Hassenzahl, Marc, Perceived Beauty
- Hawking, Stephen, The Elegance of Science
- HCI (human–computer interaction), Interaction Design
- headers, Layout Patterns
- hero unit, 4. Decide how the breakpoints will affect each area
- hiding, Types of Design Patterns, 3. Identify the areas that will be affected by breakpoints
- home page
-
- mockup, The Home Page
- template, The Home Page
- wireframe, How do we make all these wireframes?
- horizontal navigation, Am I ripping people off?
- human–computer interaction (HCI), Interaction Design
I
- ideation, Step 2: Ideation
- image tools (see art tools)
- information hiding, Types of Design Patterns
- information hierarchy, Wireframes
- Inman, Shaun, Thumbnails and Detail Sketches
- inspiration
-
- about, Inspired By and Inspired To
- avoiding routine, Inspired By and Inspired To, Developing Good Habits
- clients as, Inspired By and Inspired To
- design galleries, Drawing a blank? Let's Look at Dribbble, Learning from Your Peers
- other industries, Learning from Other Industries
- subjective nature of, Keeping an Open Mind
- technology as, Inspired By and Inspired To
- interaction design
-
- about, Interaction Design
- guidelines for, Designing for Interaction
- links vs. buttons, Conceptual Patterns
- multiple states, The New Kids, Art Apps: Design that Biz
- patterns, Conceptual Patterns
- storyboards, Storyboards
- wireframing, Wireframing for Functionality and Interaction
J
- journals, peer-reviewed, The Parable of Cynthia
K
- Khan Academy, Research: What's the competition doing?
- Kuler, Kuler
L
- layout patterns, Layout Patterns
- layouts
-
- designing (see wireframes)
- fluid, 2. Identify the main site areas
- page, Wireframing for Page Layout
- static-width, Cons
- LESS, CSS Tools: Whizbangery
- letterpress type, Breaking the Cycle
- limitations
-
- assumptions, Users
- browser, Progressive Enhancement
- CSS, CSS Tools: Whizbangery
- dynamic content, Dynamic Content (Should that box really hold 500 words?), Dynamic Content (Should that box really hold 500 words?)
- font, Fonts: A Love-Hate Relationship
- money, The Reality of Money: The Root of All Compromise
- of templates, The Problem with Templates and Why You'll Still Use Them
- links, Conceptual Patterns
- location (of content), Layout Patterns
M
- Marcotte, Ethan, Responsive Design
- master pages, Art Apps: Design that Biz
- mathematics, The Elegance of Science
- media queries, 4. Decide how the breakpoints will affect each area
- Minimalism, Modernism
- mobile sites
-
- about, Cons
- hiding elements, 3. Identify the areas that will be affected by breakpoints
- navigation, 4. Decide how the breakpoints will affect each area
- stacking content, Wireframes
- wireframing, 4. Decide how the breakpoints will affect each area
- mockups
-
- home page, The Home Page
- special pages, Special Pages
- subpages, The Subpage
- modal window, Types of Design Patterns
- Model–View–Controller (MVC) pattern, Design Patterns: Tried and Trusted Solutions
- Modernism, Modernism
- mood boards, Mood Boards
- music, The Eye of the Beholder
- MVC (Model–View–Controller) pattern, Design Patterns: Tried and Trusted Solutions
N
- navigation
-
- drop-down menus, Types of Design Patterns
- faceted, Mistaking Trends and Fashion for Design Patterns
- in footers, Layout Patterns
- horizontal, Am I ripping people off?
- link types, Architectural Patterns
- mobile sites, 4. Decide how the breakpoints will affect each area
- sitemap, Content
- navigation links, Architectural Patterns
- Need to Know List, Getting What You Need: Grab Your Compass and Bowie Knife … , Content
- Newman, Barnett, Minimalism
- newspapers, Column Grids
- Norman, Donald, Visual Patterns
O
- organization, Check Your Files: Dredging Up the Past
P
- page layout, Wireframing for Page Layout
- palettes (see color palettes)
- Parmenter, Sarah, Communicating with Clients
- Pattern Tap, Mistaking Trends and Fashion for Design Patterns
- Pencil Project, Wireframing Tools
- perceived beauty, Perceived Beauty
- perceived usability, Perceived Beauty
- perception, role of, Perceived Beauty
- Photoshop, Spectrumagic, Art Apps: Design that Biz
- Photoshop CS6 Unlocked, Art Apps: Design that Biz
- Picasso, Pablo, Drawing a blank? Let's Look at Dribbble, Postmodernism
- posters, Check Your Files: Dredging Up the Past
- Postmodernism, Postmodernism
- preprocessors (CSS), CSS Tools: Whizbangery
- prettiness, vs. beauty, A Refined Sense of Beauty
- print design, Newspapers: How do you surf the Web on those?, Information Hierarchy
- production schedules, Production Schedules
- progressive enhancement, Progressive Enhancement
- proportion, What is beauty?
- proximity (of content), Emphasis by Proximity to Other Elements
- punch list, Getting What You Need: Grab Your Compass and Bowie Knife …
- Pythagoras, What is beauty?
Q
- questionnaires, client, Questionnaires
R
- Rand, Paul, Modernism
- range finders, Conceptual Patterns
- realist room, The Realist Room
- reference material, Reference Material
- resolution-agnostic, Getting What You Need: Grab Your Compass and Bowie Knife …
- resources
-
- color palettes (see color palettes)
- competitors as, Research: What's the competition doing?
- design galleries, Drawing a blank? Let's Look at Dribbble, Learning from Your Peers
- friends/colleagues, Step 4: Conversion
- Google, Google It
- organizing, Check Your Files: Dredging Up the Past
- other industries, Learning from Other Industries
- past projects, Check Your Files: Dredging Up the Past
- storyboards, Storyboards
- responsive design
-
- about, Pros
- breakpoints, 3. Identify the areas that will be affected by breakpoints, 3. Identify the areas that will be affected by breakpoints
- origins of, Inspired By and Inspired To
- removing redundancy, Wireframes
- storyboarding, Storyboards
- Ross, Bob, Postmodernism
- Rubin, Dan, Don't Sweat the Small Stuff, Art Direction
- Rupert, Dave, Am I ripping people off?
S
- Sass, CSS Tools: Whizbangery
- Serafini, Luigi, Drawing a blank? Let's Look at Dribbble
- sidebars, The Subpage
- site analytics, Users
- site navigation (see navigation)
- sitemap, Content
- size (of content), Architectural Patterns
- Sketch 2, Art Apps: Design that Biz
- sketching, Thumbnails, You Won't Get Emotional
- sliders, Conceptual Patterns
- Smith, Tony, Minimalism
- software ergonomics, Interaction Design
- Spectrumagic
-
- art direction, Our Concept
- color palette, Brand Colors
- content specs, Content
- content-area wireframes, How do we make all these wireframes?
- home page wireframe, How do we make all these wireframes?
- logo, Spectrumagic
- Need to Know List, Getting What You Need: Grab Your Compass and Bowie Knife …
- outline, Spectrumagic: Our Design Project
- similar sites, Research: What's the competition doing?
- sitemap, Content
- Style Tile, Style Tiles
- wireframe overview, Wireframes
- states, designing, The New Kids, Art Apps: Design that Biz
- static-width layouts, Cons
- storyboards, Storyboards
- Strange Menagerie, Illustration and Art
- string theory, The Elegance of Science
- structure (of design), Structure and Form
- style, Am I ripping people off?
- Style Tiles, Designing for Interaction
- subpages, The Subpage
- syndicated content, The Subpage
T
- templates
-
- home page, The Home Page
- limitations of, The Problem with Templates and Why You'll Still Use Them
- subpages, The Specialized Subpage
- thumbnails, Thumbnails, Thumbnails and Detail Sketches
- touchscreens, Interaction Patterns
- tree structure, Architectural Patterns
- Treehouse, Research: What's the competition doing?
- trees, happy, Postmodernism
- trends, design, Mistaking Trends and Fashion for Design Patterns
- Twitter Bootstrap, Conceptual Patterns
- typeverything.com, Learning from Your Peers
- typography, Fonts: A Love-Hate Relationship
U
- UI Design Patterns (website), Great, but where's the list of design patterns?
- unmatchedstyle.com, Drawing a blank? Let's Look at Dribbble, Learning from Your Peers
- usability, User Experience Design
- user expectations, Perceived Beauty
- user experience (UX) design, User Experience Design
- user interface patterns, Great, but where's the list of design patterns?
- users
-
- assumptions about, Users
- connecting with, Drawing a blank? Let's Look at Dribbble, Arts and Crafts
V
- visual patterns, Visual Patterns
- visualization (of ideas), Creative Association
- Vitruvian Man, What is beauty?
- Voltaire, Aesthetics: It's More than a Pretty Picture
W
- Warren, Samantha, Style Tiles
- web apps, Pros
- wireframes
-
- about, Wireframes
- approaches to, Intuitive Design
- content-area, How do we make all these wireframes?
- design vs., Wireframing for Content Hierarchy
- detail level, How detailed should I make my wireframe?
- elements of, How detailed should I make my wireframe?
- grouping of content, Emphasis by Proximity to Other Elements
- home page, How do we make all these wireframes?
- for interaction, Wireframing for Functionality and Interaction
- location of content, Emphasis of Content by Location
- for mobile sites, 4. Decide how the breakpoints will affect each area
- for page layout, Wireframing for Page Layout
- size of content, Emphasis by Size
- Spectrumagic, Wireframes
- subpages, The Specialized Subpage
- tools for, How do we make all these wireframes?
- word association, Word Association
Y
- Yahoo Design Patterns Library, Great, but where's the list of design patterns?
More Information
WHAT’S INSIDE
Example Project: Work through wireframes, mockups, and final designs for the Spectrumagic project. 
Design Questionnaire: A punch list of questions to ask your clients before beginning a design project. 
Secrets from the Pros: Daniel Burka, Donald Norman, Jessica Hische, and a host of experts share their design insights.
Author Notes
The Web Designer’s Roadmap is a book designed to explore the relationship between the creative process and the production pipeline for websites … I show that creativity is a process that can be learned and explored, that technology should be employed in the service of the content, not the other way around. (As designers) … we are the architects of a future that can be amazingly beautiful.…
Giovanni Difeterici
Author
unmatched.com