Part Two, Design

Design

Welcome back. Hope you’re well. Today I wanted to talk about design. In two aspects. How you present yourself and your products or services, and how your website looks. As always, feel free to email me if you have any questions.

Your brand

Oh, that sounds so gross. You are not a brand, you’re a person! Putting yourself online is putting out a version of yourself, arguably. Why not take a while to figure out what you want to say, and how you want to say it? That’s all I mean when you read “Brand” in these posts.

First, the hard part.

What do you want to say?

Bullseye

Here’s one technique for organizations to help them understand themselves. It’s a called a Three Hour Brand Sprint, and the term the authors use for “brand” is similar to what I’m referring too. It’s put together by some designers formerly at Google, who wrote a neat book called Make Time, and have a blog and courses over at Time Dorks.

It’s intended for Starups, but I think the exercises are useful for individuals and small teams as well. Maybe not all of them, but the first four of the six, in particular.

Give it a try, and let me know how it goes. It shouldn’t take a single person or small team three hours. Always remember:

Adapt what is useful, reject what is useless, and add what is specifically your own.

Bruce Lee said that, and he was a badass. You are too!

If you go through with the exercises, I’d be really curious to what your Why is. Let me know.

Design tips from a non-designer

dubious

I am by no means a visual designer, but I’ve picked up a couple tips and tricks from 20 years working with really talented folks. These are boiled down and simple steps, not fully explored design mantras. Professional designers may disagree with the choices I advocate. Let me know if so.

See Design for Hackers for more detailed info on these topics too.

My thought process is to make small decisions that remove more thought process. If you want 10 colors or fonts, you have to balance each with the other. That’s a matrix of decision making that can cause you much frustration. Go smaller. Avoid friction. Have less.

Fonts

No more than two is good (headline and body). Using just one is even better, as it keeps it simple and reduces load times. As for sizing, make each size down 75% of the larger size. So if your Headline (aka H1) font size is 3, your body size should be 2.25, for example.

Font choice is a huge topic. Grab something you like from fonts.google.com. You can paste in your bio or any other content into the google fonts site to see how it looks.

fonts

Serif fonts (fonts with feet) are harder to read with a lot of text that sans-serif fonts (without feet). In other words, a wall of cursive text is hard to read. The tool I’ll recommend to you tomorrow will help with all this Font mumbo-jumbo. Hang in there.

Colors

Finding colors to represent yourself or company can be a challenge. A good rule of thumb is to pick three colors and a gray, maximum.

colors

If you aren’t sure about colors schemes, these are great resources.

Color.adobe.com is an interactive color wheel. Try picking one color you love, and looking at the Color Rules to find great combos. The little triangle in the bottom of the color swatch indicates the primary color. You can toggle other colors as primary to explore.

Get design advice via crowdsourcing at Color Lovers. That link shows the most loved color palletes this week. The community at Color Lovers submits and votes on their favorite color combos. Pick one you like and play. Note: That site has gotten really spammy recently. I’ll look for alternatives.

PS - I know as much about color theory as an ant understands an airplane, so you might want to do some research as to what emotions the colors of your website will invoke in your visitors.

PPS - Every color is represented by a hex value aka internet color. White is #FFFFFF and Black is #000000, for example. You’ll need to remember this value for your “branding”. You can find it in both the sites I mentioned above. Again, the tool I’ll recommend tomorrow will help with this. Don’t stress, we will get there.

Images

camera

Unsplash is a great resource for high quality images. Resize and compress the images and always give credit. You don’t need photoshop or other heavy photo manipulation software. Ask a friend or look at online tools.

If you have a Mac, and are friendly with the terminal (or want to be) check out the sips command. Or don’t if that’s too technical for you! It’s all good.

Sustainability

sustainability

SustainableUX is an online conference, and has some nice articles on how designers can reduce their carbon footprint and improve the user experience of a website. I worked with a couple of the cofounders, and they’re some of the best and smartest people I know. By having less, you increase the positive experience your website visitors have, and decrease the amount of energy it takes to run your online stuff. Win, win.

Remember

Less is always more, in my opinion.

Tomorrow we’ll talk about actually building your website!

Continue to Part three …