Interaction Design

This is it…

The photoshop file I’m trying to use as a guide for my website which I’m coding in dreamweaver.

the final comp

The new and improved grey box.

This is the grey box I updated for the style guide.

new grey box

Keeping it simple.

I kept my typography very simple. Mostly because there aren’t that many choices for website fonts, but also because I think it helps keep my site simple and clean. Which is good, because that’s my style. I chose to use Verdana for all of my navigational text, and palatino for the body copy and it’s subtitles. I didn’t want it to be overwhelmingly boring, so I mixed it up with some color. The header navigation text is black, changes to a light teal when it’s hovered over, and turns to white when you’re on that page. The sidebar navigation text is white, it also turns to a light teal when hovered over, and then is underlined after that page has been visited. The third navigation text is dark teal, and turns to the same light teal when hovered over (gives unity, other than the fact that it’s the same font), and will be underlined while on that page. As for the body text, I’m keeping it a simple black, and the subtitles will be teal.

It’s a portfolio.

I’ll be using a lot of my past work as the images used on the website, to showcase what I do. I will also want to be able to add more images of things I’ll be working on. One image I’ll be using is a logo for myself. It’s a design I came up with to create an identity for myself. It’s the letter “K” (for Kassie of course) flipped backwards. I used the bell gothic font, because I liked the way the strokes of the “K” don’t actually touch the stem. I used it to make it look like an arrow. I think the arrow affect is enhanced when I add the title of my website to the side of it (designbykassie).

my logo

Framework for my style guide.

These are the wire frames I made to replicate the finished web page I’ve been working on. I made these to go in my style guide so I’ll know what the basic framework is.

wire frame for home page

wire frame for the portfolio pages

I changed the way the navigation looked in the header, and added a third navigation towards the bottom of the main content part of the page.

My first gray box design.

gray box

Design for the portfolio page.

I later designed another comp for the portfolio page…

photoshop comp 2

I like this design a little better because it has more room for navigation and looks neater/cleaner.

This would be what the portfolio page looks like.

The left side bar would be where mini pics of portfolio pieces are, along with a short description. The big area on the right would be where a large picture of a portfolio piece would be shown (when a small pic is clicked on). Then underneath it would be information about that portfolio piece. The header would have my logo on the right side, and all the navigation on the right side.

There are three things that are most important for my personal portfolio website: My portfolio, a blog, and information about myself.

my site map

My portfolio section would include pictures of designs I’ve made, and some would have detailed descriptions. Like sketches, the process of how I got to the end product, and written descriptions. The “about me” section would include information about myself, as well as some way to contact me.

My thumbnails sketches for my personal portfolio website.

I took a long time to come up with this first idea, and I think I like it the best right now. It was inspired by the Pandora website.

my favorite idea

The top navigation would get me to the home page, my portfolio, and my contact information/stuff about me. Then the sidebar would navigate my portfolio once you get there. It will have the sub categories of my portfolio (posters, logos, magazine spreads, etc). I want the pictures to be able to slide to the left and right, and have mini pics along the bottom so you can click on one to go straight to that pic instead of using the arrows if you want to. Then along the bottom of the viewing screen is another small navigation bar where you can click to learn more about the artwork (the process, sketches, explanations, etc).

This next idea was just me thinking on paper.

thumbnail sketches group 2

And this was my last idea…

thumbnail sketches group 3

Graphic Design Is Not Making Something “Pretty”
By: Kasaundra Mace

If you’re a graphic designer, chances are that you’ve been asked to help someone make something look “pretty”. That’s not your job. You are a designer and a thinker. You’re job is to know the market, solve problems, and design accordingly. So what do you say to someone who doesn’t understand what you do? How do you help them solve their problem and explain to them that what you’re doing is not just making it look “pretty”. What you’re designing has rhyme and reason behind every line, every color, every word, and every dot.

