Blog Archives

This will be the first part of a two(or more)-part series. As I’m redesigning my website I am trying to create a more visually appealing website using Adobe Photoshop. This first entry will start at the beginning, which for most things is a good place to start. In my experience the beginning of the creative process is the outside world: inspiration, muse, whatever it is. After that is the sketch, the prototype, and finally

Inspiration

My inspiration typically comes from other websites that I might happen upon as I stumble through the web. While I meander, I take note of trends as they come and go. Recently one trend that has caught my eye is the use of an almost ribbon-like background for site navigations, as referenced in a previous post. This simple effect gives depth and a trendy feel to a website. There have always been little flourishes like this in print, but now with the help of my good friend Photoshop and some HTML, CSS, and JavaScript we can take these static designs and transorm them into something interactive and funcitonal.

Another part of this design that I would like to emulate is a static top navigation where the body content of the page scrolls up into/underneath the navigation. This makes it so if you have a long page of content the visitor can still see and use the navigation regardless of how far down they scroll. This part could be tricky, but I’m always up for a challenge.

<tangent>On the topic of trends, another thing I have noticed lately is that more and more sites are ditching the idea of keeping pages short, rather than long. Many sites I’m seeing recently seem like they just have one long page of content and more of them are going to a blog-style format. This could be because it is coming easier to create and manage blogs and blogs are starting to look more like websites than blogs.</tangent>

One final important part of the inspiration-gathering step is to think of a color scheme. It seems like a trivial aspect, but if you don’t have some colors in mind before you start trying to put your design together you are not going to get very far. This is one of the first questions I ask a client when we’re talking layout and design.

The website that I go to almost immediately before starting to put a design together: The Adobe Kuler Project is dedicated to color schemes. You can build your own or view and use what others have created. One of the great things about this site is that you can see and play with the various color values. You can punch in a CMYK or RGB value and get a HEX code for that color. Take the time to play around on this site.

 

Concept

Once you’ve gathered all the inspiration you can handle you will want to figure out how the various pieces fit together. This is still in dreaming mode. Some sacrifices may have to be made later on, but not quite yet. The good news is that if you’ve seen it done on a web page somewhere else it at least means it can be done. After that it just becomes a matter of how much time it will take to accomplish. I always start with pencil and paper. Pencil, not pen and start light. There will be a lot of erasing going on and I think graphite plants grow faster than trees… So it’s all good.

<tangent>I’ve tried to use various apps on my iPad to sketch things out and I just can’t get the precision I need. I recently saw a pen/stylus that supposedly works on the iPad. If I get one, I’ll be sure to let you know about it. My iPad may have to be the subject of an entry all on its own…</tangent>

After roughly sketching your concept, it’s prototype time.

Prototype

This part of the process takes some amount of expertise with Adobe Photoshop. It is well worth familiarizing yourself with Photoshop, or Gimp if you prefer a more open source option. Once you’re comfortable with the tools it becomes much easier to recreate graphics that you see online or even from your imagination. The other nice thing is that there is a vast network of photoshop designers who take the time to create online tutorials. Google is your friend in this process. Simply figure out how to articulate what effect you’re looking for and add “photoshop tutorial” at the end. It can take time to figure out exactly how to phrase what you’re looking for, but it it well worth it.

After you beat photoshop into submission and get your design created it is time to duplicate and flatten (Image -> Duplicate). You won’t really need all those layers for your web implementation. Here is a great tutorial by Carlos Aleman that runs through the steps of Photoshop design to HTML.

After my pieces are designed I go back to pencil and paper. Now it’s time to figure out how to cut the design apart to make it easily fit into an HTML layout. This is where some concessions may need to be made after asking yourself and answer a few questions. Do you want to use divs or tables? Or some combination of both? What size will the various pieces be and how will they fit together? Where will your static design be vs where the dynamic content will be? For my website the only part that I really want to be a static design is the header which contains the navigation. The rest of the site will be dynamic content managed in the Drupal backend. I would like to use <div> tags as much as possible and avoid a <table> layout since this is where the standards are moving, but I may have to use a table for my navigation links.

Next time: Laying out the HTML, CSS, and JavaScript in DreamWeaver before trying to weasel it into my PHP Drupal Template and more!

To be continued…