3 Contents About this book ii thoughtbot Books iii Contact us iii Elements of Art & Design 1 Color Form and Space Closing 16 i
4 About this book There are many design books, but none aimed squarely at developers. You don t have to be a developer to enjoy this book, but you should be familiar with web technologies and have an interest in how they are built with the user in mind. Maybe you are tired of the ready-bake designs based on frameworks like Bootstrap and Foundation. Maybe your project is starting to take off and you are ready to invest time in your user experience to delight your users and increase conversion. We won t waste time introducing how HTML and CSS work, or talking about web design patterns as though you ve never seen a website. We will mix art theory with user interface examples and real-world code so you get a full understanding of what it means to design for the web. You will learn all the tools you need to craft a positive user experience, motivate your audience, and look good doing it. This sample contains a few hand-picked chapters, published directly from the book, allowing you to get a sense of the content, style and delivery of the product. If you enjoy the sample, you can get access to the entire book at: As a purchaser of the book, you also get access to: Multiple formats, including HTML, PDF, EPUB and Kindle. Access to a GitHub repository to receive updates as soon as they re pushed. Access to GitHub Issues, where you can provide feedback and tell us what you d like to see. ii
5 thoughtbot Books We have many other books available, covering topics like languages, frameworks, and even building games. Check them out: Contact us If you have any questions, or just want to get in touch, drop us a line: iii
6 Elements of Art & Design The study of visual design is really a study of human perception, and how to best apply these elements and principles to create a desired response in the viewer. Why do some color combinations look better than others? How can I take my wall of text and make it an easy to read article? There is a long history of great thinkers writing about how art and design work, breaking them down to their most basic parts to understand how they are put together. These building blocks are called the Elements of art and design. They are: Color: How colors affect the user emotionally and how combinations of color interact. Value: The lightness or darkness of a color. Shape: Areas of two-dimensional space. May be geometric like a rectangle, or an organic blob. Line: A real or perceived mark between two points. Form: A three-dimensional object, or the illusion of a third dimension. Space: An area that defined by its purpose and situated in two or three dimensions. Texture: The illusion of a third dimensions in a two-dimensional field that looks like you could touch it. The Principles are more about using the elements to get a desired outcome. They are: Balance: Arrangement of elements to create symmetry or asymmetry. 1
7 CHAPTER 1. ELEMENTS OF ART & DESIGN 2 Contrast: Using juxtaposition to create tension. Emphasis & Hierarchy: Making one area more important than another. Pattern: Regular repetition of elements. Rhythm: Creating a sense of movement. Harmony: Arranging elements to form a whole. It seems that no two lists of these elements and principles are exactly the same, and different specializations may use some more than others. Let s take a look at the more important items from these lists and how we use them to design for the web. Color Color is such a fundamental part of how humans understand the world that we often overlook how it is processed and why it influences us. The how Humans perceive a small part of the electromagnetic spectrum through our eyes as light, on a scale of frequencies which we call color. Light that has a short frequency is perceived as blue, and a longer frequency is perceived as red. Some humans have a deficiency in the ability to distinguish some colors, so it is important to remember that a discussion about color is about how most humans process light and is necessarily subjective. We will talk about accessibility in relation to color blindness later. The electromagnetic spectrum doesn t distribute color quite the same way as a color wheel. That s because our cone cells are specialized and don t give us an even sensitivity to light. We are more sensitive to blue, green, and red, and a little less sensitive in between. Our brains also form a smooth continuum between the far left and far right sides to create violet, a trick which works largely because we are least sensitive to that part of the spectrum. It s hard for us to distinguish colors where we have fewer receptors. We have trouble seeing the difference between very blue and very red, but it s also hard for us to see yellow and cyan in some situations.
8 CHAPTER 1. ELEMENTS OF ART & DESIGN 3 Figure 1.1: The color wheel distributes color in a way that emphasizes the parts of the spectrum that we see well and deemphasizes the parts that we are less sensitive to. It s a truer representation of how our brains interpret and process color, and explains where our color preferences come from and how to think about accessibility for those with color vision deficiencies. The why Everyone has a favorite color, but did you know that over 40% of the people in the world prefer blue? Red and green follow at around 10%, and it continues down the secondary colors around 3-4% and tertiary colors around 1-2%. If you look back up to the color sensitivity chart you can probably guess that we prefer colors that we see most clearly. We associate colors with the real world objects that share that color and with abstract ideas extended from them. Red, yellow, and orange are the color of fire and the hot sun. These are the warm colors, and they tend to make us think of action
9 CHAPTER 1. ELEMENTS OF ART & DESIGN 4 Figure 1.2: and dynamism. Blue and green are the color of the cool water and grass. These cool colors feel reserved and dependable and make people relaxed. Use these associations to your advantage. Choosing a color palette Does your startup offer financial services or do you want your airline to feel safe? Then you d better use cool colors. Does your brand target kids, promote sports and health, or just need to set itself apart from the established brand? Warm colors are a good bet. Using only one color in your palette is called monochrome. This will create the strongest connection to your chosen color, but doesn t give you a lot of options for design. Popular companies that use this technique successfully with very different colors include Coca-Cola, Chase, and Sprint. It is impossible to think of Coca-Cola
10 CHAPTER 1. ELEMENTS OF ART & DESIGN 5 without its particular shade of red. These brands try to be unfortgettable by using bold colors and heavy repetition. You can keep the strong mental associations of a monochromatic color harmony while still branching out to neighboring colors. This is called analagous color harmony, and can help give you more design options. Figure 1.3: You might use yellow-orange as a call-to-action color and yellow-green to deemphasize text while adding in yellow as a desaturated khaki for a background color. The most common color harmony technique is using complementary colors, which are opposite each other on the color wheel. This is commonly seen in movie posters and in products that try to capitalize on the attention-grabbing nature of contrasting colors to differentiate their product on the shelf. Complementary colors are a sure way to get noticed, but can be hard to work with on pages with a lot of text unless you add in white space or neutral colors. The triadic color harmony can be used a couple of different ways. You could choose
11 CHAPTER 1. ELEMENTS OF ART & DESIGN 6 Figure 1.4: three equally spaced colors, such as the three primary colors, to create a vibrant set of equally strong hues. You can also move two of the colors closer together to create a sort of blending between analagous and triadic color harmonies. This will give you both a close color relationship and another option for a little extra punch of color. RGB CMYK HSL HEX WTF Print designers and other designers that work in inks and pigments deal with CMYK (Cyan/Magenta/Yellow/blacK). This is called reductive color mixing because combining the colors will reflect less and less light until they make black. Where the primary colors overlap, you will see the familiar red, green and blue as secondary colors. The model we deal with in light-emitting displays is RGB (Red/Green/Blue). This is additive color mixing because combining all of the colors creates white.
12 CHAPTER 1. ELEMENTS OF ART & DESIGN 7 Figure 1.5: In this case, a combination of red and blue creates magenta. When we write CSS, we use a special shorthand to describe RGB colors called hexadecimal. Hexadecimal colors are prefixed with #. Instead of writing the colors as percentages or on a scale from 255, we use only two numbers per color by using pairs of base 16 numbers, which counts from 0 to 9 and then from A to F. To describe a purely red color, we would use FF (the highest value) for the red, and then 00 (the lowest value) for both the green and the blue. A pure black would be #000000, a nice medium gray is #AAAAAA, white would be #FFFFFF, and so on. You are likely to always have a color picker close at hand, so while it is useful to be able to adjust a color solely by adjusting the hexadecimal value, it is best to stick to those helpful tools for now. CSS3 added in a few more ways to describe color. You can describe the RGB values directly by describing that red as rgb(255, 0, 0). Although it isn t as widespread, in some cases it is easier to use HSL (Hue, Saturation, Lightness) to describe colors. That same pure red would be described as hsl(0, 100%, 50%). The first value is given in degrees (as in degrees around the color wheel, starting and ending at
13 CHAPTER 1. ELEMENTS OF ART & DESIGN 8 Figure 1.6: red), the second is that we want full saturation, and the third is that we do not want it to be tinted or shaded. Both rgb() and hsl() have accompanying methods for adding alpha transparency. For instance, you can use rgba(255, 0, 0, 0.5) to show red at 50% transparency. Form and Space We occupy three-dimensional space. Sometimes it s fun, sometimes it s dangerous, but that is where we live and it influences how our brains are accustomed to interacting with the world. In fact, we re so accustomed to it that we will subconsciously assign fake threedimensional attributes to digital elements on a flat screen. Dropdown menus don t just replace the content they cover, they feel physically above them. When we scroll down a page, the elements that move off-canvas are still in our mental map, even though they are no longer being emitted by the screen. They aren t pixels of
14 CHAPTER 1. ELEMENTS OF ART & DESIGN 9 Figure 1.7: color; subconciously, they are real. We can t help ourselves. But we can use the illusion of depth to make sense out of our designs. Think of the visual elements in your application as pieces of paper. Some of the pieces can move independently of the others, while some are taped together. Some are fixed in place while the user scrolls, and some are hidden off-screen. For example, a header might have important navigational links which the user needs no matter where we move the other pieces, so we position it in place above the other pieces. We can take it one step further and give the header a drop shadow or a slightly translucent background so we can see the content slide behind it. By using some visual styling, we can create the feeling of interacting with something more than just pixels on a screen. Separating your content into logical groups with their own interactions will make navigation effortless. Grouping similar elements not only make it easier to arrange and organize your content, but makes it possible to give different interaction treatments to each area for different contexts.
15 CHAPTER 1. ELEMENTS OF ART & DESIGN 10 Figure 1.8: How do we know how things should be grouped? We turn to Gestalt theory. It is a wide-ranging study which explains how we make associations between visual objects. We will expect objects to be related if: 1. Proximity: The objects are close to each other 2. Enclosure: The objects are within a visual container 3. Similarity: The objects look similar 4. Figure and ground: The objects are visually distinct from the background Proximity Things that are alike should be grouped together. This seems obvious enough, but sometimes these connections can be hard to define and categorize. When the user looks for related things on a page, they expect them to be nearby. When an interaction isn t where they expect it to be, they will spend time looking all over the
16 CHAPTER 1. ELEMENTS OF ART & DESIGN 11 Figure 1.9: page, with building frustration. Pulling similar elements together can also help a page feel simpler and less cluttered. If you aren t sure where a piece of content belongs on a page, consider ordering their proximity like this: Directly related content Suggested content that is main content on its own page Unrelated global content, like navigation Your main content should be front and center, with as little clutter as possible around it. Navigation links should be grouped into headers, footers, and sidebars. Consider using popovers, modals or accordions for useful but secondary actions. We ll talk more about HTML5 s semantic elements and how to organize these sections in the Writing Semantic Markup section. This rule also goes the other direction. If a piece of content is not directly related to the main content, make sure there is separation so the user knows that it is
17 CHAPTER 1. ELEMENTS OF ART & DESIGN 12 Figure 1.10: distinct. Content that is completely unrelated and unimportant should not appear on the page and should be moved to a page of its own. Enclosure Enclosure can be used to reinforce proximity; either tying content together or to differentiate it. Comments about a blog post should be close to the blog post itself, and including them in the same visual column or surrounded by the same border helps to make that connection. Using a container, links to edit or delete an item can appear on the item, rather than simply near it. Cards might be enclosure in its purest form, and they are quickly taking over the internet. In some ways, this trend represents a moving away from pages as completely contained information, and embracing the aggregation of data that makes the web so powerful. It is also part of a new wave of design patterns coming to us from mobile-first thinking, which focuses on displaying chunks of content on a wide variety of devices and contexts.
18 CHAPTER 1. ELEMENTS OF ART & DESIGN 13 Figure 1.11: You can also divide an enclosure by using lines, nested containers, or simply differently colors backgrounds. It can cause some extra cognitive overhead for your user if things get complex, so default to grouping with proximity and keep your enclosures subtle. Similarity If visual elements have the same style, we will also expect them to behave the same way. Unfortunately, mismatches tend to build up over time. They can happen when pulling together assets (like icons) from disparate places on the web, or when multiple designers are working on a project without enough communication. Building a styleguide helps fight the inevitable erosion, but it takes dedication to maintain. Your users are primarily making these connections within your site, but they bring with them the experience of design patterns used elsewhere on the web. Experimentation is good, but defaulting to consistency with established patterns will cut
19 CHAPTER 1. ELEMENTS OF ART & DESIGN 14 down your design time and shorten the learning curve for your users. Figure and ground Another way to distinguish new content is to create the illusion of it being above the main content. This is best used for very small pieces of information, and can take a few different forms. Figure 1.12: Popovers (sometimes called Dropdowns ) offer a way to hide content until it is needed while still keeping it nearby. Tooltips are just popovers containing a label or short description. They are revealed on hover and are most commonly used to explain an icon s meaning or give a little more detail where room is tight. Modals then are like the older sibling to the popover. They are larger to accommodate more complex interactions or content like images and videos. They sit at the top of the entire window and often block any action on the content underneath
20 CHAPTER 1. ELEMENTS OF ART & DESIGN 15 with an overlay. Triggering a modal usually requires clicking an explicit link rather than simply hovering over an area.
21 Closing Thanks for checking out this sample of Design for the Web. If you d like to get access to the full content, including ongoing updates, you can get it all on our website: 16
VISUAL ARTS VOCABULARY Abstract Artwork in which the subject matter is stated in a brief, simplified manner; little or no attempt is made to represent images realistically, and objects are often simplified
Reading 4.2 - An Introduction to Color Theory for Web Designers In A Nutshell, What is Color Theory? Color Theory actually covers a number of things, but at the most basic level it is the interaction of
ELEMENTS OF ART & PRINCIPLES OF DESIGN Elements of Art: 1. COLOR Color (hue) is one of the elements of art. Artists use color in many different ways. The colors we see are light waves absorbed or reflected
UNDERSTANDING DIFFERENT COLOUR SCHEMES MONOCHROMATIC COLOUR Monochromatic Colours are all the Colours (tints, tones and shades) of a single hue. Monochromatic colour schemes are derived from a single base
Creating a History Day Exhibit Adapted from materials at the National History Day website Exhibits are designed to display visual and written information on topics in an attractive and understandable manner.
Web Style Guide September 2013 Message from Marketing & Creative Services 2 Campus Community Members: The University of West Florida web presence is one of the most valuable assets we have as an institution.
Intellect Platform - The Workflow Engine Basic HelpDesk Troubleticket System - A102 Interneer, Inc. Updated on 2/22/2012 Created by Erika Keresztyen Fahey 2 Workflow - A102 - Basic HelpDesk Ticketing System
Norman Public Schools VISUAL ART ASSESSMENT GUIDE FOR GRADE 7 2013-2014 VISUAL ART NPS ARTS ASSESSMENT GUIDE Grade 7 This guide is to help teachers incorporate the Arts into their core curriculum. Students
Getting Started in Tinkercad By Bonnie Roskes, 3DVinci Tinkercad is a fun, easy to use, web-based 3D design application. You don t need any design experience - Tinkercad can be used by anyone. In fact,
Lesson Element Colour Theory Lesson 2 Advanced Colour Theory A simpler version of this lesson is covered in the basic version of these teacher notes. Task instructions The objective of the lesson is to
Design Elements & Principles I. Introduction Certain web sites seize users sights more easily, while others don t. Why? Sometimes we have to remark our opinion about likes or dislikes of web sites, and
QUICK START GUIDE FOR CLUB WEBSITES Introduction Quick Start Guide for Club Websites For more than 100 years, Rotary has united leaders committed to applying their expertise to better their communities.
Whitepaper Improving results together Whitepaper 1 Contents Introduction... 2 Psychology and why it s important... 3 Understanding how email generates an emotional response... 3-4 Colour... 4-5 Images...
COLOR THEORY WORKSHEET Use color pencils to complete the following exercises Name: Period Date PRIMARY COLORS cannot be made from any combination of colors. Fade intensity from top left to bottom right
APPENDIX A1 4 T T ELEMENTS AND PRINCIPLES OF DESIGN Groups: 1. Select an advertisement. 2. Examine the advertisement to find examples of a few elements and principles of design that you are familiar with.
Google Docs, Sheets, and Slides: Share and collaborate Once you've created your document, you can share it with others. Collaborators can then edit the same document at the same time you'll always have
Color Theory Adapted from http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-designers/ and http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/
Graphic Design Active Layer- When you create multi layers for your images the active layer, or the only one that will be affected by your actions, is the one with a blue background in your layers palette.
Raster Graphics and Color Greg Humphreys CS445: Intro Graphics University of Virginia, Fall 2004 Color models Color models Display Hardware Video display devices Cathode Ray Tube (CRT) Liquid Crystal Display
WHAT WE LOOK LIKE Identity Our logo. The Trapeze Networks logo consists of five elements: wording, color, background color, clear space and placement. All of these pieces must be addressed when using the
The Colour Wheel The colour wheel is designed so that virtually any colours you pick from it will look good together. Over the years, many variations of the basic design have been made, but the most common
Color Theory for Floral Design Essential Questions: Why would a floral designer need to have an understanding of color theory? How is color used to create floral designs? How can color be used for store
1. Three-Color Light Chapter 1 Introduction to Three-Color Light Many of us were taught at a young age that the primary colors are red, yellow, and blue. Our early experiences with color mixing were blending
ARVO Outreach Tools How to prepare an optical illusionthemed exhibit at a science exhibition 1801 Rockville Pike, Suite 400 Rockville, MD 20852 +18.104.22.16800 arvo.org Questions? @arvo.org How to prepare
Textiles Arts and Crafts PLO- IDENTIFY COLOUR AS AN ELEMENT OF DESIGN WHAT IS YOUR FAVOURITE COLOUR? Red : action, confidence, courage, vitality Pink : love, beauty Brown : earth, order, convention Orange
m ac romed ia Fl a s h Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra are trademarks
Blender Notes Introduction to Digital Modelling and Animation in Design Blender Tutorial - week 9 The Game Engine The Blender Game Engine This week we will have an introduction to the Game Engine build
How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this
SAMPLE SECTIONS Included are several sample sections from Designing Web Applications. They are pulled from different parts of the book. I hope you find them useful! The next page is the table of contents
8 Tips for Maximizing Survey Response Potential You ve built a survey and are ready to make it available to potential respondents. But how do you convert those potential respondents into completed responses?
Non-Stop Optical Illusions A Teacher s Guide to the Empire State Plaza Art Collection New York State Office of General Services Curatorial/Tour Services 29 th Floor, Corning Tower Albany, NY 12242 518.473.7521
Sample pages from Chapter six of Presentation Zen: Simple Ideas on Presentation Design and Delivery by Garr Reynolds On this page you can see five samples of simple slides in which elements were arranged
Aviva Mobile Style guidelines v1.0 Logo The Aviva logo represents our business to the wider world and is the most recognisable part of our brand identity. 1. Aviva landscape logo The Aviva logo is available
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
Op Art: Working With Optical Illusions Review Questions Name Period Date Answer the following questions in complete sentences. PAGES 2-3 1. How did Op art reflect 1960s culture? a. The 1960s were a time
Artisteer User Manual Table of Contents What Is Artisteer?...4 How to work with Artisteer interface?...5 Quick Start Guide...6 Downloading Artisteer...6 System Requirements...7 Installing Artisteer...8
In this chapter Find out why it s important to put finishing touches on a slide show Learn how to use the slide sorter Explore the use of slide transitions Learn how to change slide color schemes and backgrounds
Digital Billboard Content Guidelines Content Design Recommendations 1 Digital Billboard Site Content Guidelines Objective To provide effective content (also referred to as digital artwork or digital advertisements)
ADVANCED THEORIES FOR CG LIGHTING 0.1 INTRODUCTION To become skilled at 3D lighting, one must have an understanding of how light works. CG lighting has been established based on rules from cinematography,
Appendix appendix E The Lighting Effects Filter The Lighting Effects filter is like a little program in itself. With this filter, you can create a wealth of different lighting effects, from making a particular
The 2015 Email Design Lookbook a collection of exceptional email design Introduction Email templates can be tricky. What kind of template is best for an event promotion email? What about a newsletter or
Annie Clarke Windsor High School Interior Design Topic: Elements of Design Basic color introduction Lesson Plan Concept: Students will have a basic introduction to color, which will allow them have the
Visualization For Novices ( Ted Hall ) University of Michigan 3D Lab Digital Media Commons, Library http://um3d.dc.umich.edu Data Visualization Data visualization deals with communicating information about
Creating and Using Links and Bookmarks in PDF Documents After making a document into a PDF, there may be times when you will need to make links or bookmarks within that PDF to aid navigation through the
Dobbin Day - User Guide Introduction Dobbin Day is an in running performance form analysis tool. A runner s in-running performance is solely based on the price difference between its BSP (Betfair Starting
CS 430/585 Computer Graphics I Week 8, Lecture 15 Outline Light Physical Properties of Light and Color Eye Mechanism for Color Systems to Define Light and Color David Breen, William Regli and Maxim Peysakhov
Copyright 2008 Stephen Few, Perceptual Edge Page of 11 Dashboards can keep people well informed of what s going on, but most barely scratch the surface of their potential. Most dashboards communicate too
Project: Elements of Design - NAME Elements: Line, Color, Value, Shape, Space, Texture Principles: Consider what principles you may have used based on the definition of each. Artist to Remember: Research
Introduction to Light, Color, and Shadows What is light made out of? -waves, photons, Electromagnetic waves (don t know this one) How do you get color? - different wavelengths of light. What does it mean
Analyzing PDFs with Citavi 5 Introduction Just Like on Paper... 2 Methods in Detail Highlight Only (Yellow)... 3 Highlighting with a Main Idea (Red)... 4 Adding Direct Quotations (Blue)... 5 Adding Indirect
SIHHHDS303A Hair colour Skilling people for the industry SIHHHDS303A Hair colour Skilling people for the industry Hair colour all theory and preparation for real skills transfer from mannequin activities
Getting Started With Mortgage MarketSmart We are excited that you are using Mortgage MarketSmart and hope that you will enjoy being one of its first users. This Getting Started guide is a work in progress,
Photoshop- Image Editing Opening a file: File Menu > Open Photoshop Workspace A: Menus B: Application Bar- view options, etc. C: Options bar- controls specific to the tool you are using at the time. D:
HUE: VALUE: THE BASICS OF COLOUR THEORY Hue is another word for colour, such as blue, red, yellow-green Distinguishes between the lightness (tint) and darkness (shade) of Colours. (TONE) CHROMA: The vibrancy
What is an exhibit? An exhibit is a visual representation of your research and interpretation of your topic's significance in history. Your exhibit will look a lot like a small version of an exhibit you
Visualization Quick Guide A best practice guide to help you find the right visualization for your data WHAT IS DOMO? Domo is a new form of business intelligence (BI) unlike anything before an executive
State of Nevada Ektron Content Management System (CMS) Basic Training Guide December 8, 2015 Table of Contents Logging In and Navigating to Your Website Folders... 1 Metadata What it is, How it Works...
5.16.2011 TM Branding & Design Standards Standards Are Strictly Enforced FIRST Logo Our logo consists of uniquely configured components, a composite graphic element, the triangle, circle and square, and
Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The
Making an Impact with your Poster Jan 2012 Contents 1. Introduction 2. Planning your Poster 4. Layout 6. Using Images and Graphs 9. Clear Use of Text 10. Using Colour Effectively 12. Help and Support 13.
Written by Jonathan Sachs Copyright 1996-1999 Digital Light & Color Introduction When using digital equipment to capture, store, modify and view photographic images, they must first be converted to a set
DIY RESOURCE KIT creating a brand Contents CREATING A LOGO 4 CREATING A LOGO 5 USE OF YOUR LOGO 6 EXAMPLES OF GOOD LOGOS 7 EXAMPLES OF BAD LOGOS 8 COLOUR MODELS 9 FONTS/TYPEFACES 10 CHOOSING BRAND IMAGES
DESIGNING A USER-FOCUSED EXPERIENCE HubSpot Design Certification Class 5 Kyle Geiste Experience Designer HubSpot Academy @kylegeiste TODAY S GOAL: You will be able to create templates that are optimized
DYI Visual Identity Guide for Nonprofits 1 Table ; Contents Intro... 3 The Logo... 4 The Colors...6 The Fonts/Typeface... 7 Consistency...8 About...8 2 This guide is for all the nonprofit executive directors
Florence School District #1 Training Module 2 Designing Lessons Designing Interactive SMART Board Lessons- Revised June 2009 1 Designing Interactive SMART Board Lessons Lesson activities need to be designed
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
Name: Light Waves and Matter Read from Lesson 2 of the Light Waves and Color chapter at The Physics Classroom: http://www.physicsclassroom.com/class/light/u12l2a.html MOP Connection: Light and Color: sublevel
Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint While it is, of course, possible to create a Research Day poster using a graphics editing programme such as Adobe
3 Ways Your Web Design Can Better Connect You to Your Audience by Rafal Tomal Feb 06 How do people recognize good web design? There is a big difference between good and bad design. Many people can identify
3D Data Visualization / Casey Reas Large scale data visualization offers the ability to see many data points at once. By providing more of the raw data for the viewer to consume, visualization hopes to
Startup Guide Version 2.3.9 Installation and initial setup Your welcome email included a link to download the ORBTR plugin. Save the software to your hard drive and log into the admin panel of your WordPress
SAS BI Dashboard 3.1 User s Guide The correct bibliographic citation for this manual is as follows: SAS Institute Inc. 2007. SAS BI Dashboard 3.1: User s Guide. Cary, NC: SAS Institute Inc. SAS BI Dashboard
Weebly.com First Steps Weebly is the easiest way to build your own website. The first thing you need to do is go to www.weebly.com to create an account. Then you will begin with the next steps. The Site
Creating Hyperlinks & Buttons Adobe DPS, InDesign CS6 1 Creating Hyperlinks & Buttons InDesign CS6 Hyperlinks panel overview You can create hyperlinks so that when you export to Adobe PDF or SWF in InDesign,
TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar
Coeliac Society of Ireland Brand Guidelines for Identity design The Logo The new Coeliac Society of Ireland logo illustrates its meaning by enlarging and extending the C of Coeliac to create a friendly
Excel -- Creating Charts The saying goes, A picture is worth a thousand words, and so true. Professional looking charts give visual enhancement to your statistics, fiscal reports or presentation. Excel
SmallBiz Dynamic Theme User Guide Table of Contents Introduction... 3 Create Your Website in Just 5 Minutes... 3 Before Your Installation Begins... 4 Installing the Small Biz Theme... 4 Customizing the
Geogrotesque Apache GOLD Adelle The Apache brand is no more and no less than the work we do every single day. WHAT ISN T A BRAND? A brand is not our name. It is not our logo. A brand is shorthand for the
Graphic Design Basics Shannon B. Neely Pacific Northwest National Laboratory Graphics and Multimedia Design Group The Design Grid What is a Design Grid? A series of horizontal and vertical lines that evenly