Your Website Sucks. (And You're Awesome.)


Published on

The (full colour!) workbook for the workshop "Your Website Sucks. (And You're Awesome.)" for World Domination Summit 2012.

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Your Website Sucks. (And You're Awesome.)

  1. 1. your website sucks. and you’re awesome. For reals. And don’t you forget it! World Domination Summit 2012
  2. 2. This Workbook Belongs to the Fantabulous: {Your Name} who just happens to be: {Insert Awesomized Title Here}
  3. 3. Section One: Your Core Values. Boo-ya.Chances are, you’ve discovered what your core valuesare time and time again.You’ve done the worksheets. You’ve gone through coaching (or are a coach!) to discoveryour innermost workings.And that’s rockin’.But they don’t mean anything in the context of your website if you’re ignoring them whenselecting colour palettes, texture, patterns, and typography. In fact, by ignoring (or under-utilizing) them, you’re doing your site a pretty enormous disservice. The context getscompletely lost. Or, worse, it’s fucked five ways to next Saturday. (Gasp. FUBAR, even!)So, we’re going to take a few minutes to work through your core values. First, you’regoing to take a look at the (very) long list of core values that I’ve provided and select yourtop twenty. Second, you’re going to ask yourself a few key questions to drive down thosecore values to your top ten. And finally, for the sake of your visual language’s simplicity,you’ll narrow it down to five.Read on, you crazy diamond.
  4. 4. Write down 20 values in the space below. Choose what feels good to you. Go with yourgut. First instinct. Don’t edit. Remember to use the Big Shiny List that’s at the endof this section!1 2 3 4 5 6 7 8 9 10 11 12 13 14
  5. 5. 15 16 17 18 19 20
  6. 6. From the list of words above, choose the ten values that are most important toyou. You’re not losing pieces of yourself, sweetness. You’re merely prioritizing one overthe other. It’s important when you piece together your visual language.Assign numbers to your Top Ten. Doesn’t need to be ordered. It’s just how we’re going tokeep track of who’s in the final five.Why did you choose those ten over the other? From the list of 10, choose only 5 of the most important. You can mark them withcheckmarks, just for the sake of posterity.Why did you choose those five over the other?
  7. 7. From the list of 5 reduce to 3 values, if you can. If you can’t, that’s cool too!Why are these your final choice? If you managed to get to the final three, you’re friggen amazing! It took me years to get tomy final three. (Seriously. If you only knew.) List ‘em here.1. 2. 3.
  8. 8. The Big Shiny List o’ ValuesAbundance Audacity Cleanliness CraftinessAcceptance Availability Clear-mindedness CreativityAccessibility Awareness Cleverness CredibilityAccomplishment Awe Closeness CunningAccuracy Balance Comfort CuriosityAchievement Beauty Commitment DaringAcknowledgement Being the best Compassion DecisivenessActiveness Belonging Completion DecorumAdaptability Benevolence Composure DeferenceAdoration Bliss Concentration DelightAdroitness Boldness Confidence DependabilityAdventure Bravery Conformity DepthAffection Brilliance Congruency DesireAffluence Buoyancy Connection DeterminationAggressiveness Calmness Consciousness DevotionAgility Camaraderie Consistency DevoutnessAlertness Candor Contentment DexterityAltruism Capability Continuity DignityAmbition Care Contribution DiligenceAmusement Carefulness Control DirectionAnticipation Celebrity Conviction DirectnessAppreciation Certainty Conviviality DisciplineApproachability Challenge Coolness DiscoveryArticulacy Charity Cooperation DiscretionAssertiveness Charm Cordiality DiversityAssurance Chastity Correctness DominanceAttentiveness Cheerfulness Courage DreamingAttractiveness Clarity Courtesy Drive
  9. 9. Duty Fascination Helpfulness KindnessDynamism Fashion Heroism KnowledgeEagerness Fearlessness Holiness LeadershipEconomy Ferocity Honesty LearningEcstasy Fidelity Honor LiberationEducation Fierceness Hopefulness LibertyEffectiveness Financial Hospitality LivelinessEfficiency independence Humility LogicElation Firmness Humor LongevityElegance Fitness Hygiene LoveEmpathy Flexibility Imagination LoyaltyEncouragement Flow Impact MajestyEndurance Fluency Impartiality Making a differenceEnergy Focus Independence MasteryEnjoyment Fortitude Industry MaturityEntertainment Frankness Ingenuity MeeknessEnthusiasm Freedom Inquisitiveness MellownessExcellence Friendliness Insightfulness MeticulousnessExcitement Frugality Inspiration MindfulnessExhilaration Fun Integrity ModestyExpectancy Gallantry Intelligence MotivationExpediency Generosity Intensity MysteriousnessExperience Gentility Intimacy NeatnessExpertise Giving Intrepidness NerveExploration Grace Introversion ObedienceExpressiveness Gratitude Intuition Open-mindednessExtravagance Gregariousness Intuitiveness OpennessExtroversion Growth Inventiveness OptimismExuberance Guidance Investing OrderFairness Happiness Joy OrganizationFaith Harmony Judiciousness OriginalityFame Health Justice OutlandishnessFamily Heart Keenness Outrageousness
  10. 10. Passion Recognition Shrewdness TimelinessPeace Recreation Significance TraditionalismPerceptiveness Refinement Silence TranquilityPerfection Reflection Silliness TranscendencePerkiness Relaxation Simplicity TrustPerseverance Reliability Sincerity TrustworthinessPersistence Religiousness Skillfulness TruthPersuasiveness Resilience Solidarity UnderstandingPhilanthropy Resolution Solitude UnflappabilityPiety Resolve Soundness UniquenessPlayfulness Resourcefulness Speed UnityPleasantness Respect Spirit UsefulnessPleasure Rest Spirituality UtilityPoise Restraint Spontaneity ValorPolish Reverence Spunk VarietyPopularity Richness Stability VictoryPotency Rigor Stealth VigorPower Sacredness Stillness VirtuePracticality Sacrifice Strength VisionPragmatism Sagacity Structure VitalityPrecision Saintliness Success VivacityPreparedness Sanguinity Support WarmthPresence Satisfaction Supremacy WatchfulnessPrivacy Security Surprise WealthProactivity Self-control Sympathy WillfulnessProfessionalism Selflessness Synergy WillingnessProsperity Self-reliance Teamwork WinningPrudence Sensitivity Temperance WisdomPunctuality Sensuality Thankfulness WittinessPurity Serenity Thoroughness WonderRealism Service Thoughtfulness YouthfulnessReason Sexuality Thrift ZealReasonableness Sharing Tidiness
  11. 11. Section Two: Metaphorically SpeakingYou wouldn’t think that metaphors would have any placein designing your website, amirite?I used to think the same thing — it was all Photoshop and slicing for HTML back in theearly days. When I discovered the power of metaphors, let alone visual metaphors, it wasa game changer.Bet you a tattoo that it’ll be a game changer for your website, too.In this section, we’re going to explore written language in order to craft your visual language.First: word and concept association — whatever you think of when you look at your corevalues, you write that down. No editing!Second: we’ll take the word and concept association and translate them into visuals. Tasty,tasty visuals.
  12. 12. a few things that come to mindCore value: Leads me to thinking about: Core value: Leads me to thinking about: Core value: Leads me to thinking about: Core value: Leads me to thinking about:
  13. 13. Core value: Leads me to thinking about: Visually SpeakingCore value: A few visuals: Core value: A few visuals: Core value: A few visuals:
  14. 14. Core value: A few visuals: Core value: A few visuals:
  15. 15. Section Three: Your Website’s FeelingsYour website has feelings — real, palpable emotions thatare conveyed through colour, typography, layout style,and writing voice.When I first started designing websites, I never thought about its feelings or the contextbehind it. It was just an artistic expression of colour, type, and pattern. Sometimes, I couldjustify why I was doing something. Most often, I couldn’t.By taking emotional context into consideration, your website will be able to engage yourPerfect People. But before we get into the juiciness of colour, type, pattern, layout, and allthat visual jazz... we need to create a visual representation of how you want your websiteto feel.And we’ll do that with pictures. Yay pictures!However, since we’re at WDS and I couldn’t carry 100+ magazines with me across theborder (well, on the train, really), we’re going to have to skip this portion. However, whenyou get home (or back to your hotel room, even), use your core values to drum up yourwebsite’s mood board. Pinterest is a helluva tool, as is and good ol’ papercutting and pasting. True story.When you’re finished, keep that representation close at hand when you’re ready to getyour hands on the website. It’s pretty damn crucial.
  16. 16. Section Four: Colour You AwesomeColours are an evocative method of communication thatoften happens on a subconscious level.We all know basic colour theory. Elementary school art class was an excellent provider ofglue, glitter, and the egregiously useful colour wheel. We’re taught that red, yellow, andblue make up the primary colours while orange, green, and purple make up the secondarycolours; all the other colours (like indigo, magenta, and sea-foam) are considered tertiary.Personally, I loved learning about colour when I was little. It helped me understand why mymother didn’t want me wearing certain colours together. Something about it hurting hereyes didn’t really persuade me not to pair purple, blue, and orange; it seemed perfectlyrational to be bright until I learned that there was an actual science behind colour.Colours and their meanings has also been something of a hot topic for me. They permeateevery culture in a variety of ways. In one culture, white may suggest purity and innocence. Inanother, it means death. And while cultural connotation is just one way of gauging colour,it’s often the most effective.It provides perspective. If your target market is a particular cultural heritage, then adheringto that culture’s perception of colour is very important. It also acts as the backbone of youridentity; as a visual representation of who you are and what you do.When people ask you about your favourite colours, do you know why they’re your favourites?
  17. 17. An introduction to colour psychology White: purity, innocence, and perfection. White is also used lots for charities and non-profit organizations to denote something good and positive. Black: power, elegance, and wealth. Black is a staple of many designs as it makes a bold statement. That and it’s damn good as a colour for content. Green: nature, growth, and harmony. Green is often used in medical logos, as well as eco-friendly products. In web design, it attracts youthful audiences. Blue: calm, creativity, and intelligence. Blue is reminiscent of Earth and water. It’s beautiful and tranquil. If you’re selling food, avoid this colour as it suppresses appetite. Purple: prestige, royalty, and luxury. It combines the tranquility of blue with the passion and energy of red. It’s often used in children’s products. Red: passion, pride, and strength. Red increases enthusiasm and energy. It also encourages action and confidence. Use red to draw attention to elements. Orange: youth, warmth, and fun. Orange is a polarizing colour that people either love or hate. It stimulates appetite and mental activity. Yellow: optimism, enlightenment, and happiness. Yellow stimulates creativity and encourages communication.
  18. 18. All About theAll about the colour wheel! Colour WheelChances are good that you’re familiar with the colour wheel. It’s a visual representationof primary, secondary, and tertiary colours within the colour spectrum. The wheel is anexcellent tool to find which colours play nicely with others.If my mama had used a colour wheel to demonstrate why that rather lurid combination ofcolours I so enjoyed was oh-so-wrong... I might’ve spared myself the tears and angst overnothin’.I still think I looked like a fashion supastar.Childhood colour faux pas aside, the colour wheel’s power is indisputable. You canchoose your dominant colour, run your finger along the wheel, and find its neighbours, itsopposites, and a whole lot of visual harmony in the process.
  19. 19. There are five major colour schemes: monochromatic, analogous, complementary, splitcomplementary, and triadic.Monochromatic: all colours fall into the same group. There is an unquestionable eleganceto using all of one colour, whatever that colour may be. It’s clean and minimalist.Analogous: uses colours that are adjacent to one another on the colour wheel. Onecolour is chosen as dominant, while the others enrich the palette. Although similar to themonochromatic scheme, an analogous scheme is far more powerful.Complementary: uses colours that are on opposite ends of the colour wheel. It createsstrong tension through high contrast. It’s high energy and bold.Split Complementary: a variation of the complementary colour scheme. It uses andadditional contrasting colour to the dominant colour, which maintains the high contrastwithout the tension. It’s not exactly demure but it does lend itself well to brands that arebold without being overly energetic.Triadic: uses three colours equally spaced around the colour wheel. It creates harmony,balance, and visual contrast. The triadic scheme is incredibly popular amongst artists andcreatives for the options that it presents.
  20. 20. My Ideal ColoursColour Name Reasoning
  21. 21. Section Five: Sweet, sweet typographyEver notice how something totally heinous can lookperfectly harmless with the right typeface? Imagine whatit can do for your awesome self!There’s far too much stock typography going on around the internet. I’m a huge fan ofHelvetica and Georgia but with the advances in type on the web, we need to be branchingout and choosing some different typefaces that really represent our core values.(If Geogia or Helvetica really do represent you, do it up! Otherwise, look elsewhere.)We’re going to go through the different classifications of type, excluding the more esotericones (like humanist serifs — no need to get into that, unless you’re already a typophile, likeyours truly.) Once you’ve got a good grasp on that, I’ll show you how to find your perfecttypeface and then how to pick complementary type.Oh, it’s on. This is one of the best bits!
  22. 22. Typeface Classifcation. Woo!Let’s introduce you to the three different kinds of typefaces. Classification is handy.Serif. Serif. Serif. Serif.All serif typefaces fall into four categories: Old Style (Garamond), Transitional (TimesNew Roman), Modern (Bodini), and Slab (Museo). Serifs are recognizable by their “serifs”— the ligatures have extra bits in contrast with...Sans-Serif. Sans-Serif. Sans-Serif.Just as its name suggests, sans-serif typefaces are bereft of the serif ligatures. These fallinto three categories: Geometric (Futura), Grotesk (Akzidenz Grotesk), and Humanist(Helvetica).Script. Script.Just as it sounds, script is usually either formal calligraphy (Aphrodite) or handwritten(Nothing You Could Do) typefaces. Well-crafted scripts are both scalable and readable.There are seven other type classifications but let’s not get carried away. These are the bestso let’s stick to it and figure out how to choose the right one.
  23. 23. Choosing the “One”. (Ones?)Now that we’ve determined what kinds of typefaces there are, how the hell do you getaround to choosing which one is going to work with your site? Flip back to your chosencore values. Remember: these are the emotions that you’re looking to convey in yourdigital realm — don’t run off into outer space on us.Each typeface has a personality that’s aching to be revealed.Let’s say that your core values are: joy, patience, and community.Joy means that we need a vibrant typeface that makes us smile from ear to ear. Patienceneeds more temperance — something that allows us to sigh deeply. And finally, communitybrings it all together. Joyful — CassiaWhat do you feel when you look at Cassia? If it’s Joy, then we did our job. Are you smiling?I sure hope so! (Do you need a hug? Those are free.)Now that we’ve got our Joyful typeface, we need something to pair with it. So let’s get intohow to pair typefaces the right way. (Because yes, there is a not-so-right way.)
  24. 24. Complementary ExcellenceThe one thing to remember when pairing typefaces is to keep one thing consistent andlet one thing vary.There are a number of ways to tackle this. (Big thank you to H&FJ for these examples!)Use typefaces with complementary moods to evoke anenergetic, upbeat air.It’s the interplay between fonts that gives them energy. The more distant the moods in ayour chosen typefaces, the spicier the design will be. Here, three fonts with distinctivesilhouettes have been chosen for their contrasting dispositions: the unabashed toughnessof Tungsten is a foil for both Archer’s sweetness, and the cheekiness of Gotham Rounded.
  25. 25. Mix typefaces from the same historical period whosefamilies have different features.Three type families with nineteenth century roots, thrown together in a cheerful typographicriot. Choosing type families with different features helps prevent redundancy: here, thebrawny variations of The Proteus Project are reserved for headings, Sentinel’s six weightsof romans and italics recommend it to text, and Knockout’s nine different widths helps thesans-serif fill in the cracks.Mix typefaces with similar proportions and give each adifferent role.
  26. 26. Cassia needs a friend (or two) in the form of a typeface.Let’s choose one that fits our values and the uses thetechniques we just learned.Refresher for our core values: joy, patience, and community.Cassia: cheeky, joyful, irreverantGeosans: wise, calm, patientWe’ve used complementary moods as well as an obvious contrasting pairing of serif andsans-serif typefaces. Cassia satisfies our need for joy and irreverance. Geosans exercisestemperance and contemplates quietly.Although we don’t have time for you to run online and find your perfect type, take a fewminutes (an hour, if you’re already a typophile) to check out the selection, which is my font search engine of choice.My TypefacesPrimary Typeface: Complementary:
  27. 27. Section Six:Texture, Pattern, & Visual GoodiesNot everyone loves texture or pattern. In fact, I know some people that are downrightallergic to such things. They prefer minimalist approaches and, y’know what, if you fitinto that camp, you can ignore this section. Why? Because there’s no sense in forcing it,sweetness.For those of us that love texture and pattern, let’s see some examples. Remember that ourcore values are still: joy, patience, and community. Joy! Patience. Community.See what I did there? So can you. There are plenty of royalty-free texture and stock-photography places on the interwebs. I suggest you go and ask the Wise Sage known asGoogle for the best ones.