Product Overview

Sexy Web Design

Index

A

A List Apart web site, (Tie-ins)

A Tennessee Winter web site, (Mood and Atmosphere)

Ableton Live web site, (Complex versus Minimal)

accessibility

about, (Usability and Accessibility)
screen readers and image replacement, (Replacement Technique: sIFR)

accordion menu, (Collapsible/Expandable)

additive color model, (Color Basics)

aesthetics, (Aesthetics), (Aesthetics)

(see also artistic layer; visual style)
convention versus innovation, (Convention versus Innovation), (Convention versus Innovation), (Our Use of Convention and Innovation)
design example, (Putting It All Together)
imagery, (Images), (Imagery)
layout and composition, (Layout and Composition), (A Small Introduction to Layout and Composition)
typography, (Typography), (Typography)

ALZselftest web site, (Photography)

An Event Apart web site, (Tie-ins)

analogous color scheme, (Color Basics)

Apple UK web site, (Breadcrumb Trails)

Apple web site, (Drop-down Menus)

artistic layer, (The Artistic Layer)

(see also visual style)
about, (The Artistic Layer)
color, (Color)
consistency, (Consistency)
contrast, (Contrast)
pattern and texture, (Pattern and Texture)
volume and depth effects, (Volume and Depth)

atmosphere (see aesthetics; visual style)

attractiveness, and look of web site, (How Your Site Looks)

audio-visual content

about, (Audio and Video)
using, (Audio-visual Content)

B

background images, exporting for design comps, (The Main Background)

balance: information versus atmosphere, (Achieving a Balance: Information and Atmosphere)

border treatments, imagery, (Image Treatments)

brand consistency

about, (Consistency)
research for, (Brand Consistency)

brand values associated with events, (First Steps)

breadcrumb trails, (Breadcrumb Trails)

briefs, (The Brief)

browsers, presenting mockups, (Presenting Mockups in the Browser)

Brunet-García’s web site, (Color)

build stage, relationship to design, (Aesthetics)

buttons

CSS sprites technique, (Navigation Images)
homepage, (The Problematic Homepage Button)
looks and texture, (Pattern and Texture)

C

calculator, golden ratio, (The Golden Ratio)

Cameron.io web site, (Global Navigation)

Coda web site, (Tabs), (Tool Tips)

collection tools, saving inspiring snippets, (Collection Tools)

color

aesthetics, (Color)
design example, (Color)
style guides, (Color)

complementary color scheme, (Color Basics)

composition (see layout and composition)

comps (see design comps)

consistency

aesthetics, (Consistency)
brand consistency, (Brand Consistency)
design example, (Consistency in Our Design)

content areas

transition between using tabs, (Tabs)
in web pages, (The Final Pages)

content, audio-visual, (Audio-visual Content)

contrast

aesthetics, (Contrast)
design example, (Contrast and Emphasis)

conventions

breaking the rules, (Inventive and Innovative)
versus innovation, (Convention versus Innovation), (Convention versus Innovation), (Our Use of Convention and Innovation)

CSS sprites technique, (Navigation Images)

D

Dara’s Garden web site, (Tone, Mood, and Atmosphere)

dConstruct web site, (What Matters the Most?)

Decor8 web site, (The Artistic Layer)

decorative type, (Decorative Type)

deliverables, (Deliverables)

about, (Deliverables)
design comps, (Design Comps), (Design Comps)
style guides, (Style Guides), (Style Guides)

Deluge Studios web site, (Global Navigation)

depth and volume effects, (Volume and Depth)

design briefs, (The Brief)

design comps, (Design Comps)

about, (Design Comps)
example, (The Final Comps)
export images, (Exporting Our Images)
layers, (Organizing Layers)
presenting in a browser, (Presenting Mockups in the Browser)

design process, (Design Process)

aesthetics, (Aesthetics), (Aesthetics)
deliverables, (Deliverables)
goals, (Web Design Goals)
interaction, (Interaction)
research stage, (Research), (Research)
structure, (Structure), (Structure)

Design Reviver web site, (Pagination)

designr.it web site, (Decorative Type)

Designsensory web site, (Drop-down Menus)

desirables, for project, (Project Desirables)

desktop behavior, (Desktop Behavior)

displaying sitemaps, (Finished Diagrams)

displays, designing for, (Layout and Composition)

divine proportion, (The Golden Ratio)

double complementary color scheme, (Color Basics)

drop-down menus, (Drop-down Menus)

Drupalcon DC 2009 web site, (Other Sites as Wireframe Sketches)

E

ecommerce, using, (Ecommerce)

elastic layouts, (Fixed, Fluid, or Elastic Layouts)

