I've always loved photography. Cameras have always been a hobby of one person or another in my family. In my case, though, I feel that it is more important than something I do on weekends or when I take a trip (although I will still do both of those things). As a web designer, if you don't at least understand the process of photography, I think you're doing yourself a disservice.
Let's face it, glossy pictures that catch the eye will keep a visitor to a website interested. It's also easier to look at a picture than it is to read text. The moral of the story: sometimes a story is better told through pictures than a mountain of text that no one will read.
To sharpen my skills and get some critical feedback, I recently decided to join two photography meetup groups that we have in Milwaukee - Studio MLP and Milwaukee Photography. I've only been to one meetup so far but I have to say that the individuals at my first meetup were quite fantastic. I was a bit concerned since I'm such a newbie to the digital SLR world but these photographers (who range from amateur to studio) were more than helpful. (I've actually noticed this helpfulness to assist the rookie from not just photographers but also other web designers and developers. Think I'll pursue that in another blog...)
Here are a few photos I've taken in the past that I'm particularly proud of. I've put some more on my website and will update those as I continue in my photographic studies.
As an aside, if you're a web designer, you need to take a look at these two books that are excellent resources and that I recommend: Photoshop CS4 for Photographers
by Scott Kelby and the Digital Color Management Guide and Printing Guidebook by Canon. The first is readily available at bookstores and online. The second was generously given to me by Jeff Dobbs from Mike Crivello's Cameras but it looks like you can find an older version of it online at Amazon for $4.65 or as a PDF on Canon's website.
Yes, the title I’m using for this particular post was part of an actual conversation that I had with a friend about her website (in this case it was a portfolio website for her paintings and photography). While I’m not trying to hate on neon, it does transfer a certain kind of feel and to whatever it is that you’re trying to promote or sell. Good on sandbox toys and maybe little kids’ swimsuits, but not so much as part of a website. Having said that, I’m sure there will come a day when neon pink is absolutely the right color to use for something I’m designing. I will not be holding my breath, however.
There are articles and articles about color theory that you can read like Six Revision’s article on color theory (definitely read this one because it’s very good and tells you things about color you never knew). Instead of a boring paragraph blog, I’m just going to list the things that you really need to know about color:
1. Color is the first design element I think about when designing someone’s website. Before divisions, html, images or content, I go for the color.
2. What is somebody promoting or selling and what feeling do they want to convey about it? What color(s) would convey that feeling?
3. Don’t let your own personal favorite colors influence the best choice for the client. I may not like puke brown but if that’s the color that works best, I grin and bear it.
4. Contrast is HUGE! I see it done badly so much and I don’t think it takes a genius to know that you don’t put a light colored text on a white background or a dark font on a black background. The point is to have people actually read the web page. A novel concept, I know.
5. Read about color theory to find out what feelings certain colors evoke.
6. Know what the color wheel is and what complementary, secondary and primary colors are.
7. Use tools already built for you like Adobe Kuler that makes choosing colors easy (and is somewhat addictive so don’t stay too long!).
8. Know the difference between RGB and CYMK.
9. PNG images support transparency, JPEG images don’t.
10. All of the colors in Photoshop are not necessarily the same shade when rendered in a browser. Use transparent images (that would be the PNG images I referred to earlier) so that the background of your image isn’t a different shade than the web page’s background even though they are ostensibly the same color.
11. Put all of the hexadecimal or RGB values for the colors you’re using for a site in a comments tag in the html or CSS. I also put a generic name next to the color (navy blue, dark brown, etc) or what I'm using it for (hover, link, header, background). It saves a TON of time going back and forth trying to remember what color is what number or what you were planning on doing with it.
12. Go find web pages that did right by their color schemes and learn from them:
www.amazon.com - Amazon uses simple white with (mostly) black text because let’s face it, black type on white paper is still the easiest to read.
www.bestbuy.com - We all know what Best Buy’s logo colors are (yellow and blue) so that’s what much of their website is. It makes sense and just seems…right somehow.
www.porsche.com/usa - Gorgeous website with blues, greys and whites. The colors connote that cool, efficient, good engineering vibe that you expect from a Porsche.
www.colouringcode.com - I get nervous about using red because it’s so bold but this website is just really beautiful. The red is offset by using complementary colors like black and tan so no one color overwhelms you. Extra points for NOT using a blue Twitter bird and making him (her?) red instead. Extra, extra points for those readers who know what a Black and Tan is.
13. Go find web pages that didn't do right by their color schemes and learn from them:
www.thehousesale.co.uk/legal.cfm - This is the evil gray text on a white background that I was talking about. Somebody go grab the torches and I’ll form a lynching party…
www.outletdiscount.com - I am not opposed to either blue or orange on a website, but in this case, I am opposed to them being used together. This website has other problems besides color but this blog isn’t long enough for me to get into it.
www.houstonjewelry.com - Remember what I said in number nine about using transparent images? See the BBB logo in the upper left of this website to see what happens when you don’t use PNG images. And red type on a black background reminds me of an 80's hair band album cover.
www.jarke.com/index1.html - Somebody stop the textures please! This site sells forklifts and pallet jacks but looks like it should be selling wallpaper if its background is any indication.
www.readwriteweb.com - I don’t have a problem with the majority of this website but the red type on a white background does bother me for some reason when reading it (and I have good eyes).
A couple of weeks ago, I had to organize an event at my day job. One of my tasks was to find a restaurant with a private room and organize a dinner complete with menu and drinks. Armed with three possibilities, I decided to take a look at the restaurant's websites to see what kind of menu and atmosphere they had. The first two had stylish and user friendly websites, but the third? Let's just say this particular website illustrated rather nicely what is meant by a bad "website."
The restaurant in question is Carnevor Steakhouse. Here's a screenshot:
The first problem with Carnevor's website is the flash intro opening. I'm not a fan of these and most people who are just looking for information aren't fans of them either. I've never sat through an entire flash opening, I hit "skip intro" every single time.
The major flaw of this website, though, is that its main page is a series of Wheel of Fortune style buttons that you have to rollover to figure out what they mean. But here's the thing, they don't stay rolled over so it starts to become a game of Concentration for you just to find what you're looking for. Needless to say, I didn't even contact Carnevor. The website simply turned me off.
I was curious to see just how bad websites can get. Turns out they can get pretty bad. For a fun romp through some bad websites, go to Web Pages That Suck. Post your favorites in the comments below...
Posts
