Learn Design and Create Better Websites
This is another tip that comes from the upcoming Web Typography course that is a part of the Design Class.
Choose typefaces that have a medium to high x-height. The bigger the contrast between capital letters and lowercase letters, the harder it may be to read it if used as a body text. Follow this quick guide:
I like to listen to music while working. It helps me to relax, set my brain to the right tone, and sometimes even enhance my productivity.
I also match the music to the kind of work I do, for example:
Writing or learning – no music. I need silence to focus.
Designing – soundtracks from my favorite fantasy movies like Lord of the Rings and The Hobbit help me to be more creative.
Coding – soundtracks from my favorite sci-fi movies like Inception and Interstellar help me to focus.
Boring and repetitive tasks (yeah, I have a lot of those too!) – my favorite bands like Red Hot Chilli Peppers, Twenty One Pilots, Nirvana, and Foo Fighters help me to push through and just get it done.
I also love coffee shop noise for all kinds of work once in a while. What kind of music do you listen to while working?
If you know the code framework you’re designing for, try to match your layer names to the code structure.
I often design themes for the Genesis Framework. This is what my layer organization looks like in Sketch vs. the final code in the browser:
It’ll help developers to turn your designs into code much faster and they’ll want to work with you again! It also shows your understanding of the framework and how the code works.
You can even take it one step further and prepare your style guide to match all of the elements too:
Sass is a wonderful extension to CSS. If you always wanted to give it a try, but it seemed overwhelming, here’s a quick guide for Mac users (you can find other install options here):
Install sass on your computer:
Create a new style.scss file in your project folder next to your original style.css file and then:
Now, any time you make changes to style.scss and save them, it’ll automatically generate a new style.css file for you. If you want sass to stop watching your file, press ctrl+z or ctrl+c in the terminal or simply close it.
Remember to never edit the .css output file because it’ll be overridden every time you save your .scss file. You can use sass –watch –style compressed style.scss:style.css to automatically compress the output.
Learn more here about Sass and have fun!
This tip comes from one of my web typography lessons in the upcoming Design Class.
In the center-aligned text, space is distributed equally on the sides. If the following block of text is left-aligned, depending on how the headline wraps, the paragraphs can look like are wider than the headline.
If you want to have a center-aligned headline and left-aligned body text, adjust your design to make the headline area a bit wider than the content area.
When I design websites, I like creating many different versions of the same sections. I simply duplicate the section, make some changes, duplicate it again, and make more changes, etc. I want to find that one design I love and then I make it perfect.
Sometimes you may have an idea that you need to quickly visualize it and then show it to your coworkers. I often grab a screenshot of an existing page and modify it in Photoshop or Sketch and have a quick mockup ready.
Your time is money, so being able to quickly produce many iterations is very important. Speed matters. You can always polish it later.
You don’t need to master the design software you use. All you need is to learn the basics, but you have to learn how to use them really, really fast. Create shortcuts for the most useful features and practice using them until it becomes as natural as typing on a keyboard.
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:
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.
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.
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.
You can greatly reduce the size of your PNGs by reducing the number of colors. Some of your icons or illustrations may actually use only a few colors.
Here are the tools (thanks to Gary for the tip) that I’m using to optimize images:
ImageAlpha – https://pngmini.com/
ImageOptim – https://imageoptim.com/mac
SVGOMG – https://jakearchibald.github.io/svgomg/
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:
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.
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.
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.
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.
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.
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.
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.
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.
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 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:
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
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.