This is a project I completed several months ago, but it’s taken me a while to actually take pictures of the completed product!

A couple years ago, I had created a simple tri-fold, two-color brochure for my church. This year, they asked me to put together a full-color, updated brochure based on a shorter, wider tri-fold style. Here are the two sides of what I came up with:

A different designer had redesigned the church’s templates used for weekly bulletin and sermon notes, and I tied in some of the elements from their design with this brochure: The gold circular icons, the “strip of photos” treatment, and the use of a serif type for the titles. I tried to make the design a bit more fluid by adding in some multi-level lines connected with curves and plenty of rounded corners. I also tied in some of the photos that I’ve used for the FBC web site.

As I don’t have a background in print design, I depend heavily on the printers telling me what they need from me. Luckily the Illustrator files I provided with embedded photos seemed to be enough! I was surprised one Sunday by seeing the new brochure, printed on glossy card stock, in the chair rack in front of me.

Here are a couple photos…

The front of the brochure:

First open: The right side is still folded over although the connected gold line gives the illusion that it’s one spread. (I was impressed that the printer was able to match up the lines in the design from one side to the other.)

“3D” photo of the brochure:

I wrapped up a web design project a couple months ago for The EHR Group.

Mike Uretz, the Executive Director, came to me with a several-year-old FrontPage web site. Mike thought the web site looked dated and wanted something more contemporary. As his business consults with medical professionals about what electronic health record system would be best for them, he wanted his web site to appeal to both people who would be familiar with technology but also to be easy enough to navigate for people who weren’t very computer savvy.

I started out with some rough greyscale screenshots to provide different layout options. These are some of the ones that weren’t chosen:

The chosen design used tabs to help indicate the section and had both dropdown menus and left column submenu areas to provide obvious ways for a user to navigate the site.

I then started to work on some rough ideas for the home page layout, then worked on color schemes, shown in the screenshots below:

At this point, Mike still wasn’t sure exactly what he wanted on the home page. He had some ideas about the types of content areas he wanted but hadn’t yet pulled together the specific marketing text and messages that he wanted to convey. My initial round of screenshots had used a wireframe concept to lay out the content areas, using grey boxes and short placeholder text to delineate content areas. However, we hit an impasse as Mike expressed dissatisfaction with the direction of the design. Both Mike and I were still feeling each other out and trying to figure out how to best work together and communicate; it took a few phone conversations for me to realize that Mike was a very visual person and actually didn’t work well wireframes and content placeholders. So, I asked Mike to develop the specific content and wording he wanted for the home page while I built the HTML and CSS for the other pages. Then we went back to redesigning the home page, which went a lot better once he could see the actual content in the screenshot.

Below is the final result for the home page. Mike liked heavier use of graphics for the home page, including the two bottom left graphics, which we used in the other pages as well.

I had tried using smaller graphics to accent the pages initially, but Mike thought they were too artificially slapped into the content area. He liked it much better when I tried putting a larger graphic into the background behind the text. Each page has a different image related with the content.

By the end of the project, our working relationship had smoothed into a good flow. I understood Mike’s communication style; he was able to trust my design and working process. We were both very happy with the final result, which allows Mike to use Microsoft Expression Web to make minor changes to the wording himself. This is a project that I’m excited to add to my portfolio and which has taught me many valuable lessons about customizing my process to fit the needs and personality of the client.

I thought some people might be interested in seeing some examples of photo editing. As I mainly work in web design, I have an easier time with photo editing because web images are relatively low resolution and don’t require as much painstaking attention to detail.

Below are two photos of a condo development and some comments about the process.

Here is the original photo. I was asked to remove the tree on the right side, and, of course, straighten the photo.

I used the Crop tool in Photoshop to crop the photo, rotating the cropped area to straighten the building. I also used the Levels command to lighten the picture slightly.

I created a new layer and then worked on cloning the sky to cover up the tree (the cloned areas are tinted green). The clone tool has an option where you can “select all layers” — this allows you to clone from below layers onto a new layer. By cloning onto a new layer, you don’t “mess up” the original photo and can make edits more easily later. This is one example of nondestructive editing!

