Pictures, Pies and Tarts…OH MY!

Stock photography is like a drug.  When you find some stuff you like it makes your job easier, you feel happy and all is right in the world.  But then there are the times you can’t get a hold of some good stuff that works and you gotta pay your boy Getty for some primo material or settle for something else.

"The first one's free kid..."

Sure Google is a good source when you’re in a pinch for free images but you run the risk of copyright infringment and when you’re creating sites professionally for a client the last thing you wanna do is get cheap with your images.  Rather than spending more money on stock photography or getting embarrassed with amature tactics, I suggest every web designer take an interest in Photography.  The benefits are two fold: 1. You can create the images yourself rather than wasting time and money searching and paying for a stock photo that may or may not be exactly what you had in mind; 2. If you are talented enough at it, you can offer your services as a photographer and make some cash rather than spend it.

And because I like to practice what I preach, I took my own advice this past weekend and shot a ton of pictures for The Pie Place website.  My client spent the weekend baking pies and tarts and they were tasty!  Savor the sweet pics and check out the coded homepage linked below.

For a complete gallery of all the pictures click here.

For a preview of the coded homepage click here.

Next week we’ll be working on the Photo Gallery for the Menu so be sure to eat a hearty meal cause these pies are mouth watering delicious!

Bring a napkin!

Give ‘em choices…just not too many.

First I have to apologize to the loyal followers for my false advertisement in the last post.  Deliverables were lacking last week and a post was not had.

Sorry.

But, that shall not deter us from our quest to complete the adventure of building a quality website.  This week we turn the corner from mocking up the site and actually begin coding!  Are you as excited as I am?  I thought so.  Sit back, hang tight and lets review where we’re at so far.

Hang in there, we're entering the home stretch!

As you may recall we’re designing the new site for “3.14 the Pie Place.”  There wasn’t a previous site (just a place holder) which gives us more freedom when coming up with designs.

“Designs?” you ask.  Yes, “designs.”

We want to come up with a few options for the client to review and perhaps pick and choose design elements that they like and wish to incorporate into the final design.  I say a few because when it comes to choices you don’t want to flood the client with too many and coming up with several designs can a huge time commitment.  And since 3 is a magic number, well stick with 3.

"3 is a magic number..."

To begin,  I went back to the informational documents we collected at the beginning of this adventure to help keep my focus on what mood, message and content is expect from the client.  I also used the wire frames from last week to maintain content structure and flow.  In addition, I asked the client to review similar websites and provide feedback on what she liked/disliked about them.  This feedback was very valuable and helped me get a better idea of what she is expecting.

Feedback I received:

• http://www.cornerbakerycafe.com/home.aspx

“while this site is kind of busy for my liking i really like the colors.  light blue and brown are kind of my thing.  it definately is really busy, though.  too many pics and stuff moving around.”

• http://www.bartramhousebakery.com/

“again, this is one of the best sites i’ve found.  it’s simple, i love the colors and the lighting and pictures and just about everything about it.  i love the way they show you the pies (menu) although it doesn’t work too well when you’re trying to click on one, so i wouldn’t want EXACTLY that, but something similar would be super awesome.”

• http://www.beatricebakery.com/

“this is another good simple one.  i like the way they have a whole bunch of items with pictures to click on on the front page.  kind of gets to the point quickly.  the colors aren’t my thing though.”

• http://www.theblissbakery.com/pies/

“i like the colors and the banner of this one.”

• http://www.deandeluca.com/bakery-shop.aspx

“i really like the layout of this one too, with the pictures of the really popular stuff on the front page.  that might be substituted by the ‘quick list’ you have though.  i also kind of like the idea of making you view more than one item at at time, you might see something else you like!!!!”

It can be a bit of information overload.  The trick is to review the information and when in doubt, use their feedback to make decisions.  For instance, I noticed that the client really responded to the large artistic shots on most sites and that she also preferred certain colors over others.  This helped me come up with the large banner picture for the homepage and a dark cherry red/brown/cream color palette.

Below is the homepage design that the client chose:

With this step complete I can now focus on coding and styling the actual site.  Some features might change depending on implementation and manageability but we hope to limit that to only a few iterations, otherwise the site could get stuck in revision limbo and never make it to the world wide web.

This weekend I’ll be making a trek to the client and taking a plethora of pie pictures for the site.  It promises to be delicious…beyond delicious! So stay tuned…

Creating a SiteMap and Wireframes

We’ve done the groundwork for defining the project.  Now it’s time to do some framework on the actual content and structure of the site.  Top accomplish this we’ll explore the SiteMap and Page Wireframes.

Below is a snapshot of the SiteMap I created for my client site www.314ThePiePlace.com:

This SiteMap is a bit more detailed than usual but since the site will be relatively simple and small I felt it would enhance understanding without becoming too cluttered.  Since my client is having her site built from scratch I felt it would benefit us both to get as much on paper as I could to get her thinking about what she does and doesn’t want on the site.  Rarely will someone remember to tell you EVERYTHING they want in the site.  this way I get them thinking about what content will be present in the site.

