Rafal Tomal

Learn Design and Create Better Websites

  –  

100 Things Every Designer Needs to Know About People

This week’s tip is about one of my favorite design books. There are actually two editions:

“100 Things Every Designer Needs to Know About People,” and “100 MORE Things Every Designer Needs to Know About People.”.

Both books have a list of tips on how to make your design more appealing, engaging, and effective. I love its format because you can actually read one thing a day, and quickly learn something practical that can make you a better designer.

Every tip is supported with scientific research, so you can actually explore why it works this way.

You can find these and my other recommended books about design, creativity, and productivity here: https://www.amazon.com/shop/rafaltomal

  –  

“Apply to all” in Google Fonts

Finding that one right type in Google Fonts can take hours. There is a very cool little feature in Google Fonts that can help you speed up the process.

When you go to Google Fonts, click on the default text and change it to your own to preview the type:

Then, click the “Apply to all fonts” red link at the bottom and voilà:

I don’t know about you, but I had no idea you could do this in Google Fonts for a long time 🙂

  –  

How to learn new things

If you want to stay up-to-date with all new web design trends and technology, you need to learn new things all the time. Maybe you want to learn UX, Sketch, JavaScript, or SASS?

Here’s my advice: start slowly.

Don’t try to spend your entire weekend studying and endeavoring to learn the whole course at once. You may lose all of your motivation and enthusiasm after the first few hours.

  1. Find one reliable and organized source of information like a course or a book.
  2. Reserve 20-30 minutes in the morning and learn one new thing every day.
  3. Practice or repeat what you’ve learned during that day in your work.

Set a specific and action-focused goal. Instead of saying “My goal is to learn HTML/CSS in next 3 months,” say “My goal is to learn one new thing about HTML/CSS, Monday to Friday, from 8:30 do 9:00am.” Then mark it in your calendar and set a reminder.

30 minutes may not seem like much, but you won’t get tired. You’ll feel right about it, and you’ll give yourself space to process what you’ve learned.

Learn another thing the next day, and then another the next day, and then another… In a couple of weeks, you’ll learn a lot! It’s a more natural way to learn as you’ll be giving your brain more time to process, repeat, and practice what you’ve been learning.

  –  

Design for real people

Never forget who you’re designing for. There are real people sitting behind the screen that use your interface.

Get know your users better: who they are, what they feel, what problems they have, what they’re looking for, what they need.

Optimize your research into one or two typical users. Imagine they’re real people. Give them names and write short bios. Those are your personas. Focus on designing for them.

  –  

Use check marks instead of bullet points

Are you making a list of features or benefits of the product? Use checkmarks instead of bullet points. It’s effortless to do, but so effective in passing some positive emotions in your design. For example:

It’s best if the check mark icon is in green or your accent color. Try to avoid red because that would suggest something opposite.

If you don’t have icons, the easiest way is just to use HTML characters:


ul {
list-style: none;
}
ul li:before {
content: '\\2611\\0020';
}

It’s not beautiful but will be more effective than a standard bullet 🙂

  –  

Painting a picture

What does a painting have in common with designing a website?

Let’s say you want to paint a picture of a cat.

  1. Who are you making the cat picture for? Is it for kids? Is it for teenagers? Is it for adults? The style of your painting will significantly depend on who you’re doing it for, right?
  2. What is it for? Is it meant to be framed and hung on the wall? Is it going to be a huge wall art? Is it going to be a book illustration? This information will help you to determine what materials and drawing technique you want to use.
  3. Why are you painting a cat? Do you want to make people laugh? Is it just decorative? Is it to provoke and convey a message? Well, it’s good to know the purpose and goal of your painting.

It would be hard to create the right picture without all of the above information, right?

Who? What? Why?

Focus more on asking those three questions next time you design a website.

  –  

Write HTML/CSS faster

I hate writing HTML markup. I don’t write it that much these days like I used to, but still, sometimes we just have to type it in.

So, here’s my little secret weapon (well, not so secret anymore!): Emmet.

Emmet is a plugin to almost every known code editor that can help you speed up your HTML & CSS workflow. For example, you type in this:

#page>div.logo+ul#navigation>li*5>a{Item $}

Press your chosen shortcut key (I use OPTION+E) and Emmet converts it to:


<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>

Pretty sweet, huh?

It takes a bit of time to learn a new habit, but eventually, it becomes natural, and it’ll save you a lot of coding time.

Here’s a printable cheat sheet with all abbreviations: https://docs.emmet.io/cheat-sheet/

There are also so many other actions you can use on the code like moving your cursor between the closing and opening tag, merging multiple lines into one, or to comment out the entire block of code quickly.

  –  

Forget everything you know

Can you do it? Can you pretend you’re someone else and just forget everything you know? As a designer, you have to do it often.

If you just designed a new home page, take a break. Don’t look at it for a day or two, and then set a goal for yourself to achieve and pretend you’re someone else using your design.

