Minor Project 32: Service Learning Poster

Major Project 2: NHMA

NHMA REDESIGN

Major Project 1: Roadside Academy

ROADSIDE REDESIGN

Minor Project 31: Read & Blog- 10 Things From Don't Make Me Think

1. The most memorable lesson from the book is that "if it is short, it is more likely to be used".  Nobody wants to read extra information and waste time.
2. If something on your page is a link; make it look clickable!
3. People want to find information fast, and that's where scanning comes in.
4. I thought the usability test was very useful, and came in handy with my own websites.
5. The user loves to make mindless choices, so keep this in mind when designing
6. I'm glad he named all the important sections of a website (Site ID, Navigation, Simple Navigation, etc.)
7. Omit needless words!
8. Visual hierarchy is always important in a site, and if it's off kilter it can make a site look odd.
9. Make sure your site follows typical site conventions, or you may confuse a user (click logo to go home, etc.)
10. The simpler the better

Minor Project 30: Read & Blog- Administering Usability Test

NHMA:
Everyone who looked at the site said the first striking thing was the image.  This coincides with what the client told us, so that is good. I got some reactions that the image told them it was a manufacturing site, but not the design colors. They also commented on the size of the font on the site.  They compared it to others and suggested the point size be lowered to around a 12 pt font.  One person commented that the design could have some texture to it, instead of being "plain".  The people who viewed my site were interested in seeing a logo for the site, as well.


ROADSIDE:
Everyone said the navigation was their favorite part of the site.  The navigation really intrigued them.  They felt the design was fun, however, Dale suggested we make it a little more fun! Someone said they think the tabs would look great once they are implemented and I showed them how they can be implemented on our CSS test site and they liked it. I got a lot of good reactions towards the colors. One person mentioned that they liked how the font was a little different than most sites.


I feel like I got some good information from this assignment and can further push our sites towards what an audience wants to see. 

Minor Project 28: Roadside Academy Home Page Rebuilding

RA

Minor Project 27: NHMA Home Page Rebuilding

NHMA

Minor Project 29: Read & Blog

Download my Usability Test Script HERE!

Minor Project 26: CSS Nav Bar due

NAVIGATION BAR

Minor Project 25: Home Page Redesign

Original:

ReDesign:

I tried to make the site more appealing by keeping things neat and organized.  It's a small business so the audience is mainly locals & regulars.  The red is welcoming and bright, and makes it easy to read the information you need to get, unlike the old site who's background was very distracting.

Minor Project 24: Read & Blog

The site: http://www.bobettes.com/


What's the point of it? To promote their soup shop/restaraunt & to show customers the menu.  Also, to showcase the many awards they have one for things like "best soup", etc. 


Do you know where to start? Not really. With the tiled background and the flowing page, it's hard to find what I'm looking for.  Links are sometimes to the left of the page and sometimes in the middle.  My eye isn't sure where to begin. 

MINOR Project 23: Don't Make Me Think, Chapter 6

Minor Project 22: Roadside Academy Web Site Redesign

OUR ROADSIDE SITE

Minor Project 21: Roadside Academy Team "Brief" & Site Map

Purpose & Objectives

When designing Roadsides webpage, we wanted to make sure we accomplish all of our client’s goals. Our client mentioned they want to their website to represent their school as a fun, simple, successful private academy, with the ability to be spontaneous and stand out from the crowd. As a very small school, it's hard to get word out about how wonderful the program may be. We hope to make their site more fun and pleasing to the eye since this is probably the first thing a prospective student/parent will see.

Look & Feel

The colors of Roadside’s website are crucial for the feel of this page. We want to make sure that the website looks like it is for a school.

Plans for Design/Layout

We want a simple page yet unique page for Roadside Academy. We feel that a drop down menu will be easiest for the viewers to navigate the page. The logo will be kept in the top left corner. For the site, we want to incorporate more pictures as well.

Type Choices & Type Setting

We both used Century Gothic in our individual projects so we are going to use that font choice in the combined website. The top header will be bold so it stands out, but not cluttered.

Visual Hierarchy

The header will lead the viewer into the page so we feel that this is most important. On the homepage, the pictures will be above the fold as well as the tops of the boxes that will be located under the pictures. Each secondary page will incorporate the banner and logo.

Use of White Space