Imagine you’re at a restaurant, and you’re looking at the menu. You’re thirsty, so you look for the beverages, but you can’t seem to find them anywhere. This frustrates you, so you give up and just get a water and start looking for a juicy steak. You find the one that looks delicious, only you can’t figure out how much it costs because the prices are all jumbled up. What is the problem here? This is poor graphic design. It doesn’t matter how amazing the menu looks, it’s no good if it is not helping the customer. In graphic design the form almost always follows function. What good is a menu if it doesn’t funtion the way it’s supposed to?

One common misconception about graphic design is that it’s an easy job. Whenever I mention that my major is Graphic Design, I always hear things like, “Oh that’s such a fun major!”, “That must be so easy”, “Oh, that would be so much fun if I could just draw all day”…. My room mates and close friends can all tell you that this is not true. I work just as hard, if not harder, and stress out about my projects just as much as anyone else. I might not have to memorize 200 words for chemistry class, or be tested on the several equations I learned for math class, but I have to think just as hard when it comes to solving a design issue for my many upcoming projects, and need to worry about getting them all done on time.

Another misconeption is that if someone knows a little photoshop or some basic techniques of web design, then they can do anything that a graphic designer can do. Again, they think it’s so easy, but that’s not at all true. Someone might know how to use the tools, but do they know how to use those tools effectively? Do they really know what their design is doing to promote business, or do they just think it looks cool? A good graphic designer knows why they made their text blue, or why they decided to include an illustration. They know the business they’re designing for, and they know the audience that they are trying to reach. Therefore, they know the best way to solve the design issues, and make it appealing to everyone.

So then what is graphic design you ask? It’s a way of thinking. It is a skillful way of communicating a visual representation of ideas through text and images. “Graphic design informs, persuades, organizes, stimulates, locates, identifies, attracts attention and provides pleasure… [it] is a creative process that combines art and technology to communicate ideas.”
(www.aiga.org) Graphic designers will use different methods to create symbols and other images in order to communicate a certain message that is a visual representation of it. Graphic design not only refers to the design itself, but to the actual process by which the communication was designed and the product(s) formed.

There can be major problems that a graphic designer will face, and they are expected to be able to solve it. Graphic Designers need to “solve communication problems. And, in order to solve the problem, they need to understand the problem. And, in order to understand the problem they need to LISTEN.” (http://whatintheworld.aiga.org) One problem that can arise for a designer is when there are pre-existing materials or other elements in the compostion they are supposed to design or re-desgin. This one problem can be problematic in several ways. For one thing, the pre-existing design might be part of the company identity, so you can’t completely transform it or their customers will be lost. They won’t know if it’s really the same product or not. Another problem could be with the clients own conflicting ideas. The design may not have existed before, but the client might already have an idea in their head, or on paper, of what it is they think that they want. Those clients may not be as willing to accept your ideas, therefore there may need to be some adjustments and other compromises made to the design.

You’ve probably noticed that the best graphic designs will cause you to feel something. It’s all around us, and whether you realize it or not, the design is affecting you and your emotions. The color, the choice of font, the images used, everything about it was chosen for a reason, and made to make you feel something. Some designs are meant to grab your attention right away so you notice it. Billboards for example can be great attention grabbers when done properly. Then again, there are some things graphic designers do that are meant for you not to notice. How often do you pay attention to the way a magazine’s grid is all layed out?

Most people don’t realize all the different hats a graphic designer can wear – and all at the same time! They need to communicate regularly with the client to make sure that they understand what the goals are. They need to stay informed, and keep up with the latest and greatest technology and computer programs. They can sketch out ideas and be able to come up with great designs from vague ideas. A designer knows how to work with photographers, printers, web developers, and other people within the industry. They also need to be excellent time managers and be able to stick to their budget. There are plenty more, but that gives you an idea of what can be expexted of a good graphic designer.

Graphic design is not just making something “pretty”. As you can now see, it really is a way of thinking. Graphic designers are great problem solvers, they think things through, put function before the design, and are very professional about what they do. Graphic design “is visual problem solving using text and/or graphical elements. Your aim is to create something that is pleasing to the eye, and gets the attention of the viewer. But things can’t just look cool. They have to work as well.” (www.adigitaldreamer.com) So the next time someone tells you how “pretty” your design is, make sure you tell them what it is you really do.