Weekly Design Notes

Posted on October 9, 2011 by admin

Responsive Design

While I didn’t have the option to attend last weekends Web Design Day a bunch of the presenters have shared the slides of their presentation. A huge theme seemed to be responsive design or designing your site around all devices instead of just a PC first and downgrading it.

The general idea seems to be that more and more people are viewing your content on a variety of unknown devices and you should create a design that expands or contracts to fit whatever screen is viewing you content. This is accomplished through a variety of means including alternate stylesheets, percentage based measurements and the use to ems instead of pixels.

The most often quoted article seems to be Responsive Web Design by Ethan Marcotte on A List Apart.

Style Tiles

Another key takeaway from Web Design Day, revealed to me by attendee Andrew Parrocini, was the idea of style tiles. As it was explained to me, a style tile is a combination of a mood board mixed with loose design elements. So you would have a color palette, maybe some buttons, some loose images and fonts that you show the client. You would do a couple of iterations to more easily establish a direction for the design to take.

It also gets the client involved in the process a bit further which is a huge thing. At each phase the client should be your partner and if they make key decisions before you move forward it is much easier for a final sign off on the project as well as keeping everyone happy.

Weekly Design Notes

Posted on October 3, 2011 by admin

A little while ago there was a discussion on the internet about how there aren’t any real tools designed just for web design. There are tools that are bastardized from print but they aren’t quite for designing websites.

One of the points made was about designing your site live in the browser. Coding as you go. I thought this was a interesting idea and put it in the back of my mind.

Then I was inspired by Elliot Jay Stocks who recently nuked his site and started a new version. So I installed a fresh version of HTML5 boiler plate and began coding from there with the result being this current layout. It will probably change again as time goes on.

Boagworld Update

Paul Boag recently made a post giving a sneak peak into his updated website. I’m particularly fond of the slight rollover effect on the buttons that uses CSS3 to have a nice gradient transition.

It also has the look of being iPad friendly with the larger buttons.

NoSpec

An arguement broke out on Twitter regarding having users design a dashboard as part of their application process for a design position. Some people thought it was the equivalent of having a design do spec work since they wouldn’t be getting paid for it.

While I don’t think that was their intention it introduced me to The No Spec Website who’s goal is to educate people about the problems with it.

Volkswagen Website

Scrolling websites continue to evolve and show how cool the technology can be. The current Volkswagen Beetle does some remarkably clever things with it. Although the site seems to get hung up in Firefox and Internet Explorer.

Weekly design notes

Posted on September 24, 2011 by admin

I’m going to start blogging my weekly design notes. These are just little odds and ends that I’ve picked up through the week that might be beneficial to someone else out there.

Design Professionalism

This is the manifesto. This article has rocked my brain and made me question a lot of what I’ve done in my career and which way I am going. If you are interested in being a better designer, or a designer in general this article is a must read. This should be required reading at any of the so called design schools.

Please check out Design Professionalism by Andy Rutledge and enjoy

List comparison

List comparison made easier

It happens occasionally where I’ll have to compare or contrast two list or sets of changes against one another. This week it was adding profile photos if they were available but pulling them from another document.

It speeds the process up a lot if you cross from both lists as you go so it eases the ability to skim and scan the page.

Photoshop Actions

One of the most powerful tools in Photoshop is the Actions palette.  It enables you to quickly record any series of steps you might do and assign a shortcut key to repeat it. I typically use this feature for batch processing a large number of photos. So if I have to resize, convert to greyscale and save for web I’ll do it once and then use the actions palette to repeat through however many photos I have. Its a great timesaver.

Weekly design notes

Posted on September 17, 2011 by admin

I’m going to start blogging my weekly design notes. These are just little odds and ends that I’ve picked up through the week that might be beneficial to someone else out there.

Project tracking

It helps sometimes to insert the project name and the original PDF name into the document properties of a PDF. In my case, PDFs get passed around and renamed so often or they might show up as a part of another project down the road that you need to locate the original working file. It helps to be able to look right there and find the correct name and then you know the file you’re searching for is the right one.

Project management

We had some system issues this week and weren’t able to do business as usual so it became about doing whatever we could to keep the project moving. That sometimes means emailing the project files instead of routing through the project management software or just skipping the step that you are stuck on and doing what else can be done. The point is that it is best to keep momentum going on anything you’re working on if you can help it otherwise it can become difficult to get it moving again or you may get behind on a deadline.

Responsive web design

This isn’t really a new thing. It’s been blogged about by better people than me such as Jeffery Zeldman in response to the new Boston Globe website as well as the A List Apart article that instructs you how to do it. But what caught my brain was the idea of treating your web planning in a 3 timeline approach. Doing things like planning for here and now, the next phase as well as how it would work in the past. Breaking a site down into this way of thinking it out seems like it would be a very fun thing to do.

Designing a Suite of Application Icons

Posted on February 16, 2011 by admin

I’ve been tasked recently with coming up with a way that we can create a branded family of icons for the iPad. There’s a lot of info out there about designing a single icon but not for how to tie them together as a whole so they are instantly recognizable as belonging to the same company. For instance, if your company creates a mail app and also has a stock tracking app as well as an app that tracks sales how do they tie together.

The closest analogy to my situation that I’ve come across is by looking at how companies like Adobe, Microsoft and Apple have maintained their branding across their desktop applications. This doesn’t exactly translate to the challenges of an iPod or iPad icon but they share similar characteristics that can be used consistently to show a similarity. These characteristics are:

  • Color
  • Shape
  • Angle of 3D icon
  • Placement of elements in the icon
  • Gradient direction
  • Image usage
  • Background
  • Border
  • Style

By using a combination some of these elements you can successfully create a family of icons that tie together visually into a brand. The next challenge is how you adapt that icon to a different platform such as older Blackberries.