I was excited to get started on the Gallery area on the site. It's one of the areas that was particularly bad in v9. It doesn't get a ton of traffic, but maybe we can turn that around. I enjoy it very much and have a slew of content to get posted to it over time.

We start out by working in Photoshop so we can keep our mind creative and do some visual exploration without the baggage of thinking analytically with code.

We move over the header graphic. Seems a little funny to do that since it's already implemented on the site and in a better way, but this will help us keep our design environment as real as possible.

We build a navigation bar for the gallery. Instead of a big nasty tag cloud at the bottom of the layout as we had before (and even that was an improvement to the messy category and tag layout from early v9 days) we do something different. We're going to make a dropdown menu you can click to reveal the tags you can browse by, and even that is built into a bit of a breadcrumb style layout in the navigation bar. So it serves kind of triple-duty: page title, breadcrumb nav, and exploratory dropdown nav.

This design, to me, is something I probably wouldn't have come up with if I didn't make these exploratory trips back to Photoshop.

Comments

  1. John Lueders
    Permalink to comment#

    I need to get better at Photoshop…I always use Fireworks because I can work it but it is not as robust as Photoshop. Will be looking for some tuts online. If anyone knows of an awesome getting started with Photoshop (maybe a 201 level not a 101 level), please post it.

    When I see Chris draw a big rectangle over another object and then use it as a layer mask and then delete it and it quickly produces the desired effect..it looks quick and easy but it ain’t.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.