elements, wireframing, (Ways to Give Weight)

em units, (Fixed, Fluid, or Elastic Layouts)

embedded fonts, (Font Embedding)

Emblematiq web site, (Global Navigation)

Erratic Wisdom web site, (Navigation)

An Event Apart web site, (Tie-ins)

events

brand values associated with, (First Steps)
fun element of, (The Element of Fun)

Evernote application, (Collection Tools)

expanding and collapsing navigation style, (Collapsible/Expandable)

F

Fall For Tennessee web site, (How Your Site Looks)

feedback, interfaces, (Interfaces in the Real World)

fixed layouts, (Fixed or Flexible?)

Flickr web site, (Atmosphere Inspiration)

fluid layouts, (Fixed, Fluid, or Elastic Layouts)

the fold, browser mockups, (Presenting Mockups in the Browser)

fonts (see typography)

forms

about, (Forms)
interactions with, (Interfaces on the Web), (Forms)

frameworks (see grids)

fun element in events, (The Element of Fun)

functional mockups, presenting in a browser, (Functional Mockups)

functionality inspiration, (Functionality Inspiration)

Future of Web Applications (FOWA) Miami 2008 web site, (Achieving a Balance: Information and Atmosphere), (Other Sites as Wireframe Sketches)

G

Get Satisfaction web site, (Search)

GIFs, exporting PNGs as, (Heading Images)

global elements, list of, (Global Elements)

global navigation, (Global Navigation)

goals of web site design, (Web Design Goals)

golden ratio, (The Golden Ratio)

grids

design example, (Using the Grid)
layout, (The Grid)

groups, layers, (Organizing Layers)

guides feature in Photoshop, (Using Grids), (Using the Grid)

H

Happy Cog web site, (Navigation = List)
heading images, exporting for design comps, (Heading Images)
hit areas, (Functional Mockups)
homepage button, (The Problematic Homepage Button)
homepages, elements, (The Homepage)
horizontal scrolling, (Horizontal Scrolling)
HTML templates, presenting mockups in browser, (HTML Templates)

I

I Love Typography web site, (Decorative Type)

iconography, (Images), (Iconography)

illustration, (Illustration)

imagery, (Imagery)

about, (Images)
border treatments, (Image Treatments)
design example, (Imagery)
exporting in design comps, (Exporting Our Images)
iconography, (Iconography)
illustration, (Illustration)
photography, (Photography)
replacing text, (Replacement Technique: Images)
style guides, (Images)
versus logic in design goals, (What Your Site Does)

img HTML element, versus image replacement, (Replacement Technique: sIFR)

information architecture, (Information Architecture)

innovation

breaking the rules, (Inventive and Innovative)
versus conventions, (Convention versus Innovation), (Convention versus Innovation), (Our Use of Convention and Innovation)

inspiration resources, (Inspiration Resources)

atmosphere and mood, (Atmosphere Inspiration)
beyond the Web, (Look Outside the Web)
collecting snippets, (Collection Tools)
composition, (Composition Inspiration)
functionality, (Functionality Inspiration)

interaction, (Interaction)

(see also navigation)
audio and video, (Audio and Video)
desktop behavior, (Desktop Behavior)
forms, (Forms), (Forms)
on web sites, (Interfaces on the Web)

interfaces, (Interfaces are Sexy)

design process, (Design Process)
interactions on web sites, (Interfaces on the Web)
real world examples of, (Interfaces in the Real World)

J

Jason Santa Maria’s web site, (Typography)
Jesús Rodríguez Velasco’s web site, (Lists)
Johnny Hollow web site, (Mood and Atmosphere)
Joyent web site, (Illustration)

K

Kayak web site, (Convention versus Innovation)
Kuler web site, (Color Scheme Inspiration)

L

labeling wireframe sketches, (The Sketches)

layers, (The Artistic Layer)

(see also artistic layer)
design comp files, (Organizing Layers)
testing contrast with, (Contrast)

layout and composition, (A Small Introduction to Layout and Composition)

about, (Layout and Composition)
fixed versus flexible, (Fixed or Flexible?)
golden ratio, (The Golden Ratio)
grids, (The Grid)
horizontal scrolling, (Horizontal Scrolling)
inspiration for, (Composition Inspiration)
rule of thirds, (The Rule of Thirds)
style guides, (Layout)

liquid layouts, (Fixed, Fluid, or Elastic Layouts)

A List Apart web site, (Tie-ins)

lists

navigation and, (Navigation = List)
navigation style, (Lists)

LittleSnapper Mac application, (Collection Tools)

local navigation, (Local Navigation)

look of web sites (see aesthetics; visual style)

M