To build on this exercise of getting the client (and myself) to think about the content of the site, I created Wireframes for the various pages.  Here we can elaborate more on the specific content and layout of each page and get a feel for how we will eventually structure them.

The Wireframes are still a rough sketch of what the final product will look like and lack  detail, but they are excellent for getting your ideas on paper and create a starting point for future iterations.  To create the wireframes you can use anything from pen and paper to more sophisticated tools such as Adobe InDesign software.  I settled for the basic digital solution of MS Powerpoint and converted the slides to PDF.

3.14 The Pie Place Wireframes

For now these will serve to get the creative juices flowing and get everyone thinking about what content should be on the site and how it will be structured.  Stay tuned as the adventure of building a website continues…

"Same Bat time, same Bat channel!"

The Creative Brief

Often times we tend to get really excited about a project and just want to get started working on it.  Rarely do we want to sit around and write papers talking about what we plan to do.  If we wanted to write papers all day we would have taken up Literature Degrees.

But sometimes the best way to get started on what you really want to do is step back and plan your attack.

Cattack!

So before we lay down any HTML or CSS we must first write out our plan of action which starts with The Creative Brief.

For my client, 3.14 The Pie Place, I reviewed the informational survey and put together a summary statement outlining Project Summary, Audience Profile, Success Criteria and Site Goals.

These documents not only help me establish an understanding with the client for how the site will feel and function but they also provide a written agreement of what is expected from the project; further establishing a clear channel of communication between the client and designer.

Below are the Creative Brief and Customer Personas I developed for this particular project (3.14 The Pie Place; an at home bakery specializing in Pies and Tarts).

Creative Brief – 314 The Pie Place

Persona1

Persona2

Client Survey

As we talked about last week, assessing the wants, needs and expectations of the customer is paramount to creating an effective website.  To gain such knowledge it is very helpful to send the client a customer survey.

Not only will this help you gain knowledge of what the customer expects, but it will also serve as a screening tool for unwanted customers that might not be worth your time and effort.  In addition it also allows the customer to clearly think about what they want and write it down.  Often we overlook or forget about important criteria only to have them remembered later in the project sometimes causing unnecessary re-work or customer dissatisfaction.

Then there are the times you are working with friends or family you have a certain familiarity with and thus allow things to be too relaxed which often leads to miscommunication and headaches down the road.  By adhering to a professional and well thought out list of questions for the client, you can help avoid such breakdowns in the client/contractor relationship.

The following example involves a friend and her home bakery business.  When constructing the survey and sending it to her I had to keep in mind that while I might already know a lot about her business that I shouldn’t assume anything.  By keeping the relationship professional and organized I can ensure that a breakdown in communication will not lead to downstream problems in the later phases of the project.

General Information

1. What is the name of your company and your current (or intended) URL?

http://www.314ThePiePlace.com

2. Who are the primary contacts from your organization, and who has final approval on the project? Please list names, titles, email addresses, and phone numbers.

Catherine Milburn (Owner/Operator)

James Milburn (Tech/WebMaster)

3. What is your intended launch date for the new site? Are there any outside considerations that might affect the schedule (for example, PR launch, tradeshow, annual report)?

6/17/2010

4. How much are you looking/willing to spend on this site per month to maintain it?

Maintenance on an as needed basis (average $300/year)

Reasons for creating the site

1. What are the main reasons you are creating your site (new business model, outdated site, expanded services, different audience)?

To provide access to view my products, as I do not have a store.  Eventually would like to place orders online, to expedite the process.

2. How will you measure the success of the site? And what are your expectations for the site?

If I can start getting orders from people outside of personal acquaintances, that found me online.

My expectations are to get my product available to a wider audience, outside of people I know.

3. Do you have print media you wish to use in congruency with this site?  If yes, then how do you see them working in tandem to promote your business?

Yes, I do not have pictures of my products on my flyers.  So for people that would like to see what they are getting before they order, the site would have a gallery of products.

Audience/Desired Action

1. Describe a typical site visitor. How often are they online, and what do they generally use the web for? Give basic demographics: age, occupation, income level, purchasing habits. (Just think about your usual customers and try to classify them in various groups with as much detail as possible.)

People will first come to my site by word of mouth or from my flyers.  They surf the web occasionally while at work and are looking for something other than the typical cakes for occasions.  Middle aged, working mother, median income, purchase the occasional online product.

2. What is the primary “action” the site visitor should take when coming to your site (make a purchase, become a member, search for information)?

Search for information and place an order.

3. What are the key reasons why the target audience chooses your company’s products and/or services (cost, service, value)?

Reasonable prices, and love of the product.

4. How many people (as far as you can tell) will access your site on a daily, weekly, or monthly basis? Do you forecast usage to increase after the site launch and by how much?

5-10 a week; Increase to 10-15 a week

Perception

1. Use a few adjectives to describe how your site visitor should perceive the new site. (Examples include prestigious, friendly, corporate, fun, forward thinking, innovative, and cutting edge.)

Clean, cute, bold, eclectic, warm, comforting, exciting, mouthwatering.

2. How is your company currently perceived offline? Do you want to carry the same kind of message through your website?

Quality, tasty products from an at home bakery.  Yes, at first, until I can grow my business and operate a storefront.

