Rafal Tomal

Learn Design and Create Better Websites

  –  

Start designing in grayscale

I start most of my designs in grayscale and I add colors later. It helps me to focus on the context, form, the right contrast and visual balance. Also, having the grayscale as a base makes it easier to apply colors from the chosen palette later.

For example, see my logo design concepts for simple.money magazine in grayscale first and with applied colors later:

Wireframes could be just black and white, but by using grayscale I can simulate the actual color tones and get a better preview of the final design.

See below one of my design’s wireframe and the actual mockup side by side:

  –  

Plan your vertical space

When you’re designing the vertical space between sections of your website, consider the screen size you’re designing for. Ideally, the vertical space should be flexible and responsive to the window height (try % spacing or viewport-percentage lengths).

If you want users to focus on something and take action, you may want to leave more space around it so there are no distractions visible in the area of their peripheral vision.

If you want users to scroll and explore the page, you can reduce the space between the sections or show a part of the next section at the bottom of the screen.

For example, when you design the home page, you can leave a part of the next section right above the fold to avoid the “illusion of completeness” – your visitors can’t help but scroll down to see what’s next.

  –  

Show respect to your own work

We want everyone to respect our work, but do we show ourselves respect in our own words? When I communicate with my clients, I try to avoid expressions that would underestimate my work.

For example, I’ve heard designers say, “I’ll play more with this page layout and will send you the update…” Perhaps we want to show that this work is fun to us, but for your clients it may seem like you’re not treating it seriously. It would be better to use, “I’ll work on it…” instead.

Another example would be saying, “It’ll take me only 5 minutes.” Of course, it’s just a common phrase we use in everyday language, but don’t use it in communication with your clients. It’s better to simply tell your client the estimated time of arrival without being too specific.

  –  

Projects never end with the final payment

Always be prepared to help your clients after the project is done.

If your client asks you about additional work, of course you may want to charge extra for it, but there may be many questions about your project files, or how to export images, or getting your feedback after the website is coded.

Be there for your client and help the project to be successful. Your final support will be remembered.

  –  

Move your button up by a few pixels on hover

There is a simple way to create a feeling of dimension in your UI design. You can move your button up by one or two pixels on hover by using this code:

.button:hover {
	-webkit-transform: translateY(-1px);
	transform: translateY(-1px);
}

You can also add a little shadow, highlight the color, and ease the transition. It’ll create a very interesting and natural effect:

Buttons hover

  –  

Understanding design feedback

Accepting design feedback from your clients can be difficult. Before you learn how to deal with the feedback (a good topic for a future quick tip…), you need to understand it first.

If you work with clients from around the world, you may realize that their design feedback is actually a cultural thing.

Most of my clients from the USA and Canada almost never give me negative feedback. I have learned that the worst they can say is, “I’m not a big fan of it,” or “I’m not sure if I like it.” They also may sound like they are overreacting when conveying their excitement about something they simply like.

Some of my clients from Europe, on the other hand, are more direct if they don’t like something. They also don’t seem to get super-excited about something they DO like. It doesn’t, however, mean that they hate my design. This is just the way they express their feelings. It’s a cultural thing.

Keep that in mind, so you can calibrate your responses accordingly.

  –  

Less is better

Sometimes I feel like design is all about getting more by doing less. While in other areas it could look like a sign of laziness, in design it’s actually a sign of genius.

Studies show that people prefer simple website design and even find it more attractive when compared to more complex layouts.

Look for simple solutions, hide unnecessary UI elements, simplify your copy and educate your clients about the importance of simple design.

  –  

Learn to live with your unfinished projects

This is more a confession than a tip, because I’m as guilty as everyone else in failing to complete many of my personal projects. I’ve failed so many times that I’ve learned to actually live with it.

Let’s be fair, not all of our ideas are great and sometimes we realize it in the middle of the work. If I lose my interest in the project after a couple of days of working on it, I know I won’t do my best job and I won’t be proud of it at the end of the day anyway.

On the other hand, you may never know unless you really start working on it.

So, my advice is to stop daydreaming and get your hands dirty as soon as you can. If you lose interest too soon, it may be OK to drop it and look for something else that you may actually fall in love with and never quit.

  –  

Support the call to action with a testimonial

Testimonials are a very important part of every landing page. It’s a great way to build trust, because no matter how great your sales copy is, it always works better when someone else recommends it.

For example:

You can have a dedicated section with testimonials somewhere on your page, but I’ve learned that testimonials work best when they are scattered across the entire page and are always positioned close to the call to action.

