Tag: Web

The Mission Church of Boston site redesign

I’ve worked with PK of Imperial Consulting on several different projects. One of our recent projects was a site design for The Mission Church of Boston where I provided the site design and HTML/CSS and PK hooked in the content management system and other nifty back-end features.

PK IMed me this morning letting me know that there was a huge traffic spike because apparently that is where Senator Kennedy’s funeral is taking place this weekend. I made sure the site was still looking mostly polished and decided this would be a good chance to finally motivate myself to post another design process blog.

The Mission Church is a huge Boston landmark and still functions as a church, but the original site didn’t really do it justice. Here’s a screen shot of what the site looked like originally:

Old Mission Church site

After finding out the main things they wanted to feature on the home page, I came up with four different design ideas.

1

2

3

4

This provided the church a starting point for discussion. They decided that they wanted a briefer header — no big image at the top — but they liked the use of photographs for the four different sections. The next iteration resulted in this:

5

As it so often happen with “design by committee,” the discussion went full circle, so a photo went back into the top and the layout dimensions shifted again. I also made a design choice to colorize the photos so that they blended better visually and toned down the overall look of the site. I can’t remember why we went from the parchment letter in the left column to small icons, but I like it better below.

6

The final change was to add a background color to the page and make the content area pop out more with a drop shadow. We tried white, yellow, and blue. They picked blue.

7

7b

7c

The transition from full control over HTML/CSS to CMS-generated content (content management system) went fairly smoothly with only a few minor tweaks. Here is the site as it stands today:

missionchurch

As usual, I appreciated PK acting as the manager and middleman so that I didn’t have to sit through hours of design-by-committee meetings. 🙂

“Living a Life of Impact” graphics

Our church has a “fall focus” every year when the students come back where everyone – children (sometimes), junior high and high schoolers, college students, and adults – comes together to focus on the same topic for six weeks. In the past, the church has used packaged “curriculum” such as 40 Days of Purpose or Living Beyond Ourselves; this year, the staff created their own material for what they’re calling “Living a Life of Impact: Learning from the life of David.” I created screen and print graphics for the main image that they’d be using.

I was given full freedom and initiative for the design. All I knew about the topic was from a short description of the topics for each week (looking at different aspects of David’s life) and that there would be a community service focus on one of the weekends.

After spending an hour or two browsing istockphoto, I chose this image of a wheat field. The metaphor of a harvest, or fruitfulness, is a common one from the Bible, and, I thought, fit in nicely with the theme.

Simply layering text over the photo seemed a little boring to me, so I started playing with different effects. The final image includes three circle shape layers of different shades of grey, set at various opacities with the Overlay mode to pump up the intensity of the colors. The rings emphasize the idea of “impact.” I was thinking along the lines of ripples, but looking at it again, it also works as a target. I used a Futura variant for the main font and JaneAusten for the script font.

I also created a print-friendly version of the graphic, using gold and brown text with the graphic limited to the circles. This was used for the cover of the devotional booklets, on letterhead, and in other printed announcements. I didn’t have control over the printed materials other than providing the graphics, but I think it turned out pretty good.

Web design: The EHR Group

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

Original EHR Group web site 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:

EHR Group wireframes

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:

EHR Group color ideas

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.

EHR Group home page layouts

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.

EHR Group home page

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.

EHR Group about page

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.

Blog under construction

Last night I did a quick-and-dirty switch to the WordPress Sandbox theme and copied, tweaked, and hacked at my CSS to get it into a rough working condition. I think it took about an hour and a half, in between watching kittens play and selling off a chair to a Craigslist person, so I’m talking very quick and dirty! It mostly works in Firefox right now, although I noticed some text spacing issues with IE6 (apart from the non-png transparency issues), but please leave a comment if you notice anything else funky. One thing new is that I have TWO sidebars to play with (right now one is mostly hidden) so I get to figure out what I want to do about that! And I might change the color, because although I like the blue on its own, it clashes a bit with the teal WordPress Admin bar when I’m logged in (which is all the time).

I do like the background effect that I ended up with, however — less “messy” than my corriehaffly.com site, so I’m thinking about switching the corriehaffly.com site now!

Anyway – don’t be surprised if you see things moving about frequently. Or just stick to your RSS reader and wait until I ask for official bug testing. 🙂

Update: I changed to teal from blue and played with sidebar stuff and gave myself a new headline (“This is my blog. I can be wordy. But I take cute photos of kittens, so it’s all good.”). Now I need to get to work, so I’ll leave this as-is for now!

corriehaffly.com redesign

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. 🙂

Announcing Custom Shadow Box

I am very very very excited to announce that my new “side business” is finally opening its virtual doors. VERY.

