Please note: For the best reading experience, consider using the PDF version of this eBook. The ePub and Kindle formats provide limited control over graphics and typography, and thus are not ideal for a design book. I've made every effort to ensure the ePub and Kindle versions are readable, but for better viewing of the graphics and illustrations, consult the PDF. Thanks for reading!

A Note About DRM

Thank you sincerely for reading Bootstrapping Design!

You'll notice this ebook comes without any digital rights management (DRM) whatsoever. Your name isn't stamped at the bottom of the PDF, and you can read the ebook on any device. My hope is that excluding DRM from this ebook will enhance your reading experience.

I'm just one guy writing from his home office, not an evil big-business publisher. When you pay for the ebook, it helps me pay my bills.

If a friend or colleague asks for a copy of this ebook, please suggest they go purchase one.

If you've somehow gotten your hands on a copy of this ebook without purchasing it, I understand. It happens. But please, head over to the website and buy a legit copy.

Your purchase supports continued revision of this ebook and will allow me to continue creating more things like it. Thanks for being part of Bootstrapping Design!

Chapter 1

Introduction

We are bootstrappers: developers, scientists, hackers, founders, marketers, writers, designers, and thinkers who are building the new breed of online businesses.

We are starting businesses—not pandering for design awards. We're building lean and profitable startups rather than the next Facebook.

If you aren't a bootstrapper, this book isn't for you. There are many design books that teach how to become a full-time-job designer and many that teach formal design theory and advanced techniques for readers with years of experience.

This book contains the minimum design fundamentals that bootstrappers must understand in order to launch a business. My intent is to emphasize design basics rather than to reduce the whole of design to a bag of tricks. You'll notice peripheral topics such as kerning, color wheels, and art history are absent. This is not because such topics are unimportant but because they are neither suitable for beginners nor relevant to their bottom line.

I'm writing this book because design truly affects the success of businesses. I believe in bootstrappers and the businesses they are building, and I know design can help them succeed. I believe great design is for everyone—not just the few fortunate enough to have big budgets.

Attracting More Users

"Getting more users" is the wrong way to think about business. Before you do anything else, including read this book, you should know who your users are, where they are, and how you can reach them. Great business comes from understanding people—we have all seen that truth firsthand.

Design cannot fix a flawed business strategy. My first web app was beautiful by all accounts, but it failed. It failed because I did not understand business nor the customers I wanted to reach. Do yourself a favor: before you start up, learn. Read about business and research your customers. However, be careful who you listen to because there is much bad advice in the startup scene. The only reliable sources of business advice I have found are Amy Hoy's 30x500 class and Ash Maurya's book, Running Lean.

Design Affects Business

Once you understand potential customers, you can use design to engage them. How? Design strengthens communication. Design exists to support content and deliver ideas with greater effect, clarity, and insight.

If potential customers do not understand what you are offering, they will not buy your product. So not only do you need to be a good writer; you need to learn to present your message clearly.

However, your goals do not end with making a sale; designers aim to create a painless and, hopefully, even enjoyable experience. Forming an emotional connection with customers cements your brand in their minds.

Research reveals that visual beauty supports business goals. Aesthetics build trust in mere milliseconds, affect purchasing decisions, and even affect perceived value and usability.

(Read about the research at A List Apart here and here, and at UX Myths.)

Design It Yourself

You wouldn't be reading this book if you didn't already see the value of great design. The real question is: why should you be the designer for your business? There are many other ways to fulfill your design needs: themes, templates, frameworks, crowdsourcing, and (obviously) hiring professional designers.

Hiring a designer is expensive, and when bootstrapping you have to question whether a new, undeveloped idea warrants such a substantial investment. Many of us couldn't afford to pay a designer $100 per hour even if we wanted to. However, validating the idea before you sink too much money into a project is wise, regardless of whether you can afford it.

Themes, templates, and crowdsourced design never fit the project. They are generic and inflexible. They are created without any understanding of the problem they propose to solve. These methods reveal the difference between design and decoration; you will accomplish more by tailoring a message than you will by slapping any pretty logo on a page.

Frameworks like Twitter Bootstrap and Foundation can provide a great starting point for a new project, but still require some design acumen to be fully realized. No framework can do all the work for you.

So instead of any of these, learn to design it yourself. You are absolutely capable of producing beautiful design that supports your business. Keep in mind that later, as your successful business brings in profits, you can even hire a professional designer if you'd like.

But for now, designing it yourself is the best course of action. Be honest—it's the option you fear most. But rather than fearing the edge of the precipice, we're just going to jump off the ledge.

Chapter 2

You, The Designer

Today, anyone with a computer can be a designer. Choose a font, find a cool color, and you've got a snazzy new logo. It's so easy that your eight-year-old niece or nephew can do it.

However, we assign mystical reverence to the work of professional designers. Their elegant color schemes, provocative typography, and eye-scorching aesthetics leave us dumbfounded. Only "creative types" can achieve this; only near-savants who were born with a special talent.

Browsing design websites further compounds this assigned reverence. There, designers discuss creating processes rather than creating design. They promote glossy techniques over the boring fundamentals. They fawn over other designers, who command the current popular aesthetic.

The design forums that helped groom and educate many who now call themselves professional designers (including myself) have all but disappeared. Instead, we have ffffound, Dribbble, Cargo Collective, and other closed-gate communities where the intent is that you peek in through the bars and hope that someday you'll get inside. There are fewer modes of meaningful learning. Less sharing of experience. Now, it's "Check out this beautiful illustration and custom lettering. If you can't do something this cool, we won't let you in. Good luck getting here."

Seeing all that, you'd think design is difficult. You'd think it's complicated, and that gaining basic skill requires hours of studying a multitude of advanced topics. And you'd be wrong.

Anyone can be a great designer with practice. It's both at once liberating and frightening: your future as a designer depends only on how hard you're willing to work. Design is a skill and a trade; you get better at it by practicing. First, learn the basics and go design something. Then, call yourself a designer. The more things you design, the better you will get and the more lovely and insightful your creations will become. No magic knowledge hidden away in design books, blogs, or classes will teach you to be a great designer. All you have to do is practice. Learning design is that simple.

The basics you need to learn fill the rest of this book. However, before we dive in, let's talk about your mindset.

You are a designer.

You, the creative.

Here comes that condescension you were expecting. Getting good at design means cultivating your taste. Right now, you don't have taste that you can trust. Eventually you will, but for now you cannot trust your creativity. While you are still learning basic principles, don't try to be creative. Instead, focus on simplicity, clarity, and the cold, hard science of what works.

As you become more comfortable with the principles in this book, allow yourself to branch out and experiment. You will make mistakes. However, making mistakes is part of creativity, so don't beat yourself up. Instead, try a different decision next time.

We all think our creative ideas are great, but design is not just about having ideas—it's about choosing the best ones. Doing that takes experience. Through practice and hard work you will gain that experience, and you will then be able to indulge in the luxury of your creative ideas.

Don't try to be creative.

Your Designs, In Retrospect

You've probably experienced this phenomenon with other types of work: you look back at a project you completed a year ago, or maybe even a few months ago, and you are downright embarrassed of it. All you can see are the numerous mistakes you made and how, given the chance to redo it, there's so much you'd change.

This is a good thing. It means you are learning.

So, don't be embarrassed of those old projects. Be proud that you can now recognize your past mistakes. Know that your skill has increased since then. And, know that the work you are doing right now will be the same after another year's hindsight. If anything, it's exciting.

Chapter 3

UX, UI, and Other Buzzwords

Designers love terms like User Experience (UX), User Interface (UI), and Design Thinking. You'd expect these terms to be the logical place to begin learning about design, considering such widespread discussion. Apparently, they can make or break your business! However, have you noticed that after reading posts about these topics, you walk away unsure of how to actually follow the advice? How do you improve your user experience? Which are the best UI elements for your situation? You get that it's important, but what does it really mean for your project?

Somehow amongst all the posts, discussions, and conference talks, buzzwords are born and the original meanings are obfuscated. For your purposes in getting started with design, here is the minimum knowledge you need.

UX is Common Sense

Plan your project from a user's point of view. Make the interface easy to use and understand, even if doing so takes an extra line of code. For each problem you face, solve it to make the user's life easier instead of your own. Now you are focusing on user experience.

Will a feature frustrate the user? Does performing a task require too many clicks? Is understanding how a screen functions at first glance difficult? If so, don't do it. Change it so it doesn't annoy your users. Even better, actively work to make them happy.