Roadside Academy does not need to have an overload of pictures on its page. Because we want the page to show simplicity as well, we will have a white background. There will be a sufficient amount of white space so it is clean and easy to read the text.

Description of Color Choices

We want to use light navy, black and white with an accent of gold. The drop down menu will be in white.

Navigation, Ease of Use, Usability, Accessibility

As stated by the clients, they want a simple and easy to navigate website. This is very important for building the website. The website will be easy to navigate. The typefaces will be easy to read, and the dropdown menu will be easy to navigate the page.

Target Audience & Demographic

The targeted audience consists of the current students, perspective students, parents, faculty, and alumni.

Minor Project 20: "Don't Make Me Think"- Chapter 6

AERIE WEBSITE



This is a great example of a beautiful, clear navigation bar.  There are obvious categories to choose from and when you scroll over one, a corresponding drop down menu will open up.  This specific nav bar is even better than usual because it has such a unique design.  The top navigation on the site follows suit.  It works the same way, but considering the hierarchy, it is significantly smaller than the main nav bar.  


There is also a search bar at the top of the page so that if the user does not know (or knows exactly) what they are looking for, they can simply type in a keyword or style #.

Minor Project 18 & 19: NHMA Brief & Web Site Redesign

Purpose & Objectives

The purpose of their website is to have a functional and easy to use site for their members and employees. They want to use the site as a way to draw in new members and make it easy for existing members to get information. They also want to take advantage of today's technology, while keeping in mind simplicity. Another important aspect is they want to have a lot ofbacklinks to other sites throughout their own.

Look & Feel

NHMA's current site is a little dull and the look is boring. We do like that they have their "logo" constantly at the top of the page, and that's something we would keep, although we would definitely redesign their logo.

Plans for Design/Layout

We want to use brown as our main color with blue accents. We will incorporate the live feed that will be updated to keep the viewers informed with all the information. We hope to have a sense of grid structure to have it more organized. We also want to have a video displayed on the main page to show the viewers what manufacturing is all about.

Type Choices & Type Setting

We want to use a bold Sans Serif typeface for the logo and headline and body text. After research, we saw that many of the manufacturing companies used sans serif for their sites.

Visual Hierarchy

NHMA's current website has a lot of text and not enough pictures. We would like the website to lead the viewer in, so the Header at the top will sport a brand new logo design, along with pictures relating to the association. We hope to keep their website simple. We will put the very important information at the top of the page when necessary. Attaching pdf files for certain pages will help to prevent too much text on the page. We will also add social media links to bring the viewer to the other pages (facebook, twitter, etc.)

Use of White Space

The NHMA does not need to have an overload of pictures on its page. Because we want the page to show simplicity as well, there will not be a background color for the site. There will be a sufficient amount of white space so it is clean and easy to read the text.

Description of Color Choices

We want to use a charcoal blue and shades of brown to showcase the strength of the company. The text will either be in white or a brown depending on the background color.

Navigation, Ease of Use, Usability, Accessibility

As stated by the clients, they want a simple and easy to navigate website.  This is very

important for building the website.  They stressed that the site must have backlinks, so the website will have more value for a Google search.  The website will be extremely easy to 

navigate, especially for older users who may have trouble with computers.  The typefaces

will be easy to read, and the menus will be easy to find and navigate.  The clients also

mentioned that they would like to have current information updated on the site regularly.

Target Audience & Demographic

The targeted audience consists of existing and future members of NHMA, students and people interested in manufacturing who want to know more about it.

OUR TEAM WEBSITE

Minor Project 16: Interactive Prototypes

Minor Project 17: Omit Needless Words

Original: In our rapidly changing world, technology and science can become outdated rapidly. In science class, we seek to equip students with the skill to become scientists of tomorrow. We encourage students to actually become scientists and to develop solid observation skills though regular experimentation and hands-on activities. Students learn basic concepts but are not made to simply memorize a large quantity of facts. They are encouraged to develop thinking skills and analyze information and then to draw reasonable conclusions.
Roadside students also have weekly classes in music, art and physical education.

Classroom activities are also enhanced with a variety of field trips throughout the academic year. Occasionally a class will do a special activity based on their classroom studies and then share with the other Roadside classes. After the kindergarten class studied the painter Monet, they transformed their classroom into Monet's garden and invited parents and other classes to participate. After studying Shakespeare's "A Midsummer Night's Dream", 7th/8th grade students decided to put on a production of an excerpt from the play. After learning about the Wright Brothers' flying machine, 3rd/4th graders built a model of the craft and gave a presentation to the rest of the school. After reading Homer's Odyssey, 5th/6th graders hosted a Greek festival. 

