make it pretty

I consider myself a front end developer. I think a lot about UX, interactivity, and presentation of information. I had a career as a teacher so these are all things that matter to me. But I tend to get bogged down in the scripting and markup, and while I make things that function well and are structurally sound, my God they’re ugly sometimes.

It is hard to come to terms with a professional weakness, so for a long time I just convinced myself that it did not matter as long as my sites were usable and above user-agent levels of stylishness.

Here’s how I started to learn how to make things that were a little bit more attractive.

Method 0: straight up thievery

Call it professional peer pressure because after picking through the Videos That Will Help to Improve Your Design Skills a consistent piece of advice was that A LOT OF GOOD DESIGN IS STOLEN. Not copied! Just boiled down to its essence and co-opted. Browse the web more mindfully. Pay close attention to styles you like or dislike, and that add or subtract to the user experience. When you find something really good, inspect it with browser developer tools and figure out how it works fundamentally, and how it fits into the big picture of the site as a whole. And when the opportunity arises, use it in your own work, because that is perfectly OK to do.

Method 1: pick through the toolbox and refresh your memory

Take a look at the MDN CSS Reference. There are so many potential style rules. It is easy to forget what is available to you. Even simple things like borders, text shadow, box shadow, or text decoration escape me at times. Yet little things like that, used judiciously in a design, can really make an element pop and give a page a more polished look. I like to skim through the various text effects, transformations, and background properties just to remember what is possible.

Method 2: approach visual design problems like client-side logic problems

I think what attracts me to algorithm scripting is the goal-directed nature of it. You have an outcome you are trying to bring about and you are talking the computer through the necessary steps to make it happen. Part of strengthening my layout and style skills has been a cognitive shift. Writing CSS rules is not very different. You have a look you are trying to achieve and you have to talk the browser through how to paint those pixels. When I approach design problems in that frame of mind, it does not feel burdensome. It feels great! Have a plan. Begin with the end in mind. Layout and style are steps you take to get there.

Advertisements
make it pretty

Would love to hear from you:

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 )

Google+ photo

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

Connecting to %s