Work to make users happy.

UI is Trial and Error

A poor user interface (UI) usually results from poor planning. To get the UI right, sketch it first. Nothing reveals problems more quickly than pen and paper and—even better—making mistakes takes less time when sketching than when building. Even after sketching, don't be afraid to prototype an interface several different ways to see what works best.

You will not find a guide that outlines the perfect interface for every situation. It doesn't exist. Commitment to getting the design right and trying different solutions is how you create a great UI.

Evaluate your design with user testing and analytics. User testing is often much too expensive for bootstrappers. Instead, show your design to the least tech savvy user you know (or start a customer development process as outlined in Running Lean). That's a bootstrapper's user testing. In-app analytics also help you understand how people use your software. These methods will reveal where your UI needs revision.

Your UI design will never be right the first time, so be ready to change it. Be willing even if the changes have major implications for your code. With more trial and error, or more observation and testing, your UI will get better and your customers will thank you with their wallets.

Design Thinking Is Critical Thinking.

Design Thinking is often the subject of well-intentioned and well-written articles and even TED Talks. It's inspiring. CEOs need it. Investors need it. Everyone wants to think like a designer.

However, have you ever looked at a definition of Design Thinking? It's identical to the definition of critical thinking. Design Thinking is nothing more than the basic skill of problem solving. Designers don't have some special mode of thought that fuels our visual executions. We are problem solvers and critical thinkers. That's it. Coders are exceptional critical thinkers because fixing bugs and troubleshooting are integral parts of writing code. So don't be deceived; you already possess the tools you need to think about design.

Designers are critical thinkers.

Responsive Design, Gradual Engagement, and The Rest

Techniques like responsive design and gradual engagement (definitions intentionally omitted) have merit in some situations, but not when bootstrapping a new business. When bootstrapping, lofty design intentions like these only delay shipping. Instead of worrying about whether your web page layout adapts to a dozen different mobile device screen resolutions, focus on getting your product right. Ensure the layout itself is solid to begin with. Fundamentals like this will do much, much more to support your business. You can progress to those advanced topics later. You'll learn about the first fundamental in the next chapter.

Chapter 4

Layout

Designing a page layout is intimidating. That blank page is staring you in the face. Where do you start?

The default inclination to design a layout is to look at it like a puzzle: each content element is a puzzle piece, and you put all the pieces in the middle and rearrange until they fit together. This method seems logical but it doesn't match how our brains naturally organize information. The result is a cluttered layout with elements jammed into every available space.

Treating a layout like a puzzle causes headaches and clutter.

The best way to approach a layout is to start with a layout convention and groupings of related content elements. The layout convention is just an idea of how you'd like to organize the content, rather than a rigid template you need to force all the pieces to fit into. It replaces that terrifying blank page. With that layout concept in the back of your mind, group content elements by function, importance, and/or topic. Then, work each group into the layout one at a time. This way, you'll place content according to its purpose rather than just finding a place it fits.

Organize elements into related groups. Each group becomes a section of the page.

Creating a layout is only part of the design process—if it seems difficult, you've probably jumped the gun and started on the layout before you are ready. Chapter 9, Your New Process will teach you to work through a design in stages. Following a process, layouts become easy because research, editing, and exploration supply the context your mind needs to reconcile shapeless information with a physical space. The rest of this chapter describes principles to guide you when you reach that stage in your process.

Layout Conventions

Each medium has just a few common layouts. Look at the web, for example. If you had to guess, about what percentage of sites use the same sidebar and main column layout with a header and a footer? 50%? 75%? Do you ever get bored with this layout? Do you ever see one of these sites and think: "Wow, this design sucks. I can't believe they used a sidebar." Of course not. Instead, you know where to find content even on your first visit to the site. Layout conventions are good for users. They make designs easier to understand and content easier to browse.

So, while you are learning design, don't try to create a unique new layout from scratch. Stick with a standard one. This way, one of the biggest factors of your design is already figured out for you.

Alignment

When creating a layout, ensure that the left and right edges of elements align or center them. To do this, position and re-size elements so they align to vertical lines.

Elements can be aligned flush left, centered, or aligned flush right.

Ensure the edges of elements line up.

Adjust the width of an element so it aligns with the others.

Note that this rule applies to all elements on a page; even if two elements are separated vertically by hundreds of pixels, they still need to be lined up.

Elements should align even if they aren't adjacent.

Grids

What is a grid?

A grid is a system of vertical lines used to create a layout. Lines are spaced to create a set number of columns with or without built-in padding. Popular grids exist for specific fixed dimensions, such as 960.gs, but are also used for fluid layouts, mobile devices, and print. Common configurations include 12 columns, 16, and even up to 24. To use a grid, position elements to fill one or more columns, with edges falling exactly upon the vertical lines.

The following page shows an example of a 12 column grid and demonstrates how columns, grid lines, and padding function.

Basic grids are best.

For the majority of projects, complex grid systems are overkill. I prefer a simple grid with no padding and sometimes use as few as 3 columns. I've found that as I work through a design, those extra columns and their inflexible padding introduce more decisions and complications. The more columns I use in a grid, the more complex my designs end up being.

Hop online and you can find lots of examples where designers overlay a grid on their work. You know the ones; the grid has 80 million columns and all the illustrations, buttons, and even text inside buttons match up to grid lines with perfection. Those designers spent hours upon hours lining up every precious pixel, but their users don't notice. Those designers probably can't code, and I'm sure their developer chums often entertain violent thoughts when coding all that absolute positioning. Designing a layout this way wastes everyone's time. Attention to detail in design is critical, but at some point such efforts suffer from diminishing returns.

A 12 column grid divides evenly into 1, 2, 3, and 4 content columns all at once. It leaves less room for error, but is flexible enough to meet the needs of almost every project, short of a massive media website. Start with 12, and later on, as you get more comfortable, you can try other grids or even join the bad boy club and break the grid. However early on, the grid is your friend. As they say: you must learn the rules before you can break them.

Three Common Mistakes Using Grids

1. You stick to the grid even if it looks bad.

Too many grid-based designs feature two-column text set with stingy 10 pixel gutters or big beautiful graphic elements jammed into columns without any room to breathe. This happens when designers stick with the grid at any cost. Even if the content doesn't fit. To them, The Grid is a force of nature not to be trifled with. I say, if the design looks ugly or your content doesn't fit, edit the content or break the grid. Your work will be better for it and no one will notice. Remember that design exists to strengthen the content—if a grid is too restrictive to allow your content to flow naturally, don't be afraid to break the rules.

Here, the text columns are difficult to read because they are so close together, even though they are correctly aligned to the grid. To fix them, choose a different grid or break the grid by adding extra space in between the text columns.

2. You don't pay attention to alignment.

Surprisingly, it's easy to use a grid and still not have elements aligned correctly. Especially if you are using lots of columns.

This element is aligned to the incorrect side of the padding.

3. You can't handle unalterable elements.

Usually, it's a logo, illustration, or headline you can't change that throws a wrench in the works. Here's what to do.

I cannot resize this logo, but it doesn't perfectly fit into the grid columns. To handle this correctly, align the logo to the left and leave the extra space in its right-most grid column empty.

Graphics of unequal widths are not wide enough to completely fill the three column layout. To handle this, center each within its content column.

Further Reading & Resources

960.gs, a full-featured grid system

Less Framework, an adaptive CSS grid system

Blueprint, a CSS framework

Twitter Bootstrap, UI framework

Foundation, a rapid prototyping framework

Yahoo! YUI, a vast offering of components and frameworks

Chapter 5

Visual Hierarchy

Visual hierarchy is about maintaining an order of importance amongst elements in a design. Designers can assign this importance visually using any number of means, such as size, color, space, or location.

To employ visual hierarchy correctly, first you must think about which elements in the design are the most important. What do you want users to see first, and what action do you want them to take? Then, intentionally lead users through the design using visual cues.

As a designer, you are the reader's tour guide.

Leading users through a design can seem like a dark art. It's subjective, and all we have when making initial decisions is our instinct. However there are methods of testing hierarchy. The traditional choice is to conduct a user study that employs cameras to track eye movement and form heatmaps. These heatmaps visualize where users look in a format similar to weather maps. However, eye tracking is usually too expensive for bootstrappers. Other alternatives exist that track mouse movement instead of eye movement, which are slightly less accurate but still helpful. One impeccable service is CrazyEgg, although Google Analytics has a less insightful in-page analysis feature now, too. These are great tools to explore after launch.

