Week 5B

During class today we had almost the entire time to work and each of us met with Pannafino to show him our sketches and ask him any questions about our website.

Week 5A

Today in class we started out demoing the coding from GRID and creating a responsive nav. bar.

After that, Pannafino had us pair up with someone in our row (who we don't sit next to) and share our design ideas and sketches. I paired up with Natalie who sits two seats down from me.

For homework we then had to create design sketches for our sub pages and next class we will each meet with Pannafino to go over what we have.

Week 4: Outside the Classroom

For homework over the weekend we had to read and work through GRID ( http://adamkaplan.me/grid/ ). I took notes and also put the coding into sublime although nothing came up in the webpage so I have to go back and see what I missed.

We also had to take tracing paper, or paper you can see through pretty well, and lay it over top our wireframes and start creating the design of the home page of both our mobile and webpage event pages. I am still not 100% sure how I want my design to look like but for now I created something simple and easy to follow.

This is what I have so far:

Mobile:

 Webpage:

I do plan on creating a few more designs but this is what I started with.

Week 4B

Today is class we started out by going up to Professor Robinson's 144 class and mentor a student we were paired up with for about 25 minutes. During the semester we will be helping the students in her class as part of our grade. After each meeting (there will be three throughout the semester) the student we are paired up with will evaluate us and that is how Professor Pannafino will grade us. Today I met with Morgan.

After that we went talked about our homework for Monday which is to take tracing paper and lay it over our wireframes to then create detailed sketches of our design for each part of the mobile and web page for our event. We also need to read and review GRID: http://adamkaplan.me/grid/ and practice it on our own.

The rest of the class period we were able to get started on our homework.

Week 4A

Monday's class was canceled due to Professor Pannafino being sick but he told us to create wireframes for our two sub pages, both for mobile and web.

I created pages for vendors and photographs of the event. The mobile version is going to be more simple while the web version will have more detail.

Week 3: Outside the Classroom

For homework over the weekend we needed to create wireframes for the mobile site for our event and the website for our event. We also needed to create a moodboard for our site.

Putting a moodboard together is a bit tough for me, I'm still not 100% sure how I'd like my site to look. I do have an idea for layout though which helps. This is my moodboard:

The wireframes were relatively easy to do, but I still feel like I may be missing something. This is what I have so far:

Week 3B

Today in class we started out by finishing the coding examples from last class. I also started typing up all of the codes and examples and saving them to my computer so I can go back and look at them if I need to.

After that we spent just about the rest of the class meeting with a few different people in the class to go over our event and list what content is most important, for the mobile site and the website.

After talking to three different people these are the lists I came up with:

Mobile Site:

1. Date, Time, Location
2. Vendors
3. Map of vendor location
4. Map of local hotels
5.  photos

Website:

1.  Date, Time, Location
2.  Description of event ( age limit! )
3.  Vendors
4.  Photos
5. Hotels

For homework we need to take these lists and create simple wireframes for both the mobile site and website. We also need to create a mood board.

Week 3A

Today in class we started out by going over the high school presentations, Alina and I are going to be presenting at a school in Hershey.

After that a few students presented the website they chose to redesign and talked about their design objectives, the personas they made up, and any ideas they had for their website. Then each row went down the line to each person and presented our sites and ideas to the people in our row. We got feedback from each other which was extremely helpful.

Once we finished up with that we started coding (YEAY!) and learning how to create responsive webpage.

(WRITE CODE AND INSERT SCREENSHOTS HERE)

We ended up running out of time and didn't finish the whole thing but for homework Pannafino assigned a reading/short demo to do and that really helped explain how to create responsive webpages for different sized screens. I'm not sure if I did it correctly as far as the coding because my page doesn't really change but I know Pannafino will go over it more and it'll really click with me soon.

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

Week 2B

Day of Design Presentations

9:15 - Alexander Reyna of MLB

Sports visualization

Ideation -> product design -> UX -> Marketed product
Research -> Understanding -> opportunity

User experience/ product design / motion design

MLBAM

engaging content

Technology: visual rep or stadium -> show play in different way with stats, breakdowns, position of players, trail of ball and players, etc

3D visualization of play during games -> gives viewers different look of games they've never seen before.

Prototype: real time data of ball trail/velocity, bat trail/velocity, tabs to click for more info on player, pitch box

Idea -> will power to create something out of nothing

Process: Sketch (feedback), Wireframe (feedback), Build (feedback)

Tools:
Agile

Persona Development: get into head of user, talk about all aspects even if they have nothing to do with the design

Simple Rules:

Simplicity not complexity (people should "just get" design)

Honesty is Obvious (UX does not hide the truth

Users who trust you stay

Consistency = comfort

Create Delight (make product that just works right and surprise the user)

People love new experiences but you cannot build product on novelty alone

Rapid prototypes are more important than planning (with feedback)



12:15 - George Hakim

Creative Project Manager

Engineering the art of Storytelling

Objectives:

storytelling
history
tools

Storytelling
conveys info, experience and wisdom
visual communication

referenced important technology through history (words, printing press, camera, radio, music videos, viral videos, iPhone)

360 degree storytelling for training, etc

engage audience, share info

"The Golden Circle" -> what? How? Why?

Toyota -> Ask WHY 5 times for everything they do - core message

Root Cause analysis -> identify problems

Hoshin -> pay attention to long picture

Genchi Gen Butsu -> visual language

Know your audience -> user testing, customer comes first

Plan, Do, Check, Act ( Idea, create, test, refine)

Kaizen (continuous improvement)

Kiki/Bouba effect

Mieruha -> visual control