Headlines can suffer from wordiness — you also want these parts of your text to be as short and clear as possible to aid understanding and keep up excitement. For a better user experience, shorten andclarify your headlines and also make sure that they’re exciting and talk benefits for your reader.
INTRODUCTION TO) BUILDING
likely that thevisitor will want to explore my website further.
If you’re writing headlines that introduce a product or are designed to draw attention, make sure you write them ina way that showcasesthe benefits of the product rather than just describing whatthe productdoes.
Changeslike this can drastically affect your bottom line. In a study by webprofits (hellobks.com/hwd/47), changing the
Real-life examples
Backto ourlittle widget! After learning about these content principles, we can update the contentsignificantly:
SEND ME FREE INFO.
DOWNLOAD
We've both shortened the content, added somestrategic bolding, and updated the headline to be a bit more exciting, talking benefits, not details. The form itselfhas been updated toa more friendly, human-soundingsentence, and the button has been updated from a simple “Download” to a more actionable-sounding “Send mefree info.” All in all, these updates should makethe widgeteasier to read, understand, anduseat a glance.
22 minsleft in book 47%
Content might not initially feel like a part of design, but it really, really is huge. Content, writing, and words define how your design (especially web-focused design) will be consumed, so make sure that you spend someofyour design time working on improving your content and writing.
In short, cut down and clarify your content as much as possible. Keep your paragraphsto twoto three sentences.
Make sure your content work extends to your headlines as well. Ifyour headlines introduce a page or product, make sure the headline talks about how the pageor productaffects the
Next up, we're goingto talk user experience!
22 minsleft in book 48%
2.7
User Experience
THIS IS THE SECTION THAT TIES EVERYTHING TOGETHER.All your work to make your designs enjoyable and easy to look at, your content short and easy to parse, your layouts easy to understand — all these conceptstie into your user experience.
User experience (UX) is the overall experience a user has when using your website — the most important part of design.
Let’s break downtheparts of user experience:
Before designing
Before you can even begin design work, you should be able to answer a few primary questions: Whois yourideal user?
Whatis their personal goal? What are your business goals?
User experienceresearch can help answerthese questions.
For example, someonevisiting your personal website could be looking for more information about your work and what you do (their personal goal); your business goal could beto sign them upfor your personal newsletter.
Or, for a webpagefor a new iPhoneapp, your user would be looking for information about your app and how to download it; your business goal would be to get as many downloads as possible.
We're looking at two things: whether the customer is achieving what they want to achieve, and youre achieving
21 minsleft in book 49%
your business goals. Hopefully your design achieves both.
You may not needto do user experience research for a small personal project, but there are somethings you can doin the pre-design phaseofbig, importantprojects to help figure out your users andtheir goals.
Competitive analysis
Ina nutshell, look at your competitors and analyze what they do well and notso well.
Chapter 3.1. Finding Inspiration goes over howto look at websites and pick out ideas and things you can implementin your owndesign. Looking at competitors is a crucial part of creating yoursite’s user experience — it gives you a standard for comparison and helps you create a user experience superior to that of your competitors in order to lure their customers away.
Surveys and interviews
How will you learn what your customers want and need if you don’t ask them?A lot ofweb designersfall into the trap of designingfor folks that they don’t understand. For example, designing a weddingplanning app if you haven't planned a wedding yourself. You might have somethoughts andideas about what a person planning their wedding needs, but you may make someincorrect assumptions unless you actually talk to someoneplanningtheir wedding.
You wantto have a goodfeel for what your ideal user wants and needs from your design. Having this knowledgewill help you design better, so the customer can achieve what they want, which should translate to you achieving more of your owngoals.
21 minsleft in book 49%
During the design process
Wireframes, prototypes, and usability testing
Wireframes and prototypes are fast, low-fidelity mockups of your design. Usability testing allows you to get feedback on layouts and interactions before you move forward with building the design in full. These concepts will be examined morein Chapter 3.3. Prototypes.
You don’t want to spend the time implementing a design in code and thenfind out that folks are confused by a specific process or flow on your website (for example, the steps someonemighttake to buy an item).
Wireframesand prototypesallow youto build quick and dirty mockupsof your design and take them to others to get their feedback, learning whetheryour layout and flow makesense.
Research showsthat you can find and addressbig usability issues with a low-fidelity paper prototype just as easily as you can with a high-fidelity screen prototype. Save yourself valuable timebytesting your layouts andflowsearly on.
After launching your design
Metrics/analytics, usability testing, and A/B testing
Oncea design is launched, we need to track whether we’re actually meeting our goals. Howis our conversion rate? Do we have a low enough bouncerate, the percentage ofpeople who immediately leave a website after loading? Are we getting good customer feedback?
A crucial part of user experience is making sure we use appropriate analytics packages (such as Google Analytics (hellobks.com/hwd/48) to collect data on how well our 20 minsleft in book 50%
website is working after launch.
A/B testing is the process of testing a design change against your current website — suchastesting twodifferent versions of a headline, and seeing which version increases the amount of people achieving a goal, such as buying a product. These tests can be run after launch to continuously improve how well our designs are working.
Usability testing is the process of showing your designs to othersto solicit feedback and ensure your websiteis usable by folks other than yourself, and we'll cover that in Chapter 3.3.
GettingFeedback.
Shortcuts
Makedesired actions easy tofind and use
‘Submitbuttonsforformsare important(as we talked aboutin
the last chapter!) On theleft, the button mightbe abit too hard to
‘find. Therightbuttonis easier tofind and use.
Whatever you want youruser to do, makesure the steps to complete that action are easytofind and straightforward to use.
It makes nosense for your “submit” button to be plain and hard to see — a bright button stands out and makes forms easier to submit.
20 minsleft in book 51%
Ibelieve folks who knowbit Ibelieve folks who knowbit aa
aboutdesignwill be more aboutdesignwill be more
likely to hire a professional likely to hire a professional designerwhenthetimeis designerwhenthe timeis right. I'ma designer, and oe right. I'ma designer, and evenI hire designersfor even I hiredesignersfor thingsbiggerthan me. Andif thingsbigger than me.
youagree,you should join
mynewsletter. Ifyou agree, you should
join my newsletter.
email address
Ifyou wantsomeoneto sign upforyour newsletter, don’t hide the link inyourcontent. Pushit out and makeit visible.
Newsletter signup links shouldn't be hidden in the content (rememberwhat wesaid about skimmers). Move them into their ownline to make them easiertosee.
Pay attention to website size
A slow-downloading website will prompt people to leave withoutseeingit. Pay attention to thingslike imagesize (with large screens and fast downloads at the norm at home,it’s easy to forget that a lot of folks still browse websites on cell phoneswith poorreception or coffee shops with overloaded WiFi) and JavaScript (downloadinglotsofscripts will slow a website down,as will slow-performingscripts).
Makesure to check your website in multiple browsers using multiple sizes and multiple download speeds to makesureit loads quickly.
Runusability tests
We'll go over this more in depth in Chapter 3.5. Getting Feedback. Essentially, show your designs to others and get their feedback, as hard as that mightfeel. As designers, we’re naturally blind to problemsin our design,so it’s crucialto get moteeyesonit to find thoseissues.
19 minsleft in book 52%
Include analytics
Make sure to include analytics-tracking software in your designs so you can see how your design is performing after launch. At the very least, Google Analytics (hellobks.com/
hwd/48) or something like Segment(hellobks.com/hwd/49) that you can tie in Google Analytics and other analytics platforms.
Real-life examples
Going back to our widget, we can see that our download buttonis a bright, easy to see color. Users aren’t going to be confused about how to submitwiththis!
email address
DOWNLOAD
User experience is one of those things that’s hard to show in a book. Rememberthat you should do your bestto try to understand your audience, pay attention to your pages and how a person moves between them (and makesure that’s
19 minsleft in book 53%
easy to do), get feedback from your designs from outside sources, and pay attention to how well your design is doing after launch.
Congratsonfinishingthis section!
19 minsleft in book 54%
2.8
Images and Imagery
SO FAR WE'VE BEEN WORKING SOLELY WITH LINES, boxes, and text for your designs, but images (and imagery like icons and graphics) can play a huge part. We're going to cover places to find images to use for your project and some guidelines on using those images.
First off, let’s cover royalties and licensing. As easyasit is to right-click and “save as” almost any image you find on the internet, you can’t just use anything you find in your own work. Images have copyright protections and re-using an imagecreated by someoneelse without permissionisillegal.
Anoverview ofterms you should keep an eyeoutfor:
-Rights-managed images: Should include additional termsindicating allowable usesfor the image.
- Royalty-free images: Generally you can use the image as long as you correspondto the termsof the image. For example, a lot of royalty-free images can only be used in not-for-profit contexts, meaning you cannot use them for any application in which you could potentially make money.
+Creative commons: A system created for content creators to allow their work to be used without requiring express permission. Creative commonsimages can be licensed in manydifferent ways, from requiring attribution, denying derivatives (you can't alter the imageyourself), prohibiting commercialuse,or allowing any use.
18 minsleft in book 55%
If an image doesn’t specify that you canuseit, then you are not allowedto useitfor your project. The vast majority of the world has adopted the Berne Convention, which states that copyrights are granted to the author by default — evenif not specified. You don’t actually needto putlittle copyright notice footers on your website!
Don’t feel like you’re required to use photos or icons
Don’t fret that you need to use photos of people in your designs. Type and screenshotsof your product can go a long way.
DARINE FIRFBAIL
. Daring Fireball Turns 15
enn eee nenn đit to u86 đai pr
J1 171.7..
`RES FEED Ý atd
eas corte ao not lneluding the entry Húøs:
CEES Seeroaword(1,190; coe Induding blockquote9)
ee eee
John Gruber's DaringFireball (http://hellobks.com/hwd/50)website.
By playing with typography — usingdifferent fonts and styles
— you can create a beautiful and clean website without needingto fuss with images.
If you’re building a product for the web, the website for that product doesn’t need much morethanscreenshots.
18 minsleft in book 55%
T4S ome Mowitnons What yougel whetweuse Meng Logi
Researcha project market in just 7 seconds
TheTest4Startup (http://hellobks.com/hwd/51) website is clean,
featuringscreenshots of theirproduct.
You can always add images and imagery later — starting out with a clean, text-based website could help you launchfaster withoutnitpicking overthesedetails.
Faces are powerful
PRICING DESIGN
Dan Mall’s personalwebsite (http://hellobks.com/hwd/52). Dan's photo
draws the eye, andhisgaze leads us to the introduction text.
Happy faces provoke happy emotions; angry faces provoke angry emotions. You can use a face in your design to emphasize the emotion you want and draw the eye to the
18 minsleft in book 56%
most important part of the page. This is a powerful tool in your design toolbox.
Pay attentiontofile size
Imagescaneasily bloat a website’s size very quickly, leading to slower download times and frustrated users who don’t stick around. Additionally, more screensare goingretina with higherresolutions, with smaller pixels leading to more crisp displays — making photos and imagesatthe old resolution look blurry.
Someprinciples to keep in mind:
+ Make sure your images are the maximum necessary size. No sense in putting a 2000px imageinto a 1200px box.
-Provide retina and non-retina images. Set up your HTML and CSS so folks using a retina screen can download the more detailed, higher-resolution images, and those on a traditional screen will get the smaller images with no wasted pixels. This is a great guide on doingso: hellobks.com/hwd/54
Bewareofstock photos thatfeel like stock photos
17 minsleft in book 57%
iStock (http://hellobks.com/hwd/53) has a lot ofstock imagesto go through, but beware of images thatfeel overly posed and unnatural.
Searching for “stock photos” on Google will get you to multiple websites that purportto offer a lot of great options you can use(paid andfree), but there are a whole lot of low- quality images. Take a look at someofthe giant websiteslike iStock (above), but try to find images that feel more natural than the example image (digital constructionin the future!)
Icons
While images are great for backgrounds andbig elements, icons are more like supporting characters — little graphics that support your content and design. You don’t needicons, but they can make your design feel unique.
17 minsleft in book 57%
We're tired of Te}
Wejust wantto code.
Ranked completionsCE)
TheiconsonKite’s website (http://hellobks.com/hwd/55) are simple buteffective.laác
Icons support information absorption by creating a graphical representation of content. The Stripe website uses icons effectively to draw the eye to the three columnsof features using abstract representations ofthe content.
Of course, this is also a place you need to pay attention to licensing.Just like photos, icons are copyrighted.
Shortcuts
Stock photo websites
Unsplash
Cite by the word's most generous community ofphotographers.
‘Trending
Unsplash (http://hellobks.com/hwd/56) is agreatsource for natural-lookingimages.
17 minsleft in book 58%
PhotoPin (http://hellobks.com/hwd/57)searches Flickr forCreative Commons images.
OtOS
Other stock photo websites include IM Free (hellobks.com/hwd/60), picjumbo (hellobks.com/hwd/61), iStock (hellobks.com/hwd/62), Gratisography(hellobks.com/
hwd/63), and PhotoPin (hellobks.com/hwd/57).
Imagery (Icons, graphics, andillustrations)
ay
Icons for everything
@ Searchfor anything
1,026,090
ORE HaeXe c©#9G - #w#z+t
Dee OE er E° SOs 8 1 og
The NounProject (http://hellobks.com/hwd/58) includes lots ofdifferent Creative Commons iconsyoucanuseinyourprojects.
17 minsleft in book 59%
Explore The Marketplace(Get spre tobus your business
eB
đ-sam TAY Zz
! tec ty\ ans
. =—
Need anicon designed?Try something like Fiverr (http://hellobks.com/hwd/59)
To addthatlittle special touch to your designs using icons, try either websites with pre-designed icons (like The Noun Project, (hellobks.com/hwd/58) or get them custom designed for you (through websiteslike Fiverr (hellobks.com/hwd/59) and Upwork (hellobks.com/hwd/64).
Real-life examples
Appcanary¿ Xa HH nan Cooma V4sema[LRB) im Stop worrying about security patches.
Appcanary monitors your apps and servers, andnotifies you wheneveryou're vulnerable.
Try usforfree:
Get started
16 minsleft in book 59%
Agent Check API Monitor API
(Our agentstayswith Checkwith us Let us knowwhenever your servers and checks wheneveryou runtests, you deploy and we'll
up on them regularly. ‘or submit pull requests. notifyyou later.
The AppCanary website (hellobks.com/hwd/65) is a great example ofa text-and-screenshot website that is very simple but effective. They use fun illustrations in their design — something that you wouldn’t normally see on a tech-focused website, which makestheir website stand out.
Next up, we’re going to cover some random and fun design tidbits that didn’tfit into theseearlier sections.
16 minsleft in book 60%
2.9
Extra Tidbits
LET’S WRAP UP THIS CHAPTERbygoing over some fun design tidbits. This section is a catchall for some things we covered a bit of in earlier sections and somethat didn’t fit perfectly in one category;all should be interesting and will add a bit of spice into your design work.
Start simple
Appcanary’s website (http://hellobks.com/hwd/65) ismmm REN
‘flat, simple, andvery effective.
When youre starting out, deliberately choosing simple interfaces and designs will make your life easier. Simple layouts, simple user experience (UI), simple UX might make youfeel boring (you're not!), but they are effective and easier for newbies to wrangle.
Don’t be ashamed to start out small — after all, you can always add more elements or redesign after your first
16 minsleft in book 60%
iteration.
Consider the “rule of thirds”
The rule ofthirds, Points of interest aren’t centered—rather, points ofinterest
=P
are placed along the “third’s” intersectionsfor moreinteresting layouts.
This concept is usually applied in photography. Centering an object in a photograph makes the photograph feel boring.
Instead, divide the image horizontally and vertically into thirds; the intersectionsoftheselines are great guidelines for placing points ofinterest, creating photos that are visually moreinteresting.
16 minsleft in book 61%
iq Gils For today's co}fiUKEFS.
Comovee's website background (http://hellobks.com/
hwd/66) uses the rule ofthirds.
This also can apply to web design — oneof the reasons why a three columnwebsite design is visually appealing. You can also place your background images and important features (such as faces) alongtheselines.
Again, this is another rule that can (and often should be) broken,butit’s a good conceptto keep in mind.
Avoid pure black
Pure black — which doesn’t occur in nature — can make your design feel stark and unnatural. Instead, use something not quite black; in hexadecimal, somethinglike #222222 is great for headlines and #444444fortext, rather than #000000. You can also use the RGBA property in CSS (color: rgba(0, 0,
0, 0.2);)so your text darkens the background color rather
than using puregrey.
Whiteis less affected by this feeling of starkness, butit still could be worthwhile to play with using almost-white in your designs.
16 minsleft in book 61%
Lighting should come from above
iladdress
Litfromabove, the buttonfeels like it’spoppingout naturallyfrom thepage.
il address
The button looks unnatural whenlitfrom below.
If you're adding shadows or gradients to your design elements,set it up so that it lookslike it’s been lit head-on or from above. Objects lit from below look unnatural, as we’re usedto light normally coming from above(the sun, overhead lights,etc.)
Contrast highlights what’s important
Location: =
= Map Satelite \) Nearest metro areasfine, too.
a Company phone (optional):
Website URL:
15 minsleft in book 62%