Week 4B

Today in class, we critiqued each others' visual style boards. Some suggestions for mine included:

1. Add more family-oriented images
2. A lot of images in website
3. Clean typography, with a hint of a handwritten typeface, OR
4. A typeface or two that better accommodates the farming theme
5. Fix the color scheme (as I already assumed)

The rest of the class was in-class work time.

Homework:

• Make adjustments to visual styleboard
• Design visual syntax postcard(s)
• full color: 3.5in L X 5in W
• Create WebType Style Guide with Typecast (Google Fonts)
• Create tracing overlay of div areas with markers 

Week 4: Wireframes/visual style guide

Here are my updated wireframes. As you can see, I am sticking with the idea of the photo slider taking up the entire opening of the page above the fold. I am going with a split screen idea below that, but am considering changing that to have that element on the opening of the page instead. This still opens up the idea of parallax scrolling. That way, say if I chose the visitor option, once I scrolled down the page, all of the content and links would be solely to meet the interest of a visitor to the Farm Show, and the same thing for exhibitors. With that in mind, the navigation bar would scroll down to the part of the website that you selected.  

With my styleboard, I had a bit of difficulty determining my color scheme, since I wanted to appeal to the different colors I think of when I imagine the colors of the ribbons and farm equipment at the farm show. However, I think I will have to narrow it down to 3 or 4, with light and dark versions of those colors.

Week 4A

Today in class, we critiqued each others' wireframe sketches in the middle room based on layout. For mine, it was suggested to explore a split-type of website to appeal to visitors to the Farm Show, or exhibitors. Since the website is very heavily riddled with links, I feel that this would be a great way to organize them, and only one set of links would be displayed at one time versus both exhibitors' and visitors' links jumbled together at once. Below is an example of a split screen. This gives me the idea to maybe continue with the parallax scrolling idea since the homepage would consist of one giant photo slider covering the entire page, with the rest of the information available as you scroll below.

Homework:
- Create a visual styleboard
- revise wireframes into one set

Week 3: Outside of Class

This weekend outside of class, I worked on my wireframe sketches for my website. I also read all of the assigned readings, and mostly took favor in the book, because the different styles of websites are very inspiring and help my to figure out what kinds of styles I would like to include in my own website.

Wireframes:

For these wireframes, I oriented my design toward a more modern approach to accommodate the theme, which is white space in this particular wireframe set. I still wanted to maintain photos in each layout, since I feel that imagery is important for the Farm Show website because it is a family and farmer-oriented event.

Here, I experimented a little bit with my layout. Since there are a lot of prize ribbons given out to competitive exhibitors, I kept that in mind while designing my navigation bar. My only problem here is the fact that I would run out of space in the mobile version, which could be solved by making it into a hide/reveal navigation bar in the mobile version. There would also be an image slider covering the entire page above the fold, which would mean that it would be a parallax scroll website.

Lastly, for these wireframes I still kept with the imagery since I feel that it is an important part of this website. I also utilized the hamburger icon once again to save space in the mobile and tablet versions. I am still not sure how the menu will appear yet, but I am thinking about some sort of vertical appearance, especially in the mobile version.

Week 3B

Today in class, we discussed the readings and our results from doing research over the weekend for our website re-design. Turns out I am not the only one who was not able to get in contact with someone, but I am still trying. We then reviewed different ways of coding a responsive website using media queries. Some of the different methods were confusing, but one method used seemed to make more sense on assigning what the arrangement of content should be on the page and what it should do at different sizes by distinguishing three sizes: desktop, tablet, and mobile. I now understand Media Queries, because before I only knew the name, not what it's purpose was.

Homework:

• Web sketches: Using a content direction selected from the team exercise, create 3 different home pages and sub page with a lot of content (total of 6).
• One direction with white space
• One direction that reflects a Responsive Pattern
• One direction experimental
• Use Responsive Wireframe Sketch Sheet

Read: 

• How to size text using ems
• Fluid Grids
• http://clagnut.com/blog/348/
• http://pxtoem.com/
• Fluid Images
• http://unstoppablerobotninja.com/entry/fluid-images
• Multi-Device Layout Patterns
• http://www.lukew.com/ff/entry.asp?1514
• Responsive Patterns
• http://bradfrost.github.io/this-is-responsive/ patterns.html
• The Web Designer's Idea Book: Inspiration from the best web design trends, themes and styles: Pgs 03 – 33 (Portfolio Styles andTrends)

Week 2B

Day of Design:


In Class:

Today in class we looked at everyone's five websites that they have chosen as options to redesign. Of all four websites that I presented, it was decided that the Pennsylvania Farm Show is the best option, since it is a very popular event.

Homework:

1. Review assigned event site

• Call and ask:
• Who uses the website and why?
• What is the main reason for the site?
• If you could change or add anything, what would it be?
• Create persona for site redesogn (name, quote, age, occupation, location, behaviors, goals, actions)
• Design Objectives for Website redesign 
• Design objectives are similar to business objectives. With business objectives, you normally create a bulleted list of things that you want the website to achieve. With design objectives, your list includes messages and emotions you want to communicate. (Paul Boag)
• Read Ch. 2- Flexible Grid

Week 2:Outside of Class

This week outside of class, I worked on my personas, design objectives, and am still trying to get ahold of somebody from the Farm Show. 

Personas

Design Objectives:

Messages:

•        This website provides an easy to navigate resource for visitors and exhibitors at the Farm Show
•        This is a website that tends equally to the needs of exhibitors and visitors
•        Show times and schedule easily accessible
•        Visitors can access the show map, and visitor guide
•        Visitors and Exhibitors who are unfamiliar with the location of the Farm Show can find easy-to understand directions
•       Exhibitors can quickly find information and enter the show

Emotion:

-       Warm and welcoming

I also read Chapter 2 in the Responsive Design PDF:

• Typographic Grid:
• A rational system of columns and rows in which modules of content could be placed
• Concepts started by Modernists in mid-20th century
• Showed example of a simple HTML/CSS markup for a headline
• type sizes can be calculated by dividing target by context in order to get the result em (ex. 24px/16px= 1.5em)
• this is better than setting the type size at 100% to accomodate with the browser's default type size, and is still resizable and scalable
•