CrazyEgg.com provides excellent heatmaps.

Don't Create a Maze

Once you have picked the approximate order in which you want users to see elements, imagine a directional path through the page. The goal is to lead the user's eye through spots on a page naturally, with the path ending at the location where you want users to take action.

When too many elements in a design are big and bright, they compete for the user's attention. The result is what designers often refer to as the design looking "busy" or "crowded." Those uneducated in design think that making all the font sizes big and all the colors bright will make users notice everything. After all, every single word on the page is important to the person who wrote it! However, users face a dizzying maze with no entrance; they aren't sure where to look or how to start reading. Often, they end up just leaving the website.

A clear hierarchy will serve your content well—people will read more when they know where to start. Making decisions about importance can be difficult, and you'll often be wrong. Your first attempt is always an educated guess, but start with what users want to see, and lead them to what you want them to see.

Creating the path through elements in your design is impossible without considering the relationship between elements. For one element to be more obvious, others must be less obvious. However, remember your decisions are not set in stone. You can always change the hierarchy later if your testing uncovers problems.

Start the Path

Planning out an intricate path through every element, in even a simple design, is impossible. Don't bother. Instead, start the path with the few most important elements, and end it at the place where users can take action. Designers and marketers commonly refer to this element as the Call To Action (CTA). After seeing the CTA, users will browse the rest of the design at their leisure, but they will know where to return when they are ready to proceed.

Creating Visual Prominence

To craft your hierarchy, assign visual prominence to the important elements you chose. The possibilities for doing this are limitless through combinations of size, color, space, location, typography, and other forms of visual interest.

Size

The huge font size grabs attention and makes the blog title important.

Larger elements stand out. This seems obvious, but often designers avoid making elements or font sizes large for fear of violating some imagined threshold of propriety. Don't be timid—be bold. If you have something big to say, make it big in size. Sometimes great design is daring, not subtle.

Color

The large block of color is striking so it draws attention.

The only element without a warm color is the blue button, so it stands out.

Color is a powerful tool for visual prominence. Nothing grabs attention better than a large block of intense color. Furthermore, you can use color temperature or contrast to emphasize elements.

Space

The large empty space surrounding the title adds emphasis.

Clever use of space can further support your visual hierarchy. A solitary item in a big empty space seems important. On the other hand, one item amongst a crowd of similar items seems less important.

Location

The top left corner is the most prominent location in a design.

Western languages read from left to right and top to bottom, so elements towards the top left are always noticed sooner. The top left corner is the most prominent location in a design. Keep positioning in mind as you create your hierarchy—ensure the path you create through the design approximately follows the natural direction of reading.

Typography

Display typefaces create visual interest and are useful for building hierarchy.

Display fonts have more visual interest than text fonts so they are useful for creating visual prominence. Interesting typography can supply just the right character or feel for an otherwise mundane element.

Further Reading

Gestalt Principles of Perception, in-depth series of blog posts by Andy Rutledge

Chapter 6

Proximity & Space

Proximity and space are subtle concepts that seem inconsequential at first glance, but they have a substantial impact upon a design's professionalism. Positioning elements correctly adds elegance, clarity, and polish to a composition. The best part is, the principles are simple.

Proximity

This term refers to the relationship between elements in a design. When elements are close together, the user infers that the elements share in content, function, or appearance.

Furthermore, proximity affects the pacing of a design. Think of it like this: proximity is to design as punctuation is to writing. A design lacking effective proximity is similar to a long compound run on sentence it is difficult to digest because the reader doesn't know where to pause (See what I did there?). Add punctuation and the communication is more efficient—the effect is the same when you effectively use proximity in your designs.

Sometimes proximity adds a semantic benefit, but often designers group elements just because they look better together. Either way, the design benefits.

The lines of text are spaced evenly and seem to have little relationship.

The title and meta data are close together, with a larger space before the paragraph begins. The meta data is all on one line because it is related. This way, the general information serves as an introduction, with a pause occurring before the more substantial block of content.

Positive and Negative Space

Positive Space refers to composition elements in the foreground.

Negative Space is the background area surrounding elements. Although Negative Space is commonly referred to as "White Space," it is not necessarily white in color nor even completely empty. Negative Space can be filled with patterns, textures, or other graphics that do not occupy the foreground of a composition.

The Positive Space depicts a vase, but the Negative Spaces resemble faces.

Recognizing the differences between the types of compositional space will help you to examine your design with a more critical eye and recognize the impact of your decisions. You'll see the design as a whole, rather than a bunch of elements you are moving around on a page.

The examples on the previous page demonstrate the power of negative space. The top examples look unprofessional. Correcting the Negative Space makes the bottom two examples look more professional, clean, and balanced even though the content and elements are identical.

When working on a design, the Negative Space is just as important as the Positive Space. Great design achieves a balance between the two.

Further Reading

Gestalt Principles of Perception, in-depth series of blog posts by Andy Rutledge

Principles of Grouping, Wikipedia

Figure-Ground, Wikipedia

Chapter 7

Typography

Typography presents an incredible opportunity for those of us who are woefully unskilled in illustration or creating custom graphics. It's a surprisingly easy way to add lots of visual appeal to your work.

You'll notice that fonts are a topic of passionate debate in the design community, famously Comic Sans and Papyrus. Furthermore, type geeks have strenuous and detailed criteria for pairing fonts. Ignore all that. The goal for this chapter is to teach you a few simple strategies for getting a custom typographic look without wading through thousands of fonts.

Many design books go into exhaustive detail about typography and explain classifications, historical significance, genres, and other minutiae. Most of this knowledge is of little use for bootstrapping a new business, so I'm leaving it out. If you really want to geek out on the finer points of typography, I'll list a few resources for you at the end of this chapter. However, for the sake of getting your business rolling, here's all you need to know about type.

Display and Text Fonts

As of right now, start thinking about fonts in terms of two uses: display and text.

Display fonts are for headlines, logos, illustrations, and other features that can accommodate larger font sizes or more decorative typography. The goals for display are emphasis and visual interest.

Text fonts are for paragraphs, long-form content, and prose. Here, the goal is readability.

Some fonts can work well for both display and text. However, many do not. Learning to recognize the difference is important, but there are no concrete rules. Some fonts might not provide enough visual interest in a display setting, while many more decorative display fonts would be nearly impossible to read in a paragraph. If you are unsure about whether or not a font will work for one of these settings, try it. The important point is that you pay attention to the role of the font.

Type Terms

Font: the software file that stores the shapes of letters. Arial is a font file. Arial Bold is a separate file.

Typeface: the design of the shapes of letters. Arial is a typeface design you can use by installing the Arial font file.

Font Weights: Versions of the line thickness in letters, such as regular weight and bold weight. Font families can include weights such as: hairline, thin, light, medium, regular, semibold, bold, heavy, black, and ultra.

Font Styles: Variations in the shapes of letters such as italics and weights, or combinations of the two.

Font Family: The group of font files for each of the styles of a typeface. Arial, Arial Bold, and Arial Italic together form a font family.

Use Custom Fonts Instead of Defaults

Browser-safe fonts and native device fonts are fine for many uses, but you will always get more mileage out of custom fonts. Custom fonts can contribute visual polish without requiring much extra work.

If you are working on the web, use a service like Typekit or Fontdeck. These are more affordable than buying fonts to install on your computer, and they provide incredible value. Google's webfonts service is underwhelming because of the poor quality of most available fonts. Also, because of technical challenges and licensing restrictions, running Typekit or Fontdeck is easier than purchasing webfonts to host on your own server and apply via @font-face.

Choosing Fonts for a Project

The best rule of thumb is to limit your design to two font families. This limit simplifies your decision while creating your design. Each time you discover an element that needs a new style, you have fewer options to weigh.

When picking fonts for your project, use one of these strategies:

1. Pick one display font and one versatile text font family.

Using this strategy, you can have a nice, expressive font for your logo or headlines and can fill in the gaps with the more versatile text font. By versatile, I mean a family that works well for paragraphs, but can also work for buttons, subheaders, and navigation when the display font isn't suitable.

2. Pick one extremely versatile font family and use it for everything.

Some font families are extremely versatile because they include lots of weights and styles. Using one of these families is a great way to have lots of expressive and dynamic typography that always matches. You don't have to worry about making sure the fonts you pick match. The person who designed the typeface already did that hard work (You'll notice I used this strategy in this book by picking the Calluna font family).

Readability First

Font size.