Maxvoltar web site, (Pattern and Texture)

Media Temple web site, (Search), (Drop-down Menus)

menus

collapsible/expandable, (Collapsible/Expandable)
navigation, (Drop-down Menus)

Messina, Chris, design patterns on Flickr, (Functionality Inspiration)

mockups (see design comps)

monochromatic color scheme, (Color Basics)

moo.fx web site, (Collapsible/Expandable)

mood (see aesthetics; visual style)

mood board, (Atmosphere Inspiration)

motifs, style guides, (Motifs and Techniques)

Movable Type web site, (Supporting Navigation)

N

960 Grid System framework, (Using Grids)

navigation, (Navigation)

about, (Navigation)
homepage button, (The Problematic Homepage Button)
lists, (Navigation = List)
styles, (Navigation Styles)
types of, (Navigation Types)

navigation images, exporting for design comps, (Navigation Images)

Ning web site, (Forms)

noise, patterns and texture, (Patterns and Texture)

notepads, (Structure)

Notes tool, (Notes)

notes, design comps, (Notes)

P

pages

content areas in, (The Final Pages)
in web site design, (The Homepage)

pagination, (Pagination)

paper prototyping, (Wireframing)

parallax effect, (Volume and Depth)

party pages, elements, (The Party Page)

pattern and texture

about, (Pattern and Texture)
design example, (Patterns and Texture)

Phark Revisited image replacement method, (Replacement Technique: Images)

photography

about, (Photography)
exporting for design comps, (Photos)

Photoshop

files for design comps, (Design Comps)
guides feature, (Using Grids), (Using the Grid)
layers, (Motifs and Techniques)

PNGs (Portable Network Graphic format), (Heading Images)

priorities of design elements, (What Matters the Most?)

prototyping, on paper, (Wireframing)

R

Raka Creative web site, (Iconography)

ratio, golden, (The Golden Ratio)

redesign, brand consistency, (Redesign)

registration and tickets pages, elements, (The Registration and Tickets Page)

requirements, technical, (Technical Requirements)

research, (Research)

about, (Research)
design briefs, (The Brief)
inspiration resources, (Inspiration Resources)
steps in research process, (First Steps)

Revyver web site, (Convention versus Innovation)

rollover menus, (Drop-down Menus)

rule of thirds and composition, (The Rule of Thirds)

S

schedule pages, elements, (The Schedule Page)

screen readers, image replacement, (Replacement Technique: sIFR)

search bars, navigation, (Search)

sexy, defined, (Foreword)

(see also aesthetics; visual style)

sIFR (scalable Inman Flash Replacement), (Replacement Technique: sIFR)

Silverback web site, (Volume and Depth)

SimpleBits web site, (Decorative Type)

sitemaps, (Sitemaps)

displaying, (Finished Diagrams)
initial sketches, (Initial Sketches)
versus navigation, (Sitemaps versus Navigation)

SitePoint web site, (Supporting Navigation)

sketches, labeling, (The Sketches)

Snagit application, (Collection Tools)

South by Southwest Interactive web site, (What Matters the Most?)

speakers pages, elements, (The Speakers Page)

split complementary color scheme, (Color Basics)

Squared Eye web site, (Illustration)

Stocks, Elliot Jay, (Foreword)

structure, (Structure), (Structure)

information architecture, (Information Architecture)
sitemaps, (Sitemaps)
visual style, (Tone, Mood, and Atmosphere)
wireframing, (Wireframing), (Wireframing)

style guides, (Style Guides)

about, (Style Guides)
color, (Color)
images, (Images)
layout, (Layout)
motifs and techniques, (Motifs and Techniques)
typography, (Type and Text)

styles, navigation, (Navigation Styles)

subtractive color model, (Color Basics)

supporting navigation, (Supporting Navigation)

Sursly web site, (Horizontal Scrolling)

swatches, color, (Color)

T

280 Slides web site, (Desktop Behavior)

13 Creative web site, (Global Navigation)

tabs navigation style, (Tabs)

tag clouds navigation style, (Tag Clouds)

TasteBook web site, (Navigation)

technical requirements, (Technical Requirements)

templates, presenting mockups in a browser, (HTML Templates)

A Tennessee Winter web site, (Mood and Atmosphere)

tetradic color scheme, (Color Basics)

texture and pattern

about, (Pattern and Texture)
design example, (Patterns and Texture)

thirds, rule of, (The Rule of Thirds)

Threadless web site, (Iconography)

tie-ins, brand consistency, (Tie-ins)

tone (see aesthetics; visual style)

tool tips, navigation style, (Tool Tips)

triadic color scheme, (Color Basics)

typography, (Typography)

