Don’t forget design! (Pt. 1)

beAs a developer, it’s easy to get a little bit too sucked into backend stuff sometimes, to the point that when you have to build an interface, the result looks like a geocities site with random bootstrap buttons thrown in among a hodgepodge of weird colors and goofy-looking navigation. You know CSS really well, you know how to use a grid system… why does this look so terrible?

Oh yeah. You’ve forgotten design.

It’s easy to forget how hard design can without templates, and sometimes it’s hard for engineers to get started figuring out the ‘feel’ or ‘theme’ of something they would really just like to be functional.

Silicon_Valley_design_concept_meeting

But neglecting those aspects is really not an option. Even quite sparse sites like Reddit and Wikipedia make an effort to create consistent, cohesive interfaces with very deliberately chosen fonts and layouts that feel natural and professional. Even a site with important content and impressive back-end tech will fail if it looks like it was designed by a fourth-grader learning HTML for the first time.

So. Where do we start? In my opinion, the best way to divide up the huge topic of web design is into two subtopics – ‘Styles’ and ‘Features.’ When we talk about styles, we’re playing with very broad, high-level, design-y concepts, trends and movements that bleed out of web design into fields like print, graphic design, art and architecture. When we talk about Features, we’re talking about specific components used in web design. This week, let’s just take a look at three Styles and then next week we’ll check out three Features to get us started thinking in a more design-oriented way.

Styles

The Style of your website should be clear in your head before you touch a single CSS file or build anything stylistic at all. The thing that makes a website look professional is consistency of theme, and that will be determined by the style. Let’s take a look at a few styles:

International Typographic Style / Swiss Modern

Image result for international typographic style

By the way, this post will have a lot of pictures. Also, I recommend google imaging these style names to get an even better idea of them.

If you’ve ever spent a lot of time in Europe, this look will be familiar to you. Legibility, negative space, clean lines and lots of Helvetica. If you look at a signpost somewhere and see nothing but information, that’s Swiss Modern. Websites using this style will tend to use ‘hamburger’ menus to free up the page of any little bit of clutter, as in the following example.

burnkit

In International Typographic, leaving things out is just as important as putting them in. Limited options and and the use of a single bold color (often red) are common in this style.

Genelab

Retro

Let’s face it. We live in the future. And as cool as that is, it comes along with a nice dose of existential dread. I mean that site up there in the Swiss style has me thinking about my insignificance AND my clone-ability.

Oof. You know what I need? A nice, solid dose of nostalgia.

Image result for retro ad

To be clear, the above isn’t technically a retro style, since it’s not trying to be old-fashioned on purpose, it’s ACTUALLY from the past. Nonetheless, it’s a good example of a design aesthetic that’s fun and pretty easy to implement in a page. You can find tons of components in photoshop or any other piece of graphic design software that will fit right into such a theme:

Image result for retro graphic

I should point out that this style is not appropriate for every situation – you don’t want the launch site for a new phone to be surrounded by imagery from the 50s, you would rather have such a product associated with the future. Where it does work well is when you’re selling a simple product, a link to the past is okay, and you’re able to have a bit of a sense of humor about yourself.

Grunge

The term ‘Grunge’ has its origins in the music of the 90s, but as a style it’s grown to refer to anything grimy and hardcore. It’s pretty straightforward, really – rebellion, chaos, dirt.

Image result for grunge graphic design

Websites in this style clearly identify as at least somewhat counter-cultural and may willingly sacrifice ease of use to achieve it.

Matt Mullenweg

The style can end up being much more difficult to work with than others, as there is often an attempt to get from the grid system. For example, slanted menus are common in the grunge style, an impossibility for normal HTML. This means that image mapping must be used for links, which breaks between different browsers. In short, it’s a risky style. But hey, isn’t that always the case with being on the fringe? Nonetheless, if you can pull it off, I think the results can be pretty cool.

iSpoil

So that’s it for styles. The vocabulary for talking about design varies a lot from person to person, so find a way to break it down that works for you. Next week we’ll talk about some of the actual features we can use in our website after we’ve chosen a style to go with.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s