Introducing Custom Shadow Box at www.customshadowbox.com!

Custom Shadow Box web site

Business plan? What business plan?

The [rather uncreatively named] business is meant to be a side project for me. I enjoy working with my hands, and this is an opportunity to try to get some additional income while doing something else I love. I’m not expecting a high volume of orders because of the price point, so I expect to show a loss at the end of this year (for the shadow box side business part, anyway). The startup costs weren’t high, but I did invest a nice chunk of change into professional photography in addition to fictitious name filing fees.

Nevertheless, this has been a great (albeit sometimes frustrating) way to learn about selling tangible product in California, which involves getting a reseller license, dealing with sales tax, and all that fun stuff. Making the web site was also a great learning opportunity. More about that in a bit.

Beginnings

First shadow box
It started with a wedding present given to my sister back when she got married. A friend had arranged the invitation artistically in a small shadow box with silk floral accents that matched the colors of the invitation. I always thought it was a cool idea, but it wasn’t until my coworker got married that I finally tried it out. Their invitations were wrapped in orange vellum with a gorgeous patterned ribbon. My coworker had gerbera daisies in her wedding, so I picked some silk flowers that matched the invitation and put it together.

Fast forward to sometime last year. I was brainstorming ways that I could develop alternative streams of income. By this time, I’d created some shadow boxes to display my own wedding photos and invitations and created a couple more for other friends, as several of my friends were conveniently getting married. I played with the idea of making custom shadow boxes for money and sketched out some pricing ideas. Come 2007, I decided that one of my main goals for the year would be to get this new business idea up and running.

Process

First, the logo. Below, you can see the logo evolution. I started with a simple 3D box shape created in Illustrator and eventually made the frame “thicker” to give it some depth. While I liked the inner shadow effect (large upper right), I eventually moved the shadow in front of the box so that I could do cool things with Jason Gaylor-inspired flowers. I liked my original wild tangle of flowers (third row left), but when reduced to logo size it was too hard to tell what they were (my sister Angela’s feedback), so I simplified the shapes for the actual logo itself. I didn’t want the time I spent on the crazy flowers to go to waste, however, so you’ll see that they show up in other parts of the site.

Custom Shadow Box logo evolution

My original logo and web site design color was teal, but my graphic designer sister said that I should pick more neutral colors so that the site wouldn’t clash with my product pictures. Above you can see my attempts at choosing other colors. Eventually I figured out that it would work best to have the shadow box mark in one color and the text and the rest of the site to be in another color. I also made the page titles green to add some additional oomph (that’s a technical term, by the way).

Web site colors

The web site design went very smoothly. I used my wild flower mass as a page background and already had in mind the kind of feel and style I wanted for the web site, which I’d describe as clean and web 2.0-ish.

The web site development, on the other hand, was a fun learning experience and challenge:

  • I tried to use as-clean-as-possible HTML for the markup. I generally suffer from divitis so this was my attempt to use as few divs as possible. (Note – I don’t think the site validates 100% quite yet. Still working out some of the kinks.)
  • I bought DOM Scripting by Jeremy Keith and then completely redid the gallery page to use better markup, with a fancy Javascript file controlling the application of classes.
  • I also used DOM scripting to get the order page more interactive, with prices highlighting as you select options and the bottom invoice amount automatically updating as you “build” your shadow box.
  • I got to experiment with a totally new illustration style. More below.

There are still some challenges with the order page that I haven’t figured out how to deal with. There’s something about my script that won’t allow me to automatically put the focus on a text field after selecting a radio button (such as Calligraphy Options). Also, if you leave the page and then go back to the order form, the radio buttons are selected but the Javascript stuff has all been reset so the prices aren’t highlighted and the order total is “$0.” Not sure what to do about that either. If you’re a Javascript expert and would like to provide some tips or want to monkey around with my code, please do!

Shadow box photo
The next step was to get some product photography. I had put in some temporary pictures into my gallery of older shadow boxes I had created and photographed. Some of the photographs were okay (such as the one used on the home page which had removable glass) but the photos of black frames were generally not usable because of reflections on the glass. I chose Bonnie Anglin from Anglin Art and Design because of her experience with product photography, although I think I offered her a new challenge with photographing glass-faced picture frames! You can see her great results on the gallery page; she took all the photos except the first one and the third one.

At about this point, I also decided that I wanted to put some illustrations on the how it works page, which was text-heavy and boring. I didn’t think my typical comic style would work, so I contacted Paige Pooler to see if she was available. Unfortunately, she wasn’t, but I was inspired to try out a different style of illustration and see how far I could take it. You may remember my first attempts; that specific portrait ended up on my about page. The other illustrations took a while to complete because of a bout of procrastination, but I’m very very pleased with how they turned out. Notice that I managed to incorporate the wild-flowers in the illustrations as well. See the other illustrations on the how it works page.

