Archive for the ‘Web Design’ Category

Sometimes design says “hey, don’t notice me.” And it’s perfect.

Sunday, June 16th, 2013

I just had a conversation with a friend showing the importance of a well designed website, especially an information heavy site, and how great it can be when good design is “unnoticed”.

THE ISSUE

He has to renew his drivers license. He wants to to know where, how much, and if they accept credit cards.

THE PROCESS / THE PROBLEM

First question: MO.gov, department of transportation, or department of revenue?

MO.gov?

Home page.

There is a lot going on there. Scrolling images. More images to manually scroll through to see links. Three youtube videos. A bit much.

I’ll try online services. Ok, under More Services I’ll try Driver’s License Office.

Ah, the Dept of Revenue page. Ok, Driver License.

“Renew” is listed on the page once, in the exciting heading “Do you need to obtain or renew a driver license, nondriver identification card or permit? You’ve found the front door to all the information you may need about driver licenses, …”

Nowhere else. No links to click.

Recapping real world clicks to find out how to renew a Missouri Drivers License:

Mo.gov > Online Services > More Services > Driver’s License Office > Drivers License (on new website) and nothing yet.

Note, this is also where googling “MO drivers license renewal” takes you.

Drivers Licensing Checklist? Scroll down a bit and see this:

“Renewal 

Acceptable documents for Proof of Name, Date of Birth, and Place of Birth, Proof of Social Security Number, and Proof of Missouri Residential Address.”

Give up.

LETS SEE HOW IT SHOULD BE

Gov.uk won 2013 Design of the year.

“”You shouldn’t come to the website and say ‘wow, look at the graphic design!,’” Terrett says. “You should come to the website to find out what the minimum wage is.”

3 clicks. Everything I need to know.

ss1

ss2

ss3

ss4

Quartlery Newsletter

Thursday, November 4th, 2010

Working on a quarterly newsletter for Harmony EyeCare. They’re wanting to provide a consistent and convenient way to keep in touch with patients. I’m thinking the header will always have some sort of object on the right side, whether it be glasses or contact lens cases or an instrument the Doctor would like to feature that quarter.

Full size portion of header:

Quarterly Newsletter

Each quarter they’ll be able to feature a main article at the top (In this case, an introduction from the Optometrist). A number of secondary articles may appear below accompanied by an image (vector graphics by me, or real photography) to the left.

We decided MailChimp was the best service for their needs. They’ll be able to analyze the basics, like how many people opened the newsletter and how many links were clicked. A big plus for me, though, is that MailChimp automatically writes CSS inline to make sure their newsletter looks similar in any mail client (Gmail being the toughest to design for).

Width: 650px
Font: Helvetica (or Arial, sorry Windows users) with Georgia Italic for the tagline
First Issue: January 2011
Newsletter Service: MailChimp

Here is more of the newsletter:

Quarterly Newsletter

Sill working on the layout a bit and proper graphics to match the text.

- Randy

Color Palettes brought to you by Sad Bird

Saturday, January 30th, 2010

Top

Lately I’ve been working on a few color palette ideas and looking for inspiration. Obvs, I turned to those who knew color well. The masters, if you will. In the first issue, Color Palettes vol. 1, I look at paintings by Magritte, van Gogh, and Lautrec.

I broke down what I saw as eight key colors from the paintings into their RGB and CMYK values with the latter being in their respective percentages.

Hey, I don’t know why I made them, but the idea is that if you, a designer, like an artist or painting, well, then here is a little palette to make incorporating them in to your design easy and not obvious.

Does that sound cool at all? Are there other artists you would like to see? Or, is there other information you would like to see included? How would you use it? I would absolutely love to read your comments. There is nothing I would love more.

-Rich

P.S. It was a big decision on color vs. colour. In the end I tried to not be pretentious.

Click to view larger.

Vangoghpalettelautrecpalettemagrittepalette

Just An Update

Wednesday, October 21st, 2009

It’s about time I update what has been going on for the past few weeks. Made a big step forward in my design career. Last week I landed a  web design position at Unidev, here in St. Louis. So far so good. Hopefully I’ll make a nice addition to the web team here as lead designer. Will post about projects if I get the go-ahead, not sure how strict client privacy is just yet.

While I’m doing web design I am responsible for logos as well. Something I really enjoy doing because it’s the ultimate in problem solving.

Sad Bird Design will most certainly continue. We are pitching a web project currently. Fingers crossed that we get another opportunity to redesign a site.

Posting will continue shortly. Got a few things to show off and I really need to add to the grid system guide. Stay tuned.

- Randy

Jakeguidry.com Blog Is Up And Running

Wednesday, September 30th, 2009

The blog is up after a complete redesign. What sparked a redesign was the client’s new direction in content. Jake says it best… “I grew tired of contributing very little to a blogosphere consumed with unoriginality, superficiality, and other such alitys that give many critics of blogging their ammo.” So, the new blog will be much more personal, and the design had to match.

jgblog

I chose Times Italic for the headings for a personal look and feel. Verdana is used for the body copy for its more natural/human feel versus helvetica. Blog should easily read from left (most important) to right (least). Quality is key here, and I’m betting the content will match.

Bookmark it. Or get the RSS feed.

Details:
1. Modified Blogger template
2. Width: 942px
3. Headings: Times Italic
4. Body Copy: 11px Verdana
5. Baseline: 18px
6. Posts: 10-16 words per line
7. A lot of heart and soul
8. A good old fashioned fight with template CSS

- Randy

CSS Browser Resets

Wednesday, September 16th, 2009

I’ve been getting frustrated lately about my web design looking different in every browser. This is common, of course. Each broswer: FF, Safari, Opera, Chrome, and IE all have their own default margin and padding settings.

So if I make a header, main content, sidebar, and footer layout with no set margin or padding, the browser will set its own default setting. This is even more frustrating when text is introduced. The h1, p, li, and ul all have their own defaults. This creates unpredictable results. And I don’t like that, and I won’t stand for it.

I needed to find a common ground.

* {
	margin: 0;
	padding: 0;
	border: 0 none;
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
	}

fieldset, img, abbr {
	border: 0;
	}

a, ins {
	text-decoration: none;
	}

p, h1, h2, h3, h4, form, span, img, blockquote  {
	padding: 0;
	margin: 0;
}

The asterisk at the top is the universal rule for resetting. All major browsers should recognize that rule and read it the same way. Do not reset any elements inside the “form,” for example: input, textarea, checkbox. etc. Form elements can act kind of crazy if you reset them.

Start your stylesheets with this bit of code and make your life easier. I must give thanks to Eric Meyer for pointing me in the right direction.

- Randy