I then used the marquee tool to select a part of the building (the next “section” over) that didn’t have a tree over it and pasted it into a new layer (tinted purple). I created a layer mask for that layer and carefully blended out the edges.

Here is a closeup of the photo with tree:

And a closeup of the edited sky is below. The landscape is a bit blurred together, but when shrunk down to web resolution, it doesn’t really matter.

And a closeup of the edited building as well:

Now, the final picture at approximately the final dimensions:

The next photo was a bit more challenging. Here’s the original:

Unfortunately, the marina buildings (with the red frame and yellow stairs) were blocking the specific units that needed to be shown in the image. I was asked to do some “Photoshop magic” to show those units as well as get rid of the light posts — the one on the left of the building, and the one sticking up right in the middle.

I worked a little differently on this photo. Instead of working first with a high resolution photo, I worked directly with the smaller web-resolution photo size. I wouldn’t recommend this, but I was basically short on time and needed to work faster! (So, no close-ups for this picture.)

First, I copied the middle two floors on the left side and pasted them onto a new layer (purple). Moving these down “one floor,” I was able to get the bottom unit to show up. I used a layer mask to fade out the edges, then used the Warp Transform command to add the tiny bit of perspective needed for the bottom floor to look “right.”

Creating a new blank layer, I used the clone tool to remove the light posts. You can see the edited results in the pink-tinted layer.

Unfortunately I had no idea what the bottom part of the building looked like just below the windows and balconies. I copied the middle bottom section (where the formerly edited light post used to be) with the bottom wall and balcony shadow and pasted it twice to continue the wall to the left (yellow). Finally, I removed the marina buildings by grabbing a piece of the retaining wall into its own layer, then stretching it and masking it (green).

And here’s the final edited photo. It’s a pretty rough job, but again, at web resolution, it doesn’t matter too much and gives the viewer a decent idea of what the building looks like!

Shameless plug: I have a few tidbits about photo editing in my book, The Photoshop Anthology, which is written specifically for web developers/designers who want to learn more about Photoshop. Through the different solutions presented in the book, I talk about the clone tool, layer masks, and the other tools and techniques mentioned here. If you found this article interesting and would like to buy the book, please consider purchasing it through my affiliate link above!

A project I’ve wrapped up recently also has the distinction of being the first job I’ve gotten from a blog reader, P.K. I was asked to design a logo for Gear Desk, a (beta) directory for high-end build-it-yourself audio gear (updated 8/24 – sorry, P.K.!).

P.K. had some specific ideas initially and asked for some sketches involving either a dial/knob or a power button. My first round of sketches stayed within the boundaries he had defined. In our first conversation, he had also mentioned that a bonus would be to have a business card that looked like audio equipment with the logo, so I sketched a few possibilities for how the logo shape might integrate on a business card.

After round 1, the power button idea was thrown out altogether and I was asked to play more with the dial/knob shape.

P.K. tended to like minimalistic, clean shapes. While he liked 6a and 6b, he was afraid that it was too abstract and didn’t really say “gear.” This was true of most of the knob shapes – taken without any context, it could be difficult to figure out what the shape was. P.K. gave me carte blanche to find a new direction for the logo, agreeing to an extra round of sketches.

I went back to the original photos of high-end gear and audio equipment that P.K. had originally provided, doing some sketches of the ones that looked nice and trying to distill elements that would really speak “gear.” Some of the notes I made below: “Rounded corners look more high-class (like ipod)” “Feet really help make it look like ‘gear’” “Dials by themselves do not communicate ‘gear’” I sketched out a few more ideas, basing them on actual pieces of equipment but simplifying the shapes.

After looking at this round of sketches, P.K. felt comfortable letting me run with three options and creating digital versions.

P.K. really liked the simplicity of #1, but thought a “dimple” would make the knob look more like a knob, and less like a projector lens. I did one more round of digital sketches, along with some color samples so that he could see what it looked like with color.

After a few more screenshots with different fonts and colors, we finally ended up with a logo that we were both happy with. The final logo used a “tick” instead of a dimple, which we thought helped to make it look more like a knob (and less like a projector lens highlight), incorporated the rounded corners and feet to make the box look more like equipment, and used a clean serif font for a more “expensive” feel.

