Interaction Design

The purpose of this site is to showcase my work to peers, potential employers, clients, designers and personal relations that have an interest in what I am doing.

The content will include a page about me to give the viewer a personality to the brain behind the work presented. It will also include my resume and contact information. The blog page will have entries about current projects, interests, inspirations, and current events in my life and have a space for comments. The portfolio will be the beef of the site with the highlights of work that I have done and design experience I have. In the portfolio I want to divide the content by subject, whether it is identity, packaging, editorial, photography or other. It will need to be made in such a way that I can add to it as time goes by.

One of the biggest problems in human relations is communication. People will go to counselors to learn how to better communicate with their spouses. Businesses have dozens of meetings weekly to communicate through projects or business deals their company is having. It only makes sense then that when a person or business really wants to communicate with their customers they use those who have been trained to reach them.

Communicating visually is something we have been doing as humans from the beginning. We see words, and words communicate ideas that can have great consequences, even lead to bloodshed. However, these words are merely shapes on a surface that the human brain gives a level of significance. As graphic designers we are trained to work with not just the shapes of words, but their hierarchy and secondary images that communicate together. We are trained to see and decipher the presentation as a whole and make sure it is communicating what our client really wants to their viewer. We need to know things like white means peace in America and war in Japan. We are more than aesthetic pleasers, we are visual communicators that read in shapes, colors, and values to convey the desired message. Communication is our training. It is what we do.

Communicating on the Web
The spectrum of visual communication extends from the printed medium to television and now to the vast space of the internet or the web. Anybody who has money for a domain name can buy a website page and with a little training put something interesting on their site.

However, a web page has two to five seconds to grab a viewer’s attention before the viewer decides if the site offers something they are interested in or not. In other words blink twice and the viewer is gone. Sure, anybody can make a website, but who is going to communicate in two to five seconds to a viewer that this website has what they want to offer? We are, and that is why smart businesses will hire smart graphic designers to make the most of their time and money.

Designing for the web
One of the fist things a designer learns is that on the web, just because you can doesn’t mean you should. Just because a site is flashy, neon green, or glittery, doesn’t mean it should be. The web offers all kinds of new possibilities that the print medium is not capable of doing. For instance making words flash, or for a windshield cleaning company having a squeegee wipe the information off the screen every time a new page is brought up. Or they could design all the information to be animated and dance around the page. Designing on the web could be a real circus, but there is a reason the circus comes around maybe once a year, not everybody wants to go all the time. To put it simply, a web designer can do all kinds of stuff, which can annoy the viewer and block the real message from getting to the audience. It is all about what audience is trying to be reached. Every rule of design is used when designing in cyber space to get the right point across. The hierarchy of information, movement, color, images and relationship between elements are all analyzed and chosen carefully.

Designers should be used in the creation of a website to help decide logical navigation, and general content flow. They will help organize the information with what is most important being seen first and so on. This is how a viewer knows if the page has the information they need in two seconds, through hierarchy of information and the correct implementation of design principles.

With content decided and organized, it is important to choose the right imagery and to be consistent. Something I hear quite often is the importance of making a website experience fluid for the viewer. Each page needs to feel like it fits in and still be understandable for the viewer that jumps onto page 13 from as a result of a Google search. This is a challenge we are used to solving.

A good graphic designer will take these challenges and creatively solve them in a way that makes each site fulfill its purpose, stand out, and lastly look good. We are all attracted to things that look good, especially when our pocketbook is being influenced.

Web Technology
There are ways to test the functionality and how well a design fulfills the goals of a website, and that is through usability testing. Several studies have been done about the accuracy of usability testing and it is most accurate when the right people are being asked the right questions. For instance “the easiest website interface to use is the one that you already know.” So it wouldn’t make sense to ask current users of a website how understandable the current interface is to use when the company is trying to bring in a new audience. They should ask a new audience if the site is logical as is because the new audience hasn’t been influenced by past experiences.

When used correctly, usability testing can “hone designers’ instincts so they can spot potential usability problems and improve the designs without the cost of formal testing on every project,” according to Robert Hoekman Jr.