Don't make readers squint. Set paragraph text at a minimum equivalent to 16px, and then pick text sizes for other elements relative to that. Don't decrease the font size if your content looks too long. Instead, edit your content. If your grandma can't read it without her magnifying glass, it's too small.

Line height (or leading).

The spacing between lines of a paragraph is equally crucial for easy reading. Rule of thumb dictates that spacing should equal about 125% of the font size, or 1.25em. You might decide to adjust this depending on the characteristics of the fonts you are using, and that's perfectly fine. In pixels, this translates to 16px size & 20px spacing, 18px & 22px, 20px & 25px, and so on.

Color Contrast.

The contrast between text color and background color affects reading speed. Too many websites have light gray text that's difficult to read on anything but an Apple Cinema Display. Give readers a break and use high contrast for all your text.

For more, see the Color chapter.

Maintain Consistent Styles

If you write CSS, you understand the concept of styles that are applied to multiple elements on a web page. Regardless of the medium, maintaining consistent type styles is crucial for the sake of clarity and readability. This sounds simple, but I'd argue it is the biggest and most common typographic mistake that people make.

Content must be well-organized before you can apply consistent typographic styles.

Many typographic errors are caused by poorly formatted or organized content. As a designer, you are responsible for facilitating communication; you guide the user through the content. This means you must understand which lines are headers, subheaders, or just bold. If you didn't write the content, work with the person who did to get it organized before you continue. This includes maintaining writing conventions for the usage of headers, subheaders, bold, etc.

Organize your content.

Use the fewest text styles possible.

No project needs five different paragraph styles or eight different header styles. Start with one text style for each of the most common elements and be judicious when adding new styles. Reuse styles whenever possible, unless doing so sacrifices clarity.

Ensure a minimum difference in text styles.

Headers, subheaders, and paragraphs need to be substantially different. For example, do not set a header at 30px bold and a subheader at 28px bold. Readers will not recognize the difference and will struggle to recognize when transitions occur in the content.

Font size is not the only way to differentiate styles. You can also use weight, italics, capitalization, color, and more. For example, main headlines could have a light weight and vastly larger font size, and to contrast, subheaders could be smaller, bold, and in all caps.

How to Know If Fonts Go Well Together

Pairing fonts is challenging. As I mentioned at the beginning of this chapter, typography geeks often pair fonts based on categories and historical genres. Approaching font selection this way requires substantial knowledge before it becomes productive. This is not an effective use of your time, so instead, here are some simple guidelines for pairing fonts.

Don't use two fonts that have a similar style.

The first example uses two different fonts. The second uses the same font. Note the differences between the letter "g" in the first example.

Using two similar fonts can make your design look amateur. There's no reason to use two similar fonts—using only one is always better, since they serve the same purpose, anyway.

Don't use two fonts that have a lot of personality or are highly decorative.

Instead of using two decorative fonts, pick just one of them and use a text font next to it.

Using two decorative fonts in the same design runs the risk of looking distracting, cluttered, and overwhelming. Some recent design trends, such as retro signage lettering, do this—but they require some experience in order to get the balance right. It's not worth the risk and additional time spent while you are trying to get your business off the ground. Instead, just pick one of the display fonts and let it be the center of attention.

Consider using a serif and a sans-serif, possibly from the same family.

Calluna and Calluna Sans are designed to go well together.

A classic and beautiful pairing is a sans serif for display and a serif for text. Inverting this pairing can work, too. The point is that choosing a serif and a sans reduces the likelihood that the fonts will clash because of being substantially different. Even better if your fonts are part of the same font family: they are guaranteed to match, such as a couple of the suggested starter font families in this chapter.

Don't over-think it. Just try it.

Examples of Type Studies. Any of them could be correct—the point is to explore!

The best way to know if fonts go well together is to try them! A common method for doing so is to use what some call a "type study." A type study is essentially just a template of fake content you can use to switch out fonts for comparison. Use something like Lorem Ipsum and create a page with a headline and a paragraph. Save several copies of the page and try different font combinations on each. You can do this in any format you want, such as HTML or Photoshop. Print them out and compare. This is easier than switching out fonts repeatedly on your real design.

How To Get Started With Typography

Pick your go-to fonts.

Rather than face the staggering volume of choices head on, start small. Choose just a couple of font families that you really like and use them for every project. The truth is, you don't need a new unique font for every project. The best fonts are versatile. They are suitable for a variety of design aesthetics. Pick out a couple of favorites; these are your go-to font families. Then use them everywhere. Later in the chapter, I'll provide a few suggestions to get you started.

Let the font do the heavy lifting.

Decorative or overtly expressive typography is difficult to achieve without looking tacky or unprofessional. For now, be conservative. Delay trying more sophisticated styles until you have some more experience under your belt.

Don't try to force your fonts to be unique by modifying them or drawing special shapes or characters. Beautiful typography is about calling attention to the elegant shapes of the letters. This is an exercise in restraint. Pick a quality font and let it speak for itself. Type designers spend thousands of hours perfecting every curve and angle of every character in their fonts. Right now, you are no match for their skill. Lend some trust. Let your fonts work for you. That's what the pros do, and that's how you'll get beautiful typography.

Let the font speak for itself.

Versatile Font Families to Get You Started

Many design books will point you toward traditional fonts like Trajan, Garamond, and Gill Sans. That's fine, but these fonts probably aren't going to give you the look you want for projects like modern web applications (Furthermore, pairing them with node.js, Rails 3, or MongoDB hotness seems downright immoral). So, instead of supplying the old-school staples, I'm going to recommend some newer, more popular, but also impeccably well crafted and timeless fonts as a starting point for your typography adventures. All the fonts below work great for both display and text and are available on Typekit.

Calluna & Calluna Sans

Taken from online PDF type specimens for Calluna and Calluna Sans. All rights belong to respective creators.

FF Meta & FF Meta Serif

Taken from online type specimens for FF Meta and FF Meta Serif. All rights belong to respective creators.

Proxima Nova

Taken from online PDF type specimens for Proxima Nova. All rights belong to respective creators.

Skolar

Taken from online PDF type specimens for Skolar. All rights belong to respective creators.

Adelle

Taken from online PDF type specimens for Adelle. All rights belong to respective creators.

How to Find New Fonts

Take a few minutes and browse some design work that you admire. Jot down the fonts used and build a short list. Then, try them out using the type tester features on Typekit, Fontshop, or MyFonts. You can read more ideas about this tactic in chapter 10, How To Steal. Also, the resources below are great places to discover new fonts.

Further Reading & Inspiration

The Typographic Desk Reference

FontShop Email Newsletter

FontFeed, blog

MyFonts Email Newsletter

Typophile, an online typography community

Fonts In Use, a design gallery that labels fonts used.

I Love Typography, blog

Typedia, an online shared encyclopedia of typefaces

The Elements of Typographics Style Applied to the Web

Chapter 8

Color

Color is the last of the design principles chapters because it is the most difficult to master. Personally, I learned to use color through years of practice at full time jobs and also by getting advice from designers with more experience. Mastering color takes time. However, don't be discouraged; this chapter outlines how you can use color effectively without pursuing mastery.

Color Is Confusing

In real life, when you add more color, the result gets darker. However on the screen, the opposite is true: adding more color makes the result lighter (For the jargon-prone, these are called subtractive and additive color, respectively). Because of this, choosing colors using a screen is counter-intuitive from the beginning.

Even worse, when you read up on color theory, you'll discover rules and formulas, color diagrams, pairing guidelines, and even the psychological impact of colors. It's an awful lot to consider when designing a project.

I'd argue that for new designers, formal color theory is too much to learn. You can follow all the rules and still end up with an ugly color scheme. The psychology of individual colors sounds insightful, but following it closely is too restrictive. Color theory doesn't give us a place to start creating a design. So, we're going to ignore much of it.

Relativity of Color

Each new color added to a design will influence how we perceive other present colors. This is because of the way our eyes interpret color. To the human eye, color is relative.

The inner color is the same in each set. The surrounding color causes the eye to interpret it differently.

You've probably seen similar examples before and thought, "So what?"

Understanding color relativity is important because it will help you use and choose colors better. Rather than picking colors for each element, you assign colors for each element relative to colors for adjacent elements. You view the design as a whole and make color decisions that shift portions of the design into harmony rather than merely choosing where to apply a set of predefined colors. It's a different mindset, and one that will bring you much closer to mastering color.

Color Contrast