P.K. was great to work with. It was a new experience for me as he was the first of my clients to use IM and was able to give me instant feedback. I appreciated that he was very open throughout the whole process, willing to scrap our original ideas and go in a totally different direction — which thankfully worked out!

Now I just need to take the time to update my portfolio…

Previous rounds: v1, v2, v2.1

As I mentioned in my August goals review, I was going to try to carve out time on 8/13 to work on getting my new web site design up.

And I did!

www.corriehaffly.com

The rest of this week, I’m going to try to commit an hour each day to clean things up.

• The older HTML is a bit sloppy, and I want to make it a little bit more semantic (using strong instead of bold, for example).
• I changed “services and rates” to just “rates” and “portfolio” to “work,” so the page titles (and file names?) will need to reflect this change.
• I need to weed older stuff out of my portfolio and add some newer projects.
• I might switch to the larger thumbnail (bottom of the home page) for the main work page.
• I want to think about what else I can do for the right column and dividing sections. Something with the headings? Some sort of divider? It’s missing something, but I’m not sure what quite yet. Maybe more fun/whimsy.
• I want to think of more clever things to put in the talk bubble for each section.

I can’t say that I love this new design (whereas I do love my Custom Shadow Box design), but it will do for now.

One thing checked off my monthly goal tracker sheet! I finally designed business cards and placed an order for 250. I paid extra money for printing on the back side and for glossy paper; I’m excited to see how they turn out.

The next time I wake up and can’t go back to sleep, I’m designing a brochure.

This weekend, some of my friends and I helped to paint a room. Julie invited us to help her paint her spare room for her nephew with a fun blue-green color scheme and said that she was thinking of doing some kind of mural, as well, with a quote from Guess How Much I Love You: “I love you to the moon and back.”

Here was the final result:

I must brag about my creative friends — Holly, who designed the mural and did the frogs (with some “fill in” help from Julie), Julie, who painted the moon, and Liz (a.k.a fellow baby shower decor designer), who came up with the idea for the stripe of blue around the rest of the room and was our general manager for the day. My bragging rights come in from doing the lettering and painting the lily pad. We all prepped the room together and painted in stages; both colors needed two coats and we had to wait for the blue to dry before taping it off to do the green. The blue bled a little bit behind the painter’s tape; I figured out that if we cut in the edges of the green very carefully with a paintbrush instead of simply rolling over it, that problem could be avoided — and it worked!

It took about eight hours (with a short break for pizza) from start to finish, and we were all very pleased with it by the end. Except for Julie’s nephew, who was just slightly disappointed that Holly didn’t have time to make a dragon on the other wall, too, as planned…

They came!

Previous rounds: v1, v2

I started out with similar color choices as v1…

Green:

Blue:

Purple:

Teal:

Then I started thinking about a seasonal design…

Summer:

Fall:

Winter:

Spring:

I think I could come up with the scripting to add the proper stylesheet for my normal web site, but I’m not completely sure yet how I’d do it for the blog (currently hosted at wordpress.com). In any case, I think I’m ready to start building out the HTML and CSS and graphics and tweak as I go!

Second round… (see round 1)

I started with this new idea:

v2.0

The new speech bubble text reads: “I whip web sites into submission, but I’m nice to everyone else.”

I moved the Featured Work down and tried adding little comics. I liked this a little bit better; having the Featured Work on top made the design feel too top-heavy since the logo is so huge. I also moved the speech bubble to the top of the header and reduced the amount of text inside.

It seemed a bit busy to me, so I tried pumping in more white space in the main content area and bumping the header bar a few sizes larger:

v2.1

With circles… (this could work if I decided to go with a different color)

v2.1b

I like the basic idea of this one better than v1.0, so I think it’s just a matter of tweaking the colors and balance to work for me. I’m also not committed to the Photoshopped circle/leaf clusters.

At this rate, maybe I’ll have a new web site design by the end of next month.

Update 7/7: Follow the design process… The story continues with Web site design v2.1 colors