Volume I: Autumn
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.
Working hard this week on a few postcards and website bits for Harmony EyeCare. The doctor requested a set of postcards to remind current patients that they can order contacts on the site.
Updated on 07/10/2010 with final design.
Front:
Back:
Might put another contact lens case design into the pattern. We’ll see. The website currently has a callout for ordering contacts in the left column below the main navigation (see www.harmonyeyecare.com). After approval of this concept the callout will need to match the postcard for a proper connection between the two. And probably needs to be moved to the header. Gotta keep things consistent.
Another postcard will go out soon reminding patients of their next check-up. I’ll be using a similar pattern as this one but with other elements dealing with eye exams. Update coming soon after feedback from client. Updated with images below.
Front:
Back:
- Randy
In my earlier post I talked about version 1. After much research I began to work on version 2. So far the uppercase alphabet is in rough draft. Currently working on lowercase and numbers. In the meantime I am getting some professional feedback on the uppercase.
I believe this was the last project from my Graphic Design 1 class back in the Community College days. My best guess is that each individual panel needs to convey the message (in this case, love) as well as when all six are combined.
There are plenty of guides out now online about how to create grid systems for the web, even grid generators. But I’ve had trouble finding sufficient material online about creating grids for print. Most of what I’ve learned about setting up the grid comes from this book: Grid Systems in Graphic Design, and Vignelli’s Canon. This guide is just my way of constructing the grid, and should in no way serve as the only way.
Read the rest »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