The term "contrast" describes the difference between adjacent colors. These colors must be different enough in brightness to work well together. That is, if the colors are too similar, they can clash. Such low contrast elements can be difficult to notice because they either blend in with the background or blend together.

The colors are too similar so the button is difficult to locate and the text is not easy to read.

With improved contrast, the button is much easier to spot and the text is clear.

The two green colors are too similar and the icon is difficult to make out.

White provides more contrast so the icon is easier to see.

Using Contrast

Readability is the most important concern related to contrast. Always make sure text is clear and legible.

Beyond just readability, poor contrast can diminish the effects of Proximity, Negative Space, and Visual Hierarchy. A low-contrast design is more difficult to understand because the Positive and Negative Space start to blend together, causing the rhythm of the elements to stutter.

Even though Proximity, Space, and Hierarchy are used correctly, their combined effect is diminished by poor contrast. The composition almost appears blurred.

This revised design is more powerful and clear because the colors contrast well enough to establish transitions and hierarchy.

Warm and Cool

Before you create a color scheme, consider whether warm or cool colors better support your message and goals for the project. Unlike the complicated psychology of individual colors, color temperature provides a simple and productive insight into the emotion of color.

Warm colors, including variations of red, orange, and yellow, convey feelings of energy, passion, happiness, and comfort. Cool colors, including variations of blue, green, and purple, communicate calmness, relaxation, professionalism, and depth.

Asking yourself the right questions will help you to choose colors that match your intent: "Do I want this design to feel welcoming or professional? Should visitors feel energized or soothed?"

Choosing to focus upon either warm or cool colors does not require that you omit colors of the opposite temperature. You can even successfully use both in equal amounts. However, choosing to focus on one temperature can be a great way to start a design.

Creating Color Schemes

While learning, don't try to create a color scheme for your project by opening a color picker, such as Photoshop's. Doing so can be overwhelming, and even colors that look nice together as swatches don't always work well together when applied to real content.

Instead, start with one color. Pick one that works well for the style or feeling you have in mind. Then, experiment. Apply the one color and a range of grays to your design, and slowly swap in different colors for some of the grays. This way, each new color will match the first color you chose and will suit your content well. This practice sounds tedious, but after some practice, you will start recognizing color relationships in your designs more quickly. When that happens, you can skip this step.

Always set aside one obvious color for interactive elements like links and buttons. Doing so is a good rule to follow as users always know what can be clicked or tapped. Blue is probably the most common link color, but others work equally well, so long as they provide sufficient contrast with surrounding elements.

An Example Color Scheme

You've probably never seen a designer explain their reasoning for picking colors. At this point, the decision-making process probably seems arbitrary.

Here's the truth: choosing colors for a design is completely arbitrary. That's because it entails more than just choosing a group of colors at the beginning of your project and then applying them.

Using color in your design is an exercise in revision. Don't assume that the color scheme you chose when you started your design will still be the same when the design is ready to build. As you work, you'll adjust the brightness of some colors, or even swap some of them out. The palette will evolve, just as every other aspect of the design does.

Refining the color scheme proceeds differently for every project. So rather than walk you through the creation of a color scheme, which would do nothing more than bore you to death, I'll explain the rationale behind the color scheme for this ebook's website. While these specific decisions will not be relevant for your project, this example will provide an insight into how you should begin thinking about color.

The current iteration of the website for this ebook. Like every design, it's a work in progress, and there are many aspects I want to change and test.

I wanted the website for this ebook to seem friendly, welcoming, and inviting, so I knew warm colors were important. As I worked on the design, I ended up adding the blue color to use for interactive elements, which I wanted to be higher on the visual hierarchy. With a predominantly warm palette, the blue really sticks out and draws the eye.

Yellow

If you can believe it, a pale yellow background was the foundation of and inspiration for this design aesthetic. It provides the perfect tone for the brand I wanted to create. Subtle, warm, and bright. I blend it into white with a gradient to create what, at least in my mind, seems like a sunny glow on the page.

Red

While I wanted a friendly, warm design, I also didn't want it to appear overly soft or subdued. So, I introduced a shade of red to add energy and boldness. I went with a more orangey red so it complimented the yellow well. I only used this red for the book cover and elements I wanted to emphasize.

Later, when I added the arrows and scribbled notes, I used red because it looks almost like a graded school paper. I dimmed the notes down using transparency so they didn't distract too much from more important elements—I just wanted them to add a bit of fun atmosphere.

Brown

I needed a dark color for text because the red and yellow just aren't readable enough on their own. Brown felt a lot warmer and more natural than black or gray. It fit my plans for the design. I chose several subtle variations of brown I could use for various text settings. You could argue only one shade of brown is needed here, but I liked the effect of using a couple additional shades sparingly, just to break up the huge amount of text.

Blue

I created this blue to match the orange/red in intensity as closely as I could. I didn't want it to be brighter or darker—I only wanted to rely upon the change in color temperature to add contrast to the interactive elements. I also liked the idea of using a soothing color on the "Buy Now" button. I think it makes the button a bit less scary.

Choose colors. Don't apply them.

You'll note I didn't start with a predefined set of colors and then slather them on top of the content. I created this color scheme by thinking about my content and how I wanted to present it. This is how you should choose every aspect of your design, but especially color. The number of colors available to you is functionally limitless, and the only way to filter down the choices is to consider your content and project goals.

Further Reading & Inspiration

Beyond these suggestions, the best way to create a great color scheme for your project is to steal one (Gasp). Professional designers do it all the time, and so can you. I'll detail more about this, including more caveats, in the upcoming chapter, How To Steal.

Kuler, a gallery of color schemes. Great for inspiration, but sometimes impractical.

Color Matters, a wealth of information about formal color theory.

Contrast Rebellion, "Low-contrast font color and unreadable texts? To hell with them!"

Chapter 9

Your New Process

A new designer that is bootstrapping a business faces intimidating questions: how do I come up with the right design concept? Where do I start creating a design?

The answer is process. Having a simple method for approaching design work will help you accomplish uncanny feats even on days when the muse called in sick. Process helps when the idea doesn't click fast enough (or not at all). It forces you to think through the problem to arrive at a solution that wasn't immediately apparent.

Process also saves you time. With clear process, you make mistakes early, when it's not so costly. We all hate those miserable projects where you are changing the design hours before launch. Process will spare you that strife—if you stick to it.

Your Process

What follows is a flexible and intentionally simplistic approach to design process. Feel free to re-order, skip, and ignore. Do what works for you and what makes sense for your project; no system can replace critical thinking.

Your design process should be part of your business process. If you are familiar with Lean methodology, you should have already begun Customer Development. If you aren't familiar, check out Running Lean by Ash Maurya. If you don't follow the Lean process, good old-fashioned research will help you make informed decisions (30x500 will teach you a reliable approach to business research).

Gather

Get everything you need to start the project, such as content, goals, requirements, and examples. You cannot design something without understanding it. Get to know the problem—uncover the real challenge you are facing. Examples will reveal how other people have solved similar problems. Also, note a few ideas you can steal (I'll explain how you're not a dirty thief in the next chapter).

Edit & Sketch

After gathering, start sketching and editing. If you are bootstrapping a business, you probably have a lot of control over the content for your project. That's a good thing. The goal here is to refine the content and start roughing out a shape for it. What kind of a structure will support your content? How do you want to deliver it? What do you need to create in order to meet your goals for the project?

You've probably seen sketches from some professional designers that are so beautiful they deserve to be framed. Beautiful sketches are a waste of time—yours should be ugly and fast. Sketches should be rough and should omit detail; they only need to explore rough ideas of layout and visual hierarchy—the rest comes later. The goal isn't to express your artistic side or even arrive at a solution; it's to find a multitude of possible solutions. Explore each possible solution with more sketches until you have exhausted all your ideas.

My sketches are ugly, too. Here are a few sketches of the website for this eBook.

Some designers prefer to create wireframes (which are essentially digital sketches) using Adobe Illustrator or Balsamiq. That's fine too. I prefer sketching with a pen because it allows me to work through ideas more quickly.

Each sketch is an effort to serve the content, but often you'll discover places where the content doesn't make sense. That's when you go back and edit. Validating your content at this stage is important—remember that your job as a designer is effectively communicating, not just prettying up the content. Design and content creation are symbiotic.

Eventually, your content and design ideas will evolve and you'll land on one solution that makes sense. That's when you can pause the sketching and move on.

Mock Up