That’s what user testing is for, but we don’t always have the resources to do it. So, learn to think like a user and continuously test and question your own design decisions.

  –  

Provide easy choices

People like to have a choice, but they don’t like to burn too many calories thinking about what choice to make. People want to feel confident and right about the decisions they made.

If you want to provide different plans for your product or service, make one of the options much better than the rest. It should be a no-brainer to pick.

  –  

Hidden features in Chrome Developer Tools

Since the Firebug plugin came out for Firefox, I have simply fallen in love with code inspectors. Google did an excellent job in Chrome by making it incredibly useful without overloading it with features.

It’s still powerful because a lot of its features are hidden. Here’s something I discovered a while ago, and I don’t even know how long it’s been there.

Go to your Developer Tools, and turn on the little device toolbar icon in the corner:

Hey, ok, it’s nothing new. It’s just the mobile preview of your site. But here’s a trick. Click the three dots in the upper right corner to see this hidden menu:

From here you can turn on media queries, rulers, and even device mockups which is pretty cool:

I also love the “Capture screenshot” and “Capture full-size screenshot” options which allowed me to remove some extra plugins I used for that.

  –  

Mindful plugin for Chrome

Mindful is like a simple notepad that opens up every time you start a new tab in Chrome. It’s great for quick notes and to-do lists. It automatically saves for you and it’s always there even when you close the browser.

The editing user experience is similar to Medium, so it’s very simple and intuitive.

Mindful

  –  

Never settle on your first design idea

Whatever you’re designing, never settle on the first idea you have. Draw 3 more sketches of the same feature. Duplicate the mockup you just did and try different layouts. Pick a few more typeface combinations and test them against your favorite choice.

Don’t go with too many ideas either. I usually find a good balance between 3 and 6 different concepts. Amazing things happen when you push yourself further.

  –  

Take quick animated screen captures

There is a very cool little app available for both Windows and Mac, called LICEcap. You can use it to select the chosen area on your screen and record a quick demo and save it as GIF.

I use it all the time to present my CSS animations or new UX interactions that simply can’t be described in words or shown on a static screenshot.

  –  

Change something once in a while

Change something in your workday once in a while. Rearrange furniture in your office, get a new gadget, upgrade your workstation, work in a coffee shop or a local library.

I usually don’t like changing my routines, but sometimes a small difference can change your perspective and inspire you.

It’s my cure for creative blocks and burnouts.

  –  

Match typefaces from the same family

If you want to match serif and sans-serif typefaces but are not sure which combinations are correct, you can always find two typefaces from the same family.

For example, “Freight Sans” typeface makes a really good match with “Freight Text” because both are created by the same designer and share some characteristics.

FreightText Pro

FreightSans Pro

Another good example is “PT Sans” with “PT Serif” or “PT Sans Narrow.” You basically can’t go wrong with those combinations.

  –  

Evenly distribute elements horizontally and vertically

It still amazes me how many designers never use this very cool feature. They’re available both in Sketch and Photoshop:

It lets you distribute selected elements evenly either horizontally or vertically. Just set the first and last element in the row and all other elements will align evenly for you.

  –  

Reload CSS plugin for Google Chrome

I’ve recently stumbled upon a very simple and useful Google Chrome plugin, Reload CSS, that lets you reload only CSS files without reloading the entire page.

Reload CSS

You can set a key shortcut and use it to quickly preview your CSS changes. It can save you a lot of time if you’re working on a live site or if you’re not sure the CSS is cached.

  –  

Organize your artboards in Sketch

You may already know that you can use the slash “/” character in Sketch for your Symbol or Text Style names to organize them in folders.

Did you know you can do the same in your artboard names?

Now, when you export your mockups, they’ll be saved in folders:

  –  

Pay attention to how you wrap the text

Don’t just let the text flow and fill the entire horizontal space you have. Pay attention to how the text wraps – especially in your headings, calls to action, and other important parts of your design.

Create a smooth shape and direct your user’s eyes toward the call to action:

… or just make it easier to read:

You can fix it by breaking the lines manually using <br /> tag or setting a max-width for the wrapper. For big headlines, you can manipulate the font size or change the letter-spacing to achieve the desired effect.

  –  

Save your CSS changes right in the Google Chrome inspector

A big part of my CSS code is written in the developer tools in Google Chrome. I love the idea of editing the CSS and being able to preview all of my modifications immediately in the browser.

Did you know you can save all local CSS file changes right from the source code editor in the developer tools? You don’t have to copy your changes to your code editor and save it there.

It’s very simple. Next time you work on a local site and use developers tools, go to the “Sources” tab and open the CSS file you want to edit. Then right click on the tab and choose “Add folder to workspace.”

Add folder to workspace in Google Chrome

Choose your local folder where the CSS files you’re editing are located and now your files in the developer tools are associated with your local files (you’ll see a little green dot).

Now, every time you edit the source code you can click “Command + S” and save your code changes. Also, if you edit your CSS in your regular editor and you save the file, the changes will update in your Chrome without refreshing the page. Nice, huh?