Posts Tagged ‘layout’

Logo-Centric Website Design

Thursday, April 1st, 2010

Logocentric is defined as A structuralist method of analysis, especially of literary works, that focuses upon words and language to the exclusion of non-linguistic matters, such as an author’s individuality or historical context.

However, I am talking about something totally different when I refer to logo-centric design (notice the hyphen). When I design websites (and other graphical assets) I work from a logo. For me, the logo is the most important element and the foundation of your brand’s image. From the logo you can extract your brand’s color palette, font-type, look, feel, vibe, and emotions. One of the first things that I ask my clients during a consultation is “Do you have a logo?”. If they do not, I suggest that they have one designed or have me design it, depending on their budget and unique scenario.

Logos are great as a starting point and a foundation for your website design, but they can also function to tightly integrate your letterheads, business cards, social network sites, and other branding assets. Before investing in a good website, it would be wise to invest in a good logo. My advice, logo first, then the world is open to you.

CSS Reset: Level the Playing Field

Tuesday, March 16th, 2010

Whenever I develop the css code for website layouts I always start with a reset. Each Browser “imposes” its own default style sheet onto your work, so you can level the playing field by tearing down their defaults. There are many ways to do this and varying levels of detail that can really make your cross browser coding more accurate.

Personally, I stick to pixel precision in some, but not all areas. I typically let inline elements like text, do their own thing.

Here is the code that I begin with at the start of my main stylesheet:

* {
margin:0;
padding:0;
}

This typically gives you the most bang for your buck as far as creating a smooth surface to start building your styles on.

I also like to add this:

a img {
border:none;
}

I get annoyed how browsers automatically put the border around images, especially if used for navigation, like a logo or button.

If you do decide to go this route and use the “*” to reset your margins and padding, that means that EVERYTHING, every element will have its margin and padding stripped bare. You will then have a relatively blank slate to work off of, but you will need to set margin and padding on all your elements. Be especially careful to set those attributes for unordered lists, list items, paragraphs, and headers.

For more on CSS Resets theory and practice, read from this article by the CSS master, Eric Meyer

Also be sure to check out this video by Nate Koechley for their YUI CSS grid. This video explains resets and so much more about css. It has changed the way I understand and code. Watch YUI CSS Foundations Video.