Week 2: Outside the Classroom

For homework over the weekend we needed to continue working on our Design Objective, hopefully contact whoever runs the site we are trying to redesign, create 2 personas and read Chapter 3.


Chapter 3: The Flexible Images

"blockquote" replace:

<div class="figure">
<p>
<img src="robot.jpg" alt=""/>
<b class="figcaption'>Lo, the robot walks</b>
</p>
</div>

CSS:

.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.55319149%; /* 12px / 470px */
width: 49.14893617%; /* 231px / 470px 8?
}

Prevent images from exceeding the width of their container:
img{
max-width: 100%;
}

Discovered by designer Richard Rutter**

max-width can also apply to:
img,
embed,
object,
video


Internet Explorer 6 and below don't support max-width property
Max-width support working in IE6:
most javascript-driven, usually on microsoft's proprietary expression filter

CSS-driven approach for IE6:
img,
embed,
object,
video {
width: 100%
}


max-width: 100% instructs image to never exceed width of their containers
width: 100% forces images to always match width of their containing elements

For smaller images (thumbnails, most embedded movies):
img.full,
object.full,
.main img,
.main object {
width: 100%;
}

write list of selectors that target certain images or videos

AlphaImageLoader

.logo {
background: none;
filter: progid:DXImageTransform.Microsoft. "
AlphaImageLoader(src="/path/to/logo.png", "
sizingMethod="scale");
}
Removes background image from element, inserts into AlphaImageLoader object sits between proper background layer and elements content
sizingMethod prop. dictates whether AlphaImageLoader object should crop, treat like reg. img. or scale to fit


I decided to go with the Chicago Donut Fest events. The new Date is April 22nd of this year. It features a bunch of different vendors from the Chicago area and different beers and mimosas. You must be 21 years and over to attend this event since there will be alcohol being served.

I did not have a phone number to call so I sent an email that was available via the event page and the EventBrite.com event page. I did leave my number along with the emails I had sent. One of the reps for the web page left me a voicemail while I was at work Friday afternoon and answered my questions though.

1. Who uses the webpage and why: "mostly people who attend the event as guests and vendors looking to feature their products to get more information.
2.The main reason for the site: "to inform the public on what the event will hold, contests we have, and any restrictions such as the age (21+ since alcohol is served)"
3. What would you change: "hard to answer, structure the site a bit more I suppose"

Design Objectives for Chicago Donut Fest webpage

My design objectives for my redesign of the Chicago Donut Fest include the following messages and emotions:

·       Messages:

o   I want the website to inform the viewer exactly what they will see when they arrive at the event. While it may seem a bit obvious seeing as it is a donut fest, I don’t want there to be any surprises.

o   I want the site to make sure the webpage openly states that it is an event for people 21 years or older. It does not mention anything about having to be a certain age until the very bottom of the first page but some viewers may not look that far into the event and try to make it a family outing.

o   I want to make the different contests and prizes stand out more. Viewers don’t see this right away and I think having contests and prizes make this event more fun and appealing and can really draw more people in so making these things stand out more can convey the event as being even more fun and exciting.

o   Another message I would like this webpage to give is that of opportunity for bakers, bakeries, and other donut vendors. It is the perfect event to feature your quality and skills at and to get your name or that of your company’s out there and build a bigger fan-base and business

·       Emotions/Feelings

o   Fun/Exciting- I want this webpage to give out a vibe of “fun” by making it bright and exciting but not overly so. The colors (pink, blue, purple) that the current page is using the highlight things are nice but I think they need to be a little more sophisticated seeing as this is a 21+ event.

o   Festive- I want the redesigned webpage to draw attention to all the different things going on within this event (contests, prizes, etc.). While tasting donuts is already awesome enough, highlighting the other aspects of this event is something I’d like to do for the new page.

o   Friendly- I want viewers to get the feeling that it’s not only a great event to go to with people you already know, but also a great place to talk to new people and possibly make new friends.

o   Opportunity- I want vendors who are looking to sample their donuts at this event to feel like it is a good place to feature their donuts and that they will be able to up their amount of customers and build a better business. I also want past vendors to get the same vibe from the website and continue featuring their donuts a this event.

Personas:

• Megan Hess
• Demographics:
• Age: 22
• Occupation: Student
• Location: Chicago, IL
• Goals:
• looking for a fun event to go to with her friends. Wants it to be a good place to hang out with friends while also meeting new people, wants a comfortable, friendly environment.
• User Behaviors:
• Outgoing. A planner. Has a sweet tooth and enjoys baking herself. Likes trying new things.
• George Smith
• Demographics:
• Age: 34
• Occupation: Baker/business owner
• Location: Arlington Heights, IL
• Goals:
• Build his business, recently opened a new bakery and would like to bring in new customers and get name out there 
• User Behaviors:
• Organized and outgoing. Easy going but professional. Attentive. Likes to create new recipes using baking/cooking skills