Jan 15, 2019 · 3 min read #Design

We all sucked at one point

We were all beginners once. And we all sucked (see below). Being able to design well is a learned combination of experience, empathy, humility, creativity, luck, and knowledge. And while that last sentence could be discussed ad nauseam, let's just go over some quick pointers for those new UI designers and leave ramblings behind.

MarkMakes.com - Circa 2008

Humans are drawn to imagery, feature it

Very few people truly LIKE to read, but everyone appreciates excellent photography. Imagery is the user's gateway drug. Back in 2011, 37signals performed an A/B test with imagery and found over a 100% increase in signups. That's powerful. You may not have the dev chops or time to set up and run an A/B test on your images, just keep in mind that they should be a focal point of your design.

And for God's sake, if you're going to use stock images, be sure to find the LEAST stock photo looking photos you can find. Nothing smacks of un-original more than stock photography and your users have likely seen that image 10,000 times before in some ad for Lipitor.

Focus on the mobile experience

A quick glance at Google Analytics on a few of my client's sites shows ~80% of all visitors are on either a smart phone or tablet. These are users that are already more likely to bounce simply because they are physically mobile and interacting with the world, not sitting at their desks procrastinating from work.

That means you have even less time to grab their attention and keep it. Take a look at the example below. Izakaya's original designer failed to give the mobile version much attention. The main cuisine photo is only a quarter of the viewport and is dominated by an extremely large icon.

mobile homepage redesign
Re-design consulting work for Izakaya Houston.

Notice how much more well spaced and intentionally thought out the design on the right is. The eye is drawn to the food and the user reads the main heading "Gourmet Japanese Street Food" before they realize it. The lack of defined container elements with background colors also makes it feels like more modern and cohesive.

Keep it simple

Follow the old maxim: less is more. Often when I'm stuck in a rut design-wise I'll jump in the Chrome inspector and remove random CSS attributes. Often times I find by removing something as simple as a background or border opens up another idea or the resolves the issue entirely.

Keep any non-content items slim. For example, there should be no reason why you would ever have 3 headers like the example below. 2 is the absolute max. Full stop.

how not to design a website
This wireframe of a real site just makes me cringe.

Design should fit branding and not the other way around

Have you ever seen a designer's portfolio look like a bunch of regurgitated components? Yeah, don't be that guy. -- A designer's portfolio should show their range of creativity and ability to work with a client's brand, not just showcase a bunch of recycled elements.

Think of each client as an opportunity to challenge your design skill and never re-use the same elements from previous work. In the long run it'll make you more marketable, flexible, and overall easier to work with.

&More Articles

Dec 6, 2018 · 5 min read

Be "good" at CSS with these six things

Working at an office of developers, it’s a near weekly occurrence that I will hear “I hate CSS” or “I suck at CSS”.

Mar 2, 2019 · 2 min read

Best SCSS Mixins

From mixins and operators, to conditionals and extensions. My favorite SASS and functions.