Research Day- Web Design

When I start learning about something I’ve never approached before, it helps to take notes. The issue with this though, is that often I end up with notebooks full of great (but messy/clutted) notes that I rarely look at again. Time to try a different tactic!

Since this site is a tool for me as well as a history of my learning process, I’m going to put these notes here for quick reference.

Notes and Quotes for solid web design:

Daan Weijers “A lot of people argue that grid systems limit your creativity, because you’re limiting your freedom with a grid system. I don’t think this is true, as book called Vormator taught me that limitations actually boost your creativity. This is because you will think of solutions with these limits in mind, whereas these ideas would never have been thought of if you don’t have these restrictions.

Brandon Jones So what makes a pixel perfect comp? Essentially, it’s designing a mockup (esp. a web mockup, but it can be anything) as if you were styling it by code in the first place. If you’ve worked at all with CSS/HTML you’ll know what I mean. It includes: Perfect margins, Perfect padding, Perfect and consistent font usage , Perfect borders & backgrounds, Consistent color usage, Intelligent and justifiable deviations from the first 5 rules.

There really shouldn’t be more than 3 or 4 font styles on any single page unless you have a damned good reason to do it. If you are using a specific color of red as a highlight color on the site, make sure that it’s that exact color of red in every single place (unless you’ve got a reason for it to be different).

Ahmed Hussam                                                         

Before going to your client in your first “requirements gathering” meeting, you should do some homework by preparing a competitor analysis report.(…) this is basically a table listing all features and components of your client’s competitor websites and a screenshot of each. (…)such a report will greatly minimize revisions later on due to forgotten components that need to be squeezed into your design. (Prepare even just a simple comparison chart)

One of the first and most important questions you should ask your client is which sites they like and which sites they dislike. (…)You should be particularly interested in knowing exactly what points they like or dislike in each example that they provide; As in one case they may just like the colors and in another a specific component, and in a third the fonts, …etc. Doing a quick analysis of such list will help you create a general idea of which direction to move in and what to avoid.

W5 (Who, what, when, where, why)

Skype Brand Book

Oh wow- This is amazing. Review often! Good general rules, good references of what they DO to consider what to do Differently.

Mark Boulton– (re: Aesthetic Usability Effect)  This theory suggests that things which are designed to be beautiful are inherently more usable as a result.

Helen Walters   10 to 3 to 1
Apple designers come up with 10 entirely different mock ups of any new feature. (…) They’ll take ten, and give themselves room to design without restriction. Later they whittle that number to three, spend more months on those three and then finally end up with one strong decision.

Paired Design Meetings
One in which to brainstorm, to forget about constraints and think freely. (…) to “go crazy”. Then a production meeting, Here, the designers and engineers are required to nail everything down, to work out how this crazy idea might actually work.

Mark Boulton ‘Aesthetic Usability Effect’ –  This theory suggests that things which are designed to be beautiful are inherently more usable as a result.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your 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