3. How does your company differentiate itself from competitors? Do you think your current audience differentiates you from your competition?

I’m the only company in the area that offers ONLY my product.  Most places are bakeries that offer a variety or a diner that has a full menu; my company specializes in ONLY pies and tarts.  I know that people will come to me when they have something special or unique in mind because I have the ability to experiment and diversify my products.

4. List the URLs of any sites you find compelling. What specifically do you like about these sites?

http://www.go-greenbaby.ca/ I love the colors and layout of this site.  It’s simple and to the point.  Also the menu is viewable from every page you navigate to.

Content

1. Will this site use existing content from the current site? If so, what is the source, who is responsible for approval, and has the content been evaluated?

Existing site is a place holder only.  No content needs to be kept.

2. What is the basic structure of the content, and how is it organized? Is it a complete overhaul of the current site or an expansion?

Complete overhaul

3. Describe visual elements or content that should be utilized from your current site or marketing materials (logo, color scheme, navigation, naming conventions, etc.)

I like the warm brown colors and picture of the pie crust in the background.  Here are a couple of the logos I have.

Technology

1. Whom can we talk to in your organization to help respond to technical issues?

James Milburn

2. Are there specific technologies (Flash, JavaScript, DHTML, etc.) that you would like to use in the site? If so, how will they enhance the user experience? Please describe in detail.

Undecided (To be discussed in client meeting)

4. Will you have a need for secured transactions (e-commerce)? Do you already offer transactions online? Please describe in detail.

The ultimate goal would be to allow the consumer to order online.  The method we explored was payment via paypal. Marketing/Updating

Marketing/Updating

1. Briefly, what are your short-term marketing plans (specifically, for the site and the 6 to 12 months following launch)?

To expand my business by 100% by getting the word out to a wider audience about my products.

2. Do you have an existing or planned marketing strategy in mind to promote this site? If so, please describe.

I will add it to my flyer and send people there when speaking about my product.

4. Do you intend to keep the site updated? If so, how often? Who is responsible for updating and providing content?

Quarterly?  James Milburn

So, ya wanna build a Website?

Or perhaps you are put in charge of leading a team to design/build a website.  Or are you simply looking for someone else to build a website for you?  Either way it behooves you to establish a fundamental knowledge on the processes and strategy behind the creation and maintenance of a website (regardless of it’s size and scope).

Lucky for you there is an abundance of information on the web to help educate yourself on the matter.  One such resource is “The Web Style Guide” (3rd Edition) which has an online version that covers a myriad of web design related topics.  Recently a friend sent me a link to a section of the online guide discussing The Site Development Process.

As a Web Design student, who is relatively green on the subject, I found it to be very informative and it made me think about how my role in the development process affects others. It also got me thinking about how a web designer should keep the client’s best interests in mind when developing a site.

How you (the creator) chooses to code and structure the site will greatly impact the amount of downstream work it takes to maintain it.  For instance, taking shortcuts in the design, not properly validating code, etc. might save you time in the short term but it could end up causing untold hours and money on re-work to fix and maintain later.  Not to mention that it could damage your rep as a designer and cause a loss of business in the future.

So be sure to stop and carefully consider the whole picture before you rush into developing your next site.  Whether you be the client, designer or webmaster, it benefits you and everyone else around you to plan for the long haul because no one enjoys stumbling upon a broken website that time and society long forgot.

http://www.limpfish.com/

Web Quest: Site Evaluation Framework

What makes a good website…good?  Anyone can see and use a website and immediately tell you whether it is good or not but how do you quantitatively evaluate such a site?  To do so, we will first have to construct a framework of principles and guidelines that define the design of a good website: Site Evaluation Framework.

Now that we have the framework, let’s put it to the test and evaluate a website.  For this exercise I have chosen the website for 82Design (www.eightytwodesign.com).

Since we humans are very much visual creatures let’s start by analyzing the color then visual and finally message and communication design qualities.

COLOR: Notice the color palette is kept subtle and simple (off-white, teal, tan and chocolate brown/black for text) which creates a calm and cool feeling.  In addition to being simple the color scheme maintains clarity and consistency.

VISUAL: Simplicity, continuity, balance.  This site implements all three beautifully.  Foreground and background colors don’t distract from the content and a common theme is maintained throughout the site.  The symmetric balance of the site also offers stability which is helpful in gaining the user’s trust.

MESSAGE & COMMUNICATION: The creator’s of the site have done an effective job of communicating their message not only through text but also images.  This can be seen immediately in their logo/banner at the top of each page.  In addition they masterfully use interesting and catchy images that help tell the narrative in a clear and concise manner.

Another important aspect of the site is its consistency from page to page.  The overall theme is maintained and images are properly used to support the content of each page.

CONCLUSION: While 82Design’s site doesn’t meet ALL of our good design guidelines, it does meet most.  But meeting all the guidelines and characteristics isn’t what makes a website good.  Rather, a good website utilizes proper design techniques while minimizing or eliminating the bad.  It also helps to have a sense of humor and a strong understanding of who your audience is.  And it seems 82Design has that covered as well.

Hello world!

I am Makin, hear me ROAR!