New: In the changing world, technology and science can become rapidly outdated.  We encourage students to actually become scientists and to make solid observation skills through regular experience and hands-on activities.  Students are not given a lot of things to simply memorize; they are taught well and uniquely between plays, performances, and presentations.  There is always a sharing of knowledge going on, and it's obvious the students love it!

Minor Project 15: "Don't Make Me Think"- Chapter 4

It's pretty self-explanatory why users love mindless choices--they don't like to think! Surfing the web can often be a mindless activity and the user probably won't like having to think when navigating your web site.  They want to spend as little time as possible searching for what they need.

A simple, mindless choice that is often implicated in many user oriented sites, is putting log in boxes at the top of the page.  A user isn't going to scroll & sift through the page to try and find where to log in, they just assume it will be there; and if it's not, say bye-bye to your user.

Minor Project 14: Static Home Page Mockups

Minor Project 13: "Don't Make Me Think"- Chapter 3

When designing for a web page, we've noted that it's best to design for "scanning", since this is what the viewer will tend to do and after all, we are designing for the viewer.  To do this, we could do a few things.  One way to design that will help a lot of people out, is to design using familiar elements and traditions.  For example, most websites will take you home if you click on the main banner atop the page.  If you add this element to your site, and someone is visiting it for the first time, they will probably recognize the technique without even second-guessing the "click" in that area.  Another option, is to make your design obvious! If you want to show someone that they should click on the last word of your blog, make it OBVIOUS..links are usually bold or another color from the rest of the text on the page.  Viewers recognize this & will expect this.  

see?

Minor Project 12: Schematic/Site Map- New Haven Manufacturer's Association

Please click to make larger

Minor Project 11: Schematic/Site Map- Roadside Academy

Please click to see larger version

Minor Project 10: "Don't Make Me Think"- Chapter 2

Scanning
As humans, we obey our instincts.  When you first open a website, what is the first thing you do?  Perhaps unknowingly, but your eyes scan the page to take everything in at first glance. Afterwards, you will break down the page.  Since we are the site designers, we need to take into account that the user will not be examining each and every piece of the page; instead, they will be searching for the button/link/info that they need! 


Satisficing
This is something a user does after they have scanned your page.  They will try to find the link to what they need, however they will choose the quickest, most obvious option; even if there is a chance it will be wrong.  They will choose without remorse, because if it is the wrong thing, they can automatically return to the page they came from. 

Minor Project 9: Wireframes

R.A. Wireframe 1

R.A. Wireframe 2

NHMA Wireframe 1

NHMA Wireframe 2

Minor Project 7: Thumbnail Sketches- NHMA

Minor Project 7: Thumbnail Sketches- Roadside Academy

Minor Project 8: "Don't Make Me Think"- Chapter 1

Steve Krug's first law of usability is pretty obvious, as it is pulled from the title of the book.  Don't make the user think! A website (or any design, really) should be simple to navigate, and easy to view quickly and efficiently.  If you design a website and place the navigation at the bottom of the page, the user will probably not realize where it is, since it's most recognized at the top or side of the page.  You don't want the user to have to decipher the page; you want them to click and search without even thinking about it.  If they do this, they are not getting frustrated or bored trying to find their way around your site.  This is what the first law of usability is all about. [KISS] KEEP IT SIMPLE, STUPID! 

Minor Project 6: Photoshop Mockup- "Into Thin Air"

Minor Project 3: NHMA Project Brief

Company

New Haven Manufacturers Association

Objective

NHMA wants a website that will convey how necessary manufacturing is in today's world.  They want to use the site as a way to draw in new members and make it easy for existing members to get information.  They also want to take advantage of today's technology, while keeping in mind simplicity.  Another important aspect, is they want to have a lot of backlinks to other sites throughout their own.

Look & Feel

The current available site for the association looks very dull and out of date.  The colors are dull and the overall look says "boring".  I do like that they have their "logo" constantly at the top of the page, and that's something I would keep, although I would definitely redesign their logo.  Although it is easy enough to navigate, they are not taking advantage of today's technology.