Try to add a short testimonial right below the call to action on your landing page. It can help to assure potential clients that they’re making the right choice.

  –  

Lining vs oldstyle figures

You picked your perfect typeface and started using it in your design, but then discovered that the numbers look like this:

It’s not a mistake. It’s what we call “Oldstyle Figures.” The numbers are aligned to the baseline.

If your font has OpenType features, you can change it to “Lining Figures” and make the numbers look like this:

You can learn more about OpenType features in Typekit fonts here:

https://helpx.adobe.com/typekit/using/use-open-type-features.html

There is also a quick tutorial on how you can use different OpenType features in CSS: https://helpx.adobe.com/typekit/using/open-type-syntax.html#lnum

You can also change it in your Sketch design project when you select the text and then open View -> Show Fonts from the menu. In the popup, find Typography -> Number Case and change the option to Lining figures.

  –  

You’re probably a better designer than you think

I often feel like I’m not good enough and that almost every other designer out there creates something better than me.

I had a chance to meet and talk to some of those designers I always admired and it appeared that they often feel the same about their own work.

The way we see and feel about the quality of our work is just our perception. We are our own worst critic. It appears that we’re probably better designers than we think. We know more than we think. We’re more valuable than we think.

So, stop staring at your portfolio. Be proud of you what you created and try to do your best work every time.

  –  

Go from sketch to details

Never start your design with details.

When drawing, you start with simple figures and shapes to get the composition and proportions right first. Then you go into more detail and turn those simple shape lines into actual contours, then fill it out with shades, and finally polish your drawing and erase unnecessary lines.

For example, my process of designing RobWalling.com:

When designing a website, have first a plan and wireframe the general layout of your homepage and sub pages.

Don’t start with designing your homepage and making it pixel perfect before moving on to other pages. It may be that the layout doesn’t work for single pages or blog posts and you need to go back and redesign it.

  –  

Use directional cues

In tip #21 I mentioned that photos of excited and happy people work better than directional cues, but it doesn’t mean directional cues are bad!

Directional cues like arrows, pointers, lines, eye-directions, gestures, etc., are great to support your design and get even more attention where you need it.

Some directional cues can be very subtle like a triangle cutout in the form box pointing at the first field indicating where to start, or an illustration where the composition looks like an arrow, thus forcing your eyes to look in a certain direction.

Example:

Be creative and test different ideas.

  –  

Copy is more important than design

I hate to admit it, but it’s true. If you’re designing a website, have the content strategy and copy first and design only to support and enhance it.

A lot of clients I work with want to get the design first and fill it out with their words later. It shouldn’t work this way because good marketing copy is the core of every website.

You can work with your client or copywriter and help put together a content strategy during the discovery phase of the project, but try to get the final copy before designing any mockups

  –  

We don’t read online, we scan

We don’t read online like we read books. Our attention span is very short when browsing websites online.

We have a tendency to scan the text and jump from one section to another and we read only headings or just the first sentence of a paragraph.

When planning your homepage or a landing page, try to design it in a way so it supports your visitor reading habits:

  1. Make enough room between the sections so you clearly see when to stop.
  2. Start every section with a short heading.
  3. Follow the heading with a short intro paragraph or subheading that summarizes what the section is about without spending time reading longer paragraphs.
  4. Use a clear typographic hierarchy.
  5. Break up large amounts of content into small chunks (use space between paragraphs, bullet/number lists, quotes, icons, illustrations, photos).

  –  

Where do the users look first?

Most people when they land on your homepage start looking at the top-middle part of the screen. We have a tendency to skip the frames and the very top of the page.

Make sure you position your important message right where the users are looking. You can be creative in many ways how everything else is designed around it, but try to stick to that well-established mental model of a website

  –  

Show the emotions and feelings

When you search for stock photos for your design projects, you usually want to match the context with the copy. Do you care about the emotions and feelings the photo expresses?

Let’s say you’re designing a sales page for a copywriting course. You may find a perfect photo of someone looking at the screen and typing, but does she/he look tired, overwhelmed, struggling, successful, excited, or happy?

That difference can affect the conversion rate.

You want to visualize the better version of your targeted persona in your design.

Studies show that faces of excited people actually work even better than any other directional cues (arrows or faces of people looking at your call to action). Incorporating emotions and feelings into your design can bring some powerful results.

However, be careful, because stock photos of over-excited people can often look fake. That’s why illustrations are a new trend in design these days. A good looking illustration can be funny and easily evoke the desired emotions while ideally matching your design style.

  –  

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.