Now that you have an idea of what your solution could look like, you need to try it. How to do this is the topic of much debate these days. "Designing in code" is all the rage and many are denouncing Adobe® Photoshop® as a mock up tool. Ignore what everyone says you should do, and just do what feels comfortable. If you can knock out HTML/CSS quickly, do it. If Photoshop is faster or helps you to demonstrate the solution better, use it.

The goal of this step is to make sure your solution really works the way you think it will. Revise the layout and hierarchy you planned, but also work on the more detailed aspects of the design you have learned about in this book: proximity, space, typography, and color.

You can spend as much or as little time on mock ups as you'd like. However, if you don't validate the solution well enough, you may end up re-designing (and then re-building) the project later on. Although, if you over-do it on the mock ups, you won't get that time back, either.

Until you gain some confidence in your design skill, consider being cautious and spending a bit of extra time on mock ups. This will help hedge against more painful time waste in the next step.

Build

Textmate icon is a copyright of MacroMates, Ltd. Terminal icon is a copyright of Apple, Inc.

This is the part you're already good at, but make no mistake: design doesn't stop at the mock up or the idea. Building is part of design, and design is part of building. As a designer who writes code, I cannot separate the two, and neither should you.

As you build, make sure you are following the solutions you planned. Even if the solution requires more code than you'd prefer, do it anyway. Be a stickler. You can always refactor code later. Stick to the solution faithfully, and if you encounter problem areas, don't be afraid to do more sketches and/or mock ups.

Then, ship it.

Test & Correct

