I helped out an up and coming young designer clean up his personal site the other day. He had a nice design, but was experiencing some CSS issues when his site was viewed in IE. He had some kind words about my assistance.
For the most part, every page of the site now features the new coding, although there are still some things I need to work out and clean up, but I now know how to make those changes. I’ve also noticed that the site seems to load faster, and overall, just run more smoothly. - Jarrett Fuller
He’s a clever young man who’s just getting started in design. I’m looking forward to seeing where his career takes him. His blog is well worth reading if you like reading about graphic and web design.
One of the most commonly neglected aspects of design that I see is negative space. It’s the space in your design which contains nothing. It may be white, black, or could even have a background of some kind, but visually it is empty space. The modern trend in design seems to be to put in everything but the kitchen sink. This isn’t however the best way to get your point across. Consider one of the masters of negative space, Michelangelo.
Why does this image invoke such emotion? I give you a clue… Negative. Space. The careful use of negative space draws the eye and increases impact. So next time your working on a design, pay attention to the space you use, and the the space you don’t.
Gonink - Design & Print had an interesting post on the design industry yesterday.
There is a misconception that graphic design is a commodity based industry and we (designers) just make things “pretty” to sell. Trust me, if that were even close to the truth, Wal-Mart would be selling our designs on their shelves.
But it truly takes time to develop a nice looking piece of material that meets the expectations of the client and puts them right where they need to be - in front of their audience. - Gonink - Design & Print - Its Not A Commodity
Very thought provoking, and very true. Graphic Design isn’t a commodity that can bought like any other prepackaged, off the shelf product. It’s not a product, but time, effort, and inspiration. It’s something that has to be developed for a specific time and purpose. It’s not a one-size-fits-all product, but a one off piece of art designed to hang over a specific mantle.
A little bit of CSS brilliance for your day. Using CSS and javascript Carl Camera has put together the CSS Photo Shuffler. In the Linked Photo version, it even allows each photo in the shuffle to have a unique link.
I have the feeling that Global Nation of Creatives is going something really interesting. Their self proclaimed “grand vision” is to create an online home for all forms of “creatives”, artists, designers, craftsmen, painters, sculptors, writers, etc.
I’m fascinated by the idea of bringing members of all of these disciplines together. Creativity as the uniting factor. That is a much more uniting factor than most people realize. Show me someone creative in one field, and I’ll show you someone who’s creative in a lot of areas you are not aware of. Most people know me as a graphic designer, but my creativity doesn’t end there. I’m a painter, sculptor, and a photographer. I’ve also done landscaping and cabinet making to name a few disciplines my creativity has taken me into. Creativity is a way of thinking, not just a discipline.
Do you have a CSS outline or background color that won’t seem to go away? The solution may not be undefining something, but defining it negatively. A website that I maintain has a default image style with a double outline effect. This effect is achieved by giving every image in the content section a white background that is made visible by 2 pixels of padding and a thin black outline. The CSS looks like this.
img {
margin: 0;
padding: 2px;
border: 1px solid #000000;
background-color: #FFFFFF;
}
In a few instances however, I want to place a series of images without this outline and background. In order to do this I just need to define a new class style to apply to the element that contains these un-bordered images. (<div class=”noborder” ><img src=”test.gif” /></div>) Common sense might suggest something like this:
.noborder img {
margin: 0;
padding: 0;
}
In this case, common sense would be wrong. Sure, I’ve removed the background and outline from the definition, but I haven’t removed it from my image. The original style applies to all images, and would still control this image. The background color and border would still be applied. The background color would not be visible around the edges of the image due to the change in Padding from 2px to 0, but it would still be there. If I was using a GIF with a transparency, the background color would show through. The solution is not to make it undefined it in the new style, but to define it negatively.
.noborder img {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}
By making the border none, and the background color transparent, I’ve actively given them not border and no outline. Rather than letting the image inherit the background from the default img style, I’ve negatively defined those elements, giving any image within this DIV no border, and no background.
Here’s an interesting idea. A color palette generator that creates a palette from a picture of your choice. Type in the URL of your photo and it gives you two five color palettes based on your photo. Color palettes are hexadecimal based.
Jeff Fisher at bLog-oMotives has a post linking to 50 essential bookmarks. I think I gained about thirty bookmarks reading the list.
Culled from more than 500 suggestions, the 50 essential bookmarks was originally published in the Communication Arts November Design Annual 2006.
I couldn’t help but notice that Designers who Blog is mentioned prominently. They deserve the mention, it’s a great design related site.
I’ve updated the theme on this site. The original theme I used was an experiment of sorts. I wanted to build a site with page edges that weren’t straight. As you can see in the picture below, all four edges of the page in that style were jagged.
An interesting experiment, and I’m glad I tried it, but it was a little distracting. This new style is a lot cleaner looking.
How often do you visit a website and find that it isn’t functioning properly?
Lack of functionality is a very common problem that I see. A site needs to function reliably and consistently, regardless of the platform and browser choices of the viewer. Too many designers seem willing to sacrifice functionality in exchange for one web gimmick or another. Building a website is more than just slapping the pieces together and praying. Test, test test, and then do it again. Here is a short list of things that need to be checked. It is by no means complete.
- Have you checked Mac and PC? How about Linux?
- Does it work in IE7? Firefox? Opera? Safari? Did you forget IE6?
- Have you checked all of the pages, even the obscure ones?
- If it’s a blog, have you verified that the RSS feeds are working?
- Are all of the images loading? Even those called by the CSS?
- Could any of those images be made to load faster? Dial-up viewers would appreciate it.
Don’t let minor problems with your site cause major problems with your viewers and your clients. Good design is great, but if you can’t make it work, it’s useless. Make sure that your functionality is as good as your design.
