News and blog posts from our students and faculty

Ah! The Beauty of Order.

Saturday, February 23rd, 2013 | Posted by Eric Boggs

Chuck and I continue to work on wire iterations for Careshare.  The latest version provoked a conversation on order and structure with Professor Franks.  As you can tell, the first one is a bit floating – and that led to it feeling somewhat off, but at first I wasn’t sure what to do.  After working through some of the issues with Professor Franks, I realized there were some simple modifications I could do to have the site begin to sing. I include below a sample page from before and after.

1)Use a grid system.  I was trying to line up everything more or less by eye, which is not an easy or accurate way to go.  I in fact imported a layer into Illustrator of bars, 30 pixels wide, and spaced 30 pixels apart.  Then, I made sure all elements lined up with edges of the grid.

2)Don’t use fully “black” fonts.  I was using them all over the page, and they are a bit harsh.  Lightening them up even a little bit makes them softer on the eyes, which is certainly part of what we (and any site or app) should do.

3)Decide on a color scheme – use kuler (a tool provided by Adobe) or something similar to give you ideas on colors that work well together and fit your overall vision for the site. In terms of color, we wanted to include a warm and inviting, yet airy feel.  We felt good about the turquoise and the red-orange, but needed other colors to complement them better.  Kuler helped us find colors that did so.

4)Keep equal spacing and padding around all elements.  For example, if there are 15 pixels of space between font above a line and the line itself, there should be the same amount of space below.

5)Stay aligned the same way throughout the site.  In the first example below, the first two sections are left aligned and the final, centered.  This can through a user off.

6)Have a different color for clickable links, and use that throughout.  You can see ours is a dark gray – while subtle, we think that users will intuitively pick this up.

Next steps for us include more iteration, testing, and adding in “orphaned” pages.  In the past week, we have conducted clickable prototype testing with 2 users, and over the next week we hope to do the same with 2-3 additional caregivers to continue to get feedback on how to improve.

After

No Comments »