No designer is clairvoyant. No matter how well we think we understand users, how much experience we have, or how much we research, we are always off at least a little (Often, we're off a lot). That's why testing is so important. With luck, you're 50% right. Be ready to change the other half.

Testing varies with your medium, but consider analytics, A/B testing, and further Customer Development. For each issue you uncover, start a mini design process including earlier steps. The Lean process is also a great model for this stage.

By Your Powers Combined

The next page is the obligatory process illustration with all steps combined. For now, follow the steps closely. Eventually they'll become habit, and then, you can toss the silly diagram in the trash.

Chapter 10

How To Steal

All designers steal, but they prefer to use different words to describe it: inspiration, conventions, best practice, or design style. These common phrases simply mean that designers copy each other. Few, if any of us, are exceptionally original—and that's fine.

However, this practice of copying is also a great way to learn design. There is no better way to learn than to imitate the more experienced. When you learn a musical instrument, do you try to write your own songs immediately, or do you first practice songs by your favorite musicians? In the same way, new designers should imitate experienced designers.

For bootstrappers, clever use of copying can help you finish your design work faster and launch sooner.

The Sum of the Parts

Copy one characteristic from each of the examples you found in the Gather step of your process and incorporate it into your own new design. This way, you haven't stolen anyone's intellectual property, but you still get the benefit of using elements you've seen work well.

Here's an example. Copy site A's fonts, site B's layout, and the colors from a cool illustration in a magazine. The result looks nothing like any of the originals, but you start out confident in each characteristic. You know how to use those specific fonts, colors, and the layout rather than having to invent them all on your own.

If you follow this method, you really aren't stealing anything at all. You are copying nondescript pieces of ideas from different sources and reassembling them into a new, completely different whole. It harms no one and infringes upon no one, but gives you a leg up on your new design.

Be Trendy

Copying popular design trends makes your work look current and professional. We all want to be punk rock about design—we like to pretend we are too cool for the mainstream trends, but those trends started because people like them.

For new designers, adopting the current fashion is a great way to artificially raise the perceived quality of your work. Yes, the current fashion might not be a great fit for your project, so don't force it. But if it does fit, or if you can borrow bits and pieces, you get free lunch. You get the same treatment that all the other cool brands get—but that you wouldn't otherwise get—because your design work isn't as good yet. It's a benefit that's tough to pass up.

Be trendy.
Get free lunch.

The Easy Marks

Color Schemes

Assembling colors from scratch is vexing. As discussed in the Color chapter, it's the most challenging design element to master. Because of that, it's also the best element to steal. Copy the colors from a well-designed site or even from several sources. No one will notice, and even if they do, they won't care. You will probably end up editing the colors as you work on your own design anyway.

Layout

Layout conventions are good for everyone, including you. If you copy a layout, it's not even stealing. You're doing it for your users' sake—all in the name of usability. Wink.

Fonts

The best way to discover new fonts is to observe which are in use on sites or apps you like. Only an elite few of us can browse thousands of specimens in an online font store and make any sense of it. The rest of us buy fonts we see in use.

Smart designers copy.

How Not To Steal

Theft of intellectual property is unethical and flat out wrong. It can get you sued, fined, and worse. Don't do it. Here's how to not be a dirty thief:

Copy only one element.

A good rule of thumb for imitating a design that inspires you is to copy only one characteristic, such as the color scheme, layout, or aesthetic. Copy more than one, and your design will look like a rip off, and you probably risk infringement.

If the design does have some unique aspect not commonly seen elsewhere, copying it is probably not wise. Use common sense.

Don't copy trademarks.

Copying a logo or other trademark is stupid. Not only does your business suffer from a lack of identity, it opens you up to lawsuits. And if you do it, you will get sued.

Don't steal graphics.

Photos, icons, and illustrations are copyrighted. You can't just search Google images and use whatever you find. Use stock photos or icons, or produce them yourself. All the graphics you use must be licensed.

License your fonts.

Don't grab a torrent of 20,000 fonts and use them in your projects. People who make fonts deserve to be paid for their work just like you do. Instead, buy a license. If it is too expensive, use a web fonts service like Typekit. With extra browsing and searching effort, it's even possible to find free, public domain fonts of respectable quality. (Such as at The League of Movable Type.)

Ask permission.

If you want to use a specific copyrighted element, ask the owner. People are nice—they might just let you! If they say no, you have done no harm.

Play nice.

People spend lots of money and put many hours into getting design right. Be respectful. Imitation is the most sincere form of flattery, but if your design looks exactly like mine, I won't take it as a compliment. Neither will my lawyer. Gaining inspiration is absolutely crucial and completely acceptable as long as you don't break the law or be a general nuisance. Be nice to the people you admire, and maybe they'll even help you.

Inspiration

We all have different interests and tastes that inspire us. Finding inspiration is an important part of becoming a designer because no one can be bursting with creative energy during every waking moment. Sometimes we need to refuel—inspiration brings not just ideas, but motivation, ambition, and confidence. Furthermore, combining that inspiration with fundamental knowledge and reliable process produces more insightful design that further strengthens our businesses.

Awwwards, a web design awards gallery. Useful for visual style inspiration.

The Favorite Website Awards (FWA), a popular design awards gallery.

Chapter 11

Visual Design Tips

Visual beauty might not necessarily break your business, but it will help potential customers recognize the value you offer. Plus, if you launch without confidence in the aesthetic quality of your app, there's always this worry in the back of your mind: people won't think your business is legit. You worry that they won't see your product's value because they can't get past the imperfect storefront. Depending on who your potential customers are, the severity of this effect can vary—from zero, to mission critical.

Aesthetics are also a source of pride. You spend hours upon hours getting the code right, and your hard work deserves to be showcased with a lovely design.

However, even if you follow the advice provided thus far in this book, you could end up with a site that has nice colors, layout, fonts, and doesn't infringe on any cardinal rules, but still lacks that extra polish you get from a designer. That instant "Wow" moment that a beautiful design creates.

First, let's pause: for a new bootstrapped business, that's a great place to start. Many start with much less, and you're already ahead of the curve. Just following the simple advice and techniques you've learned thus far will substantially improve the quality of your work and will do much to support your business. Having a design that doesn't look like a train wreck is no small feat. Really.

But there's still that special something left: the icing or the gravy—the bacon. The difference between a flat can of beer and a perfect pour. If you've decided this is important to you or to your business, the advice that follows will get you started. To be blunt, you will not achieve the same level of visual beauty as an experienced designer. At least not until you earn a similar level of experience. However, these tips will bring you another measure closer.

Designing a Logo

Set the business name in a several different fonts in black-on-white and compare. If the name has more than one word, try the words on one line, and then on multiple lines. Compare different font weights, all caps, all lowercase, italics, and every possible combination of these. Compare all these variations on one big page and see what leaps out at you. Which of them capture the feeling of the name? Choose a handful of favorites and set them in white-on-black. Do you still like them? Then, try color.

Try everything.

The goal here is to identify a combination of words and font that can stand on its own. You do not need a graphic icon for your logo (Designers often refer to this piece of a logo as the mark). Using a graphic for your logo presents a challenge because you probably don't have the skill to draw it yourself. You also don't want to use a stock icon that might show up anywhere; a generic mark defeats the purpose. So instead, use typography to create your brand. Choose a solid font and style it in a way that it stands on its own. If you treat it with enough visual prominence in your design, it will work every bit as well as a graphical mark. Designers (even famous ones) do this all the time and there is no shame in it.

If you use embedded fonts (like @font-face), you don't even need to bother with exporting graphics for different uses. The logo is easy to reproduce in various sizes with simple styles.

Try everything.

Directional Light

Realism.

Gradients, shadows, and glows all simulate lighting in the real world. One common mistake designers make when using these effects is they do not share a common perceived light source. For example, a drop shadow extends downward, but a gradient on the same element is dark at the top and light at the bottom. If you use these effects, ensure they match the natural behavior of directional light in the real world.

The gradient and shadow come from opposite directions.

The gradient and shadow share the same light source.

Avoid blurring.

Shadows and glows can make elements look blurred, or out of focus. When using them, make sure the color of the shadow contrasts with the color of the element. However if the contrast is too great, the effect can look fake or unrealistic.

Ensure contrast between the colors of the element and shadow to prevent blurriness.

Even with sufficient contrast, dark shadows usually look cheesy. Keep it subtle!

How to pick colors for a gradient.

Gradients that use different hues usually look silly. Instead, try gradients that use different shades of the same color, such as a light blue to a medium blue.

For gradients, use different shades of the same color.

If you don't mind using graphics software like Adobe® Photoshop®, there's an easy trick to get the perfect colors for gradients every time, and all you need is one starting color. It's easier than comparing hex or RGB values directly in code.

In Photoshop, create a shape using the starting color. Then, apply a black to white gradient effect on top of it and set the blending mode to "overlay." Change the opacity of the effect to vary the intensity of the gradient (I like to stick between 20% and 50% opacity). You can use this technique for any color, and the result is an elegant gradient without having to test a dozen different color combinations.

In Photoshop, create a Gradient Overlay from the Layer Effects menu.

A 25% Opacity gradient.

A 50% Opacity gradient.

After applying the effect, you can save as an image or use the color picker to grab the top and bottom-most colors to use in your code.

Matching Icons

All the icons in your design should have a similar style. Don't use a simple shape icon next to a colorful, photo-realistic icon. Often, new designers will choose icons for various areas of a design one at a time. Instead, choose an icon set that meets the needs of the entire design.

These icons don't match.

These icons share a similar style.

How To Add Graphics

Those of us woefully unskilled in illustration can struggle to find a tasteful way to work graphic elements into a design. For some projects, even nice typography can fail to provide enough visual interest. Graphics break up the sheer wall of text and assist readers with comprehension. Incorporating graphics into your design can also increase conversion rates.

Use screenshots.

Screenshots are by far the easiest way to add images into a design if they are appropriate for the project. If it's a marketing site for your software business, screenshots are the perfect choice.

Choosing which screenshots to use can be tricky—outside the context of a real application, users might struggle to recognize what the screenshot demonstrates. Make an effort to supply context with each image either in a caption or, better, by depicting one specific feature or action.

If your project is a mobile app, using a photo of the device (like an iPhone) with a screenshot is a really easy way to incorporate a beautiful graphic.

Customize icons.

If you're at least a little bit handy with Photoshop, you can easily modify existing icons to meet your needs. Modifying simple icons gives you a custom look without breaking the bank.

Start with an large icon set that includes the original Photoshop or vector graphics files. My go-to set is Glyphish. Many recognize this icon set as commonly used in iOS apps, but I use it on web projects regularly (and frequently in this book). It's cheap and provides loads of source material. (Tipogram is a newer, but also compelling choice.)

If you use Photoshop, using the "Color Overlay" layer effect is the best way to apply a new color to icons because it doesn't destroy any pixels. You can also use the pencil tool to modify the actual pixels of the icon. With 5-10 minutes of effort, you can have a few custom icons.

Use stock photos well.

We've all seen the cheesy stock photo of the model wearing a headset who (apparently) works in a call center. Photos like this give stock photography a bad name. The truth is that if you have taste, you can use stock photos tastefully.

To be honest, picking through stock photos takes time and effort, and depending on how quickly you want to launch, it might not provide the best return for time spent. However if you are willing to endure the search, there are great photos to be had for cheap.

I suggest iStockPhoto. An alternative is Flickr, but there you must be careful about licensing, as users can set the license themselves, per photo. Some are okay to use, but many are not (You can always contact the owner and ask permission). Other stock photo sites like Getty Images and Corbis require royalties, model releases, and other expensive fees. iStockPhoto is cheap and the quality of photos on offer is only increasing.

This photo screams "I design all my websites in Microsoft Word."

When choosing a photo, look for something easy to place into your design. Photos that are cropped closely are often difficult to use. I find that photos of solitary objects are usually the easiest to work into a design. They are simple, tasteful, and can add a nice visual metaphor to the work. Whatever you choose, keep it subtle. Overtly creative photos are indicators of amateur design.

Interactivity Basics

The visual quality of an interface has a massive impact upon whether users understand how to use it. You can add visual cues to show the user how an interface functions and which of its elements they can manipulate.

Clickable elements should look clickable.

The color chapter suggested using one specific color for every interactive element. That's a great starting point, but in complex applications it is not enough. Sometimes, you just can't limit all interactive elements to only one color because it doesn't make sense. In those cases, you need to supply additional visual cues. However, even if you can use one consistent color for all interactive elements, providing additional visual cues will make the interface still easier to understand, which only benefits users.

On the web, links are underlined by default. It's an important visual cue that text is a link. Often times designers remove the underline with CSS, and that's fine. However if you do remove the underline, make sure to provide other visual cues, such as a bold font weight and/or a different color.

The most understandable visual effects imitate the real world: shadows, bevels, gradients, and textures (This is called skeuomorphism). When people see these effects, they immediately associate the digital element with a real world object and understand how to use the interface. For example, if a button has a bevel, it looks like a button in the real world and users will know they can click it.

The button with the bevel is more obviously click-able.

You can easily take Skeuomorphism too far and end up with an interface that is too difficult to use with a mouse or touchscreen. However, using basic visual effects that hint at a physical metaphor does help clarify how your interface functions. This is one of the main reasons you see shadows, gradients, and bevels in design—not just because they look nice.

Show feedback upon user action.

When a user interacts with an element, that element should react. This is called visual feedback.

You should supply visual feedback in your interface during hover and rollover states whenever you can. When a user places their mouse arrow over a button, for example, it should change color. This applies to links, menus, checkboxes, toggles, and every other kind of interactive element. Sure, this means some extra work on your part, but your users will appreciate the increased clarity.

Use visual cues to indicate function and purpose.

While not feasible in every case, aesthetics can provide useful suggestions about function and purpose. Icons and colors can reinforce text that explains how an interface works.

The green and red button colors are visual cues that reinforce each button's function.

A green button might indicate a transition or a positive action. If a button is bright red, that probably means it performs some sort of destructive or negative action. Make sure you don't mix up these signals because they can confuse the user. The best interfaces use these visual cues to create an intuitive experience. From users' point of view, they don't need to examine each element carefully before they act. Instead, the interface functions the way they expect it to function.

Button or link?

New designers sometimes have trouble deciding when to use buttons and when to use links. Graphic buttons usually stand out more than links, so use buttons when you need an interactive element to be more prominent in the visual hierarchy. Use a link when the element is not as important. Of course, designing a link that's bigger and brighter than a button is possible too. When in question, try both and use your best judgment.

The only concrete rules are obvious: always use a button to submit a form, and always use a link in the middle of a sentence or paragraph.

On Design "Polish"

The highly polished, sophisticated appearance you see in the work of experienced designers is the result of time spent reworking the design over and over rather than specific tricks or unique aptitude. Even experienced designers don't produce a gorgeous design on the first attempt. Instead, they take that first draft and continue to revise it. Revision continues not just by adjusting the layout or trying different fonts, but even after all such major decisions are made. A designer skilled in aesthetics will continue revising each element until it fits just right, often trying many versions to arrive at the final result.

If you're seeking to produce that kind of polish in your design work, remember that it entails a literal obsession over details and persistence to keep trying variations. In my work, sometimes I will create a dozen variations of just one button, compare them all in context, and choose the one I like best. Rarely do I keep the first incarnation of an element. Some might view this as frivolous, but I'd respond that, often, these critics do not achieve an equal aesthetic quality in their work.

Where you draw the line on aesthetics is up to you. I'd encourage founders of new businesses to stop short and to delay pursuit of design polish until after they meet more important goals, like launching and becoming profitable.

Chapter 12

Evaluating Design

In design school, you learn to evaluate design by having formal critiques, where instructors and peers provide feedback on your work. These sessions are notorious for being harsh, but the intent is to teach new designers not to be emotionally attached to their work.

To evaluate design, you must be impartial. You have to check your personal taste and predispositions at the door and consider whether the work succeeds in solving the problem at hand.

We all believe we can recognize good design when we see it, but creating it is a different story. Evaluating your own design work is difficult, and it takes practice. There are a few tricks that can help you look at your work with a different perspective. Beyond these tricks, a second opinion can work wonders.

For your convenience, this chapter is condensed into the Design Critique Cheatsheet, located at the end of the chapter. Print it out, and every time you need to evaluate a design, try the simple exercises that the cheatsheet demonstrates.

Check your taste at the door.

Readability

The most fundamental purpose of design is to support communication. If the content in your design is difficult to read, the design is worthless. Because of this, readability is the first consideration. Ensure the font size, contrast, and spacing all make for easy reading.

Could your grandma read it without her magnifying glass?

Visual Hierarchy

You already learned in Chapter 5 about hierarchy, but it's important to reconsider it when evaluating a design. A simple way to judge the hierarchy is to close your eyes for a couple of seconds, then open them. Note where in the design your eyes landed first, and second. What seems like a natural path through the design? Is it correct, considering the importance of the elements?

Guide the user through page elements in order of importance.

Balance

Regardless of whether your design is symmetrical or asymmetrical, achieving balance is important. Think of it like Feng Shui; elements should be arranged in a manner that is visually pleasing, but also in a way that allows them to compliment one another. This sounds high-minded and elusive—what does it really mean for your design? In other words, balance is about the whole rather than the individual pieces. Each piece can be acceptable on its own, but is the whole also acceptable?

To evaluate the balance of a whole composition, a couple of simple tricks will serve you well. These same tricks are taught in beginning art and design classes in college.

Alignment

Did you stick to your grid? Rather than taking a screenshot and measuring pixels, hold a sheet of paper up to your screen. As you move it left and right, do elements on the screen line up with the edge of the paper? Be picky! Even just 2 pixels off matters.

Comparison

Sometimes when intensely working on design (or anything else) you can develop tunnel vision. It's an inability to look at your work rationally; you've been looking at it for so long that you cannot clear it from your mind to get a neutral perspective. This can be a problem—have you ever finished a project, and then looked back at it a week later and thought "What was I thinking?!"

Our brains process information in a relative fashion (Check out framing if you are into cognitive theory or psychology). Lack of context can cause your design work to suffer. However, gaining that context back is fairly simple.

Compare your design to another design that you know is objectively awesome. Doing this gives your zonked-out brain the jolt of association that it needs to look back to your own design with a critical eye. Use one of your favorite websites or apps for the comparison—something that really inspires you.

Thanks

Thank you for reading this book.

Did you learn something? Did the concepts really make a difference for your project? I want to know. Send me before and after screenshots. Send me a link to what you're working on.

Your email will land in my real inbox and I will reply to you, personally.

Thank you sincerely for the gesture of good faith you have offered by buying and reading this book!

Also, best wishes for you and your ventures. Starting something takes guts, and not everyone has your courage. Here's to our success!

hello@BootstrappingDesign.com

Resources

Layout

960.gs, a full-featured grid system

Less Framework, an adaptive CSS grid system

Blueprint, a CSS framework

Twitter Bootstrap, a UI framework

Foundation, a rapid prototyping framework

Yahoo! YUI, a vast offering of components and frameworks

Hierarchy

Gestalt Principles of Perception, in-depth series of blog posts by Andy Rutledge

Proximity & Space

Gestalt Principles of Perception, in-depth series of blog posts by Andy Rutledge

Principles of Grouping, Wikipedia

Figure-Ground, Wikipedia

Typography

The Typographic Desk Reference

FontShop Email Newsletter

FontFeed, blog

MyFonts Email Newsletter

Typophile, an online typography community

Fonts In Use, a design gallery that labels fonts used.

I Love Typography, blog

Typedia, an online shared encyclopedia of typefaces

The Elements of Typographics Style Applied to the Web

Color

Kuler, a gallery of color schemes. Great for inspiration, but sometimes impractical.

Color Matters, a wealth of information about formal color theory.

Contrast Rebellion, "Low-contrast font color and unreadable texts? To hell with them!"

About Jarrod Drysdale

I've worked at agencies big and small for clients glamorous and unheard-of. While I have a design degree and learned a lot from creative directors and art directors at full time gigs, much of my design learning happened over years of late nights and weekends when I'd beat my head against the wall trying to become a better designer. It was hard work. I want to save you that trouble.

My approach to design is about instinct because I learned in high pressure situations. Launch in a week or lose the client. Make it pink or get moved off the project. Other designers are more academic in their work, but I like to jump in and get my hands dirty. This makes me uniquely positioned to teach you.

This ebook contains the hard-won lessons from my career so far. It's not a tourist's guide to design. For that reason, this ebook is different from most design books. If you follow my advice, your hard work will be more focused and efficient. You'll develop skill and instinct. In my view, these are what make a talented designer, and these will benefit your business far more than the fad topics on popular design blogs.

If you're curious, here are a few boring details about my career:

I went to a small university in Oklahoma to study engineering. After a year, I earned a scholarship but hated it, so I switched majors to design. Eventually, I realized I wouldn't learn much of use in class so I taught myself Flash and ‘OOP' Actionscript, which was the cool new thing at the time. I built a bunch of side projects and a portfolio in my free time. This was enough to get me noticed by a guest lecturer in a portfolio review.

After graduation, I got a job at a local ad agency, but kept in touch with that lecturer. A year later, he offered me a job at his tiny new design studio in Chicago. There began my first national work for clients like New Line Cinema and Domino's Pizza.

After building my portfolio for a year, I had received offers from every large interactive ad agency in the city. I accepted an offer and went on to work mostly on the agency's State Farm team, but also subbed on other teams for LensCrafters, McDonald's, Kraft Foods, and other household brand names.

Later, I accepted a gig in Boulder, CO at a white-label design agency that deals exclusively with the financial industry. The clients I worked with there included many: Scottrade, Intuit, Bloomberg, and Lehman Brothers, to name just a few.

After a couple years there, inspired by Getting Real, I decided to quit my job, go freelance, and start bootstrapping a software business. By this point, I was already an experienced front end developer, but I picked up Ruby on Rails to bootstrap a SaaS web app for teachers. I shut it down in late 2011—you can read about it on my blog. I've also freelanced for several funded tech startups (that I can't name) from Boulder and Silicon Valley.