Plans for Design/Layout

My design layout would have one bold color throughout the site; probably a dark blue.  The pages would have a sense of a grid structure, to keep things organized.  I would like the homepage to have a main video embedded, along with some facts about manufacturing to draw in interested people, & current events going on with the program.  There would also be decorative links to the associations many social network pages. 

Type Choices & Typesetting

I would like to use a plain, simple typeface for the body of the page such as Arial or Helvetica.  For titles, and the logo, I would use a sans serif as well, but it would be bigger & bolder.

Visual Hierarchy

I would like the website to lead the viewer in, so the Header at the top will sport a brand new logo design, along with pictures relating to the association.  This will lead down to a Navigation Menu separating the different options:

• About
• Membership
• Events
• Legislative
• Education
• (Facebook, Twitter, Etc. located in buttons on the header possible)

Use of White Space

Because I want the page to show simplicity as well, there will not be a background color for the site.  It will actually just be white, with the addition of the elements that I've mentioned.  Certain pages will contain pictures with their information, as well.

Description of Color Choices

As I mentioned, I'd like to use a dark blue to showcase the strength of the company.  The light blue & yellow currently in use, make the site look like a nursery.  The deep blue will look a lot more professional.  Everything else will consist of black & white, or a variation of the blue (besides pictures).

Navigation, Ease of Use, Usability, Accessibility

The website will be extremely easy to navigate, especially for older users who may have trouble with computers.  The typefaces will be easy to read, and the menus will be easy to find and navigate.  I'm hoping to make my site, so that it is compatible with the form based system that NHMA is already using to input information into their site.

Target Audience & Demographic

The targeted audience consists of existing and future members of NHMA, & people interested in Manufacturing who want to know more about it.

Timeline 

I need to start sketching out layouts and details, then move on to wireframes, and a mockup in photoshop.  I'll use illustrator to make the logo, and possibly edit it in photoshop.  I will follow the class timeline as I do each step.

Model Sites

www.nam.org

http://www.nea.org/ - I love the look of this site, but if I implemented this design, it would be less cluttered, as NHMA is not as complicated an association. 

Minor Project 5:Don't Make Me Think: Preface, Forward, & Intro

What is the difference between interfaces, interaction design and information architecture?


The interface is the visual that the user sees as the website.  It is composed of Interaction Design, which is basically what happens next when the user clicks, and information architecture, which is how everything is organized on the site AKA the hierarchy. 


So far I really enjoy how Krug's book practices what he preaches! 


If it is short, it is more likely to be used

Minor Project 2: Roadside Academy Brief

When Dale presented, she stated her goals clearly--to represent her school as a fun, simple, succesful private academy, with the ability to be spontaneous and stand out from the crowd.  As a very small school, it's hard to get word out about how wonderful the program may be.  A website is supposed to acknowledge the small foundation that something may be built on, but give it the means to reach far beyond that.  The website is probably the first thing a prospective student/parent will see, and therefore, it must attract an audience.  


I would like my core creative message to show prospective viewers the fun side of the school, as well as the basics of a place such as this.  I want to keep in mind that Roadside wants to nurture their children, and so I will be using light tones of blue to keep the site soft.  Keeping Dale's preferences in mind, there will be drop-down menus along the top of the site. Please see (http://www.cathedralhighschool.org/index.jsp) for my design inspiration.  I would also like to incorporate pictures of field trips and fun things the kids do within the design of the website.  I'd like to keep certain pictures in the header of the page, but then have a separate slide show revealing more pictures.  The site would be simple so it's easy to navigate and hard to get lost.  I'd like to emphasize the uniqueness of the school itself by stating some of it's great qualities right on the home page.  


The logo (possible redesign) would be constant within the header, so the viewer always remembers what they're looking at.  The mascot will be on the page as well (redesign?), possibly as a footer, which would include a quote that sums up the academy.  


The site's navigation will be broken down as listed:

• Learn About Us!
• Our New Home
• Mission
• History
• Headmaster
• Testimonials
• FAQ
• What's Going On?
• Recent Activities
• Upcoming Events
• Roadside Winners
• Success Stories (Alumni)
• Academics
• Calendar
• Homework Blog
• Art Gallery
• Curriculum PDF
• Apply
• PDF of promotional Handbook
• Application
• Contact Us!
• Info
• Directions