about, (Typography)
choosing typefaces, (Choosing Typefaces)
decorative type, (Decorative Type)
design example, (Our Use of Type)
font embedding, (Font Embedding)
font sizes in tag clouds, (Tag Clouds)
replacement techniques, (Replacement Technique: Images)
style guides, (Type and Text)
web-safe fonts, (Type on the Web)

U

usability, (Usability and Accessibility)
users, as people, (Interfaces)

V

venue pages, elements, (The Venue Page)

video

about, (Audio and Video)
complex versus minimal, (Complex versus Minimal)
using, (Our Use of Video)

viewports

image size, (Photography)
size of, (Fixed or Flexible?)

Vimeo web site, (Audio and Video), (Complex versus Minimal)

visual style (tone, mood and atmosphere), (Mood and Atmosphere)

(see also aesthetics)
about, (Tone, Mood, and Atmosphere), (Mood and Atmosphere)
atmosphere inspiration and mood board, (Atmosphere Inspiration)
information versus atmosphere, (Achieving a Balance: Information and Atmosphere)
attractiveness, (How Your Site Looks)

volume and depth effects, (Volume and Depth)

Volunteer Lawn web site, (Layout and Composition)

W

Web 2.0 look, (Convention versus Innovation)

web design (see design process)

Web Designer Wall web site, (Advanced Borders)

Web Directions North web site, (Gravitas and Authority), (Local Navigation)

web sites

interactions on, (Interfaces on the Web)
as interfaces, (Interfaces are Sexy)

web-safe fonts, (Type on the Web)

windows, layouts for, (Fixed, Fluid, or Elastic Layouts)

wireframing, (Wireframing)

about, (Wireframing)
content area of pages, (The Final Pages)
elements, (Ways to Give Weight)
labeling sketches, (The Sketches)
practicing on web sites, (Other Sites as Wireframe Sketches)
template example, (The Basic Template)
using with grid, (Using the Grid)

WriteMaps application, (Finished Diagrams)

Y

YouTube web site, (Complex versus Minimal)

About SitePoint

SitePoint specializes in publishing fun, practical and easy-to-understand content for Web professionals. Visit sitepoint.com to access our books, newsletters, articles and community forums.

By Elliot Jay Stocks

Product Information

Features

Latest Update: March 2009

Entire contents of book in f u l l c o l o r throughout!
Smart new glossy cover design (6 color print)
Large 8"x10" format
Includes FREE SitePoint Color Card

Customer Reviews

Live, unmoderated reviews from our customers, typos and all.

Nice and clear approach of designing a website. Very useful links.
Loved the 'Destroy The Web 2.0 Look' link

Nikolaos Beligiannis, USA

I'm fortunate in the fact that I'm an artist, designer and programmer but I haven’t been able to organize these skills properly when working on my websites. Sexy Web Design helped me become more organized in my processes while still being able to utilize all three of my talents; actually more-so since I've read the book. I also loved all of the resources Elliot shares in his book and several of them will now be part of my daily "toolbox".This book is not for those wanting to learn how to program a website, slice PSDs, etc (there are some other good books here on Sitepoint that do help with those). Sexy Web Design is aimed at people looking not only to improve their design processes but also to improve on your knowledge in creating structure, mood, usability and more into your layouts. After reading Elliot's book I worked on a new website template for a client and the difference was major! Thanks to Elliot for helping me to bring sexy back!

Lachelle Talbot, USA

I ordered this book the day it was released by SP.

I trust everything that's released here, and this book is no exeption.

You don't need to go to art school (even though I did), as described in the title. This book teaches you basic to advanced principles you'll need in TODAY'S world. Pick up a copy, it goes great with "The Art and Science of CSS", also another good read.

Way to go sitepoint, keep up your sexyness, and I'll keep referring my contacts your way!

Mark Johnson, USA

Great book! Very informative and I feel like I've learned a lot. It's reaffirmed some of the things I just did, but didn't know why. The only thing that bothered me was the referenced pictures were always a page-flip away. Not a big deal, and certainly doesn't detract from the book! Great book SitePoint and Elliot.

Will Boling, USA

This book has been very useful to me. I come from a developer's perspective, so Elliot's book has guided me the way to build very sexy websites indeed. I constantly use it as a reference when designing, and it opened my eyes to the many different methods and practices that you use to create great design. My only complaint is I wish there was more! Great book, Elliot. :)

Jarryd Crawford, Australia

A really useful design book, with a refreshing take on design layout and good explanations on Grid layouts. The book has plenty of current good design examples and some useful url links to resources that any designer shouldn't be without. I've read the book from front to back, twice since it arrived 3 days ago.
A must have!