Custom shadow box illustration

Using code culled from other projects, I finished up the web site by getting the order form to work, then actually shipped shadow boxes (long-belated wedding presents) to test the shipping price. US Priority Mail ended up being the most cost-efficient way to ship. I ordered boxes from Uline although I still need to find a source for bubble wrap (Office Max will do for now).

And this morning, I went live!

Next steps, and how you can help!

Things I still need to do:

  • research bubble wrap costs and find a source
  • create business card and brochure
  • create invoice template
  • finish baby shadow boxes for friends (need to add baby photo) and take photographs for gallery

How you can help:

  • Kindly spread the word! Word of mouth, blogs, anything will help.
  • Provide feedback about the general business idea, site, and price point.
  • See a typo? Let me know!

Creating custom Outlook stationery

I made some custom Outlook stationery with my new logo:

Customized Outlook stationery screenshot

Making your own custom Outlook stationery is pretty easy if you know some basic HTML and CSS. All you have to do is make a really simple web page and move the .html and graphic files into a specific Documents and Settings folder. Here’s what I did:

1. Design a very basic tables-based web page.

The more basic, the better. Complex layouts might break depending on the email client the recipient uses. Some email clients aren’t very good with interpreting CSS, so you’ll want to go back to old-school tables instead of using fancy divs. My stationery basically has two one-cell tables — one with extra padding for the body of the email, and one to hold the footer info. (Put a paragraph tag inside the email body table cell to reserve some space for the actual email.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<p> </p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="emailgraphic" width="340" height="110" border="0">
<!-- you can substitute text here, instead, if you want a text footer... or a do a combination of text and images -->
</td>
</tr>
</table>
</body>
</html>

2. Apply CSS to style the email and table cells.

Basic CSS seems to work pretty well with emails, so I add some styles to the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style text="text/css">
body { background: #ececec; margin: 0px; padding: 0px; color: #000; font: 10pt Verdana, sans-serif; }
.address { background: #fff url('emailbg.gif') repeat-x top; font: 8pt Verdana, sans-serif; }
</style>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<p> </p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="address">
<img src="emailgraphic" width="340" height="110" border="0">
<!-- you can substitute text here, instead, if you want a text footer... or a do a combination of text and images -->
</td>
</tr>
</table>
</body>
</html>

My table cell now has a background graphic applied (to give the illusion of the shorter white strip) and some basic font and color properties defined.

For the record, these are what my two email graphics look like:

Main email graphic

Corrie Haffly custom Outlook email graphic

Table cell background graphic

Background graphic

3. Add an inline style to the body tag.

Sometimes Outlook won’t recognize the body font that you’ve specified (I haven’t really tried to figure out why) and will use your default Outlook font instead. But adding an inline style to the body tag will usually fix this, if that bothers you:

<body style="font: 10pt Verdana" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

4. Move files into Outlook stationery folder.

Now, move your HTML file and image files into your Outlook stationery folder. Mine is under C:\ Documents and Settings\ yourprofile\ Application Data\ Microsoft\ Stationery.

You might want to name the HTML file so that you can recognize it, as Outlook uses the file name as the “title” of the stationery.

5. Set up Outlook to use the stationery.

If you want to use this stationery as your default stationery, go to Tools > Options.

Click the Mail Format tab.

Click the Stationery Picker button and find your new stationery (by file name) in the list.

Choosing stationery.

Or, use multiple stationery.

I have multiple stationery for different email accounts. You can go to Actions > New Mail Message Using… > More Stationery… which brings you to the Stationery picker. The cool thing is after picking your stationery this way, Outlook makes a shortcut in the New Mail Message Using… menu so that you can select it more easily.

Pick from multiple stationery.

If you don’t know basic HTML/CSS, then the first two steps might not be so easy for you! You are welcome to start with my code and tweak it by referencing w3schools or the free online HTML and CSS resource of your choice. Or, contact me and I can make the changes for you for a reasonable fee. 😀

The HTML code is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License. Graphics belong to me, obviously!

Web site design v2.1 colors

Previous rounds: v1, v2

I started out with similar color choices as v1…

Green:

Web site design v2.1 green
Blue:

Web site design v2.1 blue

Purple:

Web site design v2.1 purple

Teal:

Web site design v2.1 teal

Then I started thinking about a seasonal design…

Summer:

Web site design v2.1 summer

Fall:

Web site design v2.1 fall

Winter:

Web site design v2.1 teal

Spring:

Web site design v2.1

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!