More testing can be expensive, and is usually implemented by companies that are already successful to discover where they can be more successful. However, like Robert Hoekman Jr. said, these tests can help designers understand the successes and failures of their work along with validating their expertise in the eyes of coworkers and clients.

In Conclusion
Good aesthetics for a website are based on more than just flash and glamour, but they will have a concept and a purpose for existing. I could go on about design principles and strategies to communicating on the web, but the most important thing to understand from this essay is that this (communicating visually) is what we as graphic designers do. We are like relationship counselors for shapes, colors and values that work together in the end to silently or not so silently persuade the consciences of our audience to use this product, go to this movie, or do whatever the goal may be.

Visit Newton’s Genetic Lab. To learn more about your genetics click on the link below.

http://www.michellehoffmandesign.net/genetics.php

“No extra charge for awesomeness”… Kunfu Panda

Taking this site from illustrator and photoshop into Dreamweaver which transferred it to the web was a learning and growing experience.

This was my third website, and it is true the perfect practice makes perfect. However, I’m still trying to practice perfectly. It made it easier to add my navigations through inserts which would update every page simultaneously when I changed something on it. However to do this I had to use php for the first time. That was tricky, but with a good tutor, possible.
Something else that was important and took time was measuring divs and making sure the images I put on would fit how they should.
Overall I learned a lot more about how divs work and how to use css to get the results I wanted. Something I still want to understand is absolute and relative positioning.

The Style Guide for Newton’s Genetic Lab is simple.

To brand the site and cut down on confusion the logo and navigation are the same on every page. This is also helpful if the user enters on a page in the middle of the site, they will know where they are at. The sidebar is always on the left, the content on the right and the footer always stays at the bottom. This is also to create a familiar atmosphere across the pages.
Colors were chosen that are bright and fun. The cartoon Mr. Newton adds a fun kid-like element. He shows up from page to page with fun facts and once with his dad. I think this adds a human element to the information.
For the different examples of inherited characteristics photography was used so the trait being talked about was easy to recognize on screen. The idea is the student will instantly know what they are learning about and in future places where they see these traits, widows peak for example, they will remember that John Travolta has a widow’s peak (he is the faceless man in the photo), and that it is a dominant trait.

This is the challenge, making the actual website work as imagined in Photoshop.

So far, the wireframe is built and lacks a couple functionality details. From past projects I’ve found it easier to make one wireframe, like a template that is refined, and then to make the rest of the pages is quicker because only the content needs to be changed. All of my written content has been finished.

A challenge I’ve had is putting my navigation and footer information in an external HTML document and getting the connections to work. The images show up in Dreamweaver, but the connection isn’t making it to the web. So, the learning process continues.

Putting the Site into Photoshop

The site is “Mr Newton’s” because he is the science teacher here. Giving the information a teacher will hopefully make the site more personable. The first page has a large DNA strand because it is all about genetics, and Mr Newton himself. The navigation is simple and the sidebar will also be a constant on all of the pages.
The second page keeps the same layout with new information. The tab will change color to show the user which site he is on.

[caption id="attachment_2754" align="alignnone" width="400" caption="In the end this page will also have illustrative images for those fifth graders who learn visually."][/caption]

Boxing out the design

Because the top left corner is the first place users look that is where the site identification will be. The site options or navigation is underneath with lots of space for each tab so it is easy to see and has a quicker read. The imagery has the most space because this is the “eye-catcher” which also serves to teach visually. The header will contain a permanent image that helps to brand the site. The content will have most of the words and such. So they don’t get lost they are placed next to the image they will be describing, close to navigation, and in one of the viewer hot spot locations on the page.
Overall I like this design because it is simple and straightforward.

Putting the pencil to the paper.

Sketching is the most important step in making layout decisions. Here are some of my sketches. I want the site to be interesting and new, however the usability needs to be intuitive. One thing that is important is for the content on the main page to fit on the first screen. I don’t want the information to be overwhelming. I also think it is important for the images to be simple and interesting and the type to be fun.

Presentation of the information

It is most important for the information to be presented in a logical way to help the main audience, the ten year old students, understand and learn. For this reason I’ve broken the information into five easy categories. To keep it simple, each secondary page will contain all the information for that topic and for now it will scroll down as the student goes through the data.