Most recently, I took an entrepreneurship/launch class, and then wrote this ebook.

Acknowledgements

Thank you to my wife, Rachel, and father, Glenn, for all the support, advice, and especially editing. I couldn't have written this book without you.

Thank you to the incredible community of bootstrappers, hackers, and founders who have made this ebook such an incredible success. I am grateful and humbled.

Thank you to Amy Hoy for all the advice and encouragement while I transitioned from working on a failing solo startup to writing this book.

Thank you to the crew at 37signals and the authors of Rework and Getting Real, Jason Fried & David Heinemeier Hansson, for showing the tech community that charging money, building a small business, and being genuine are okay.

Thank you to all the creative directors, art directors, anonymous design forum members, colleagues, teachers, clients, and friends who have shared of their experience, time, and talent to teach me about design.

Bootstrapping Design

by Jarrod Drysdale

Final Edition, July 2012

Copyright © 2012 Studio Fellow, LLC

All rights reserved. No part of this book may be reproduced in any form or by any electronic or mechanical means, including information storage and retrieval systems, without permission in writing from Jarrod Drysdale, except for brief excerpts in reviews or analysis.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the author was aware of the claim, the designations have been marked with ® symbols.

While every precaution has been taken in the preparation of this book, the author assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

Purchasing the Beta Edition entitles you to receive a free update to the first release edition of the PDF eBook. To receive this update, you must provide a valid email address upon purchase at http://BootstrappingDesign.com. Subsequent editions are not currently planned, but the author reserves the right to release them as separate paid products or as part of training courses, training kits, or other product formats.