Author Archive

A 03: Structure: Site Map & Interface

by claire
Organization of Claireification.com

Organization of Claireification.com

I reworked this site map a couple of times. I had to remind myself that not every tid-bit of information needed its own page. I didn’t want the site too complex, so I really like this simplicity.

The tricky thing with my website is that I really don’t have any content for a full home page, nor is my portfolio simply design. As I said earlier in my content post, I will have a design, illustration, and book arts/crafts (recently added to the site map) portfolio.

I took a look at some other artists who have to have sister portfolio pages. BZdesigns.

I do want a home page, but it will be very simple. The “Main” navigation will be the portfolio pages, and the sub navigation will have the ‘about me’, ‘blog’, and ‘resume’ links. Both navigation bars will be up top, but the portfolio links will be more dominant. The home page I am hoping will have a blurb from my latest blog, and a featured work. Because the portfolio is the reason people are visiting the site, I don’t want the home page to be too complex.

A 03: Structure: Content Document

by claire

I am working on content for my portfolio, about page, and resume.

My portfolio page will be three sister pages of design, illustration, and book arts/crafts. I have made a list of all the pieces I want included in each, as well as alternative pieces that I may include with a, “student work,” disclaimer. I also want to have blurbs by each piece like they have in some design books. Which include client (or class) year, and programs used.

I am writing my about page… I need to take it to the writing tutor center to help give it some pizzazz. It currently has my name, where I’m from, and when I knew I wanted to be a graphic designer. Should I include non-art related tid-bits about myself? Or should I keep it all professionally centered?

My resume needs some work. How can I appeal as professional and dependable with hardly any experience? I have some ideas; basically making the little experience I have sound like a bigger deal. As well as citing my waitress job and citing how it has helped me as a designer.

Right now, I have enough to work with, but I need to expand on other parts of the process and return to this step to finalize it.

A. 03 Research, Discovery, and Competitive Analysis

by claire

My client for this site is me; its purpose is to brand me as a professional designer and get my name out to the public. More specifically I am aiming this site towards potential employers. Be they small companies looking for free lance work, or actual design firms that need a new team member. I will be back in Oregon after I graduate, so that audience will mostly narrow to the Willamette Valley area.  I also recognize that “fans” will be viewing this site. First of all, family, friends, fellow graphic designers, and aesthetic lovers in general are what I am referring to when I say “fans”. They may not be fans to begin with, but I want to turn them into fans.

These two groups expect the site to be pleasing to look at; frankly, it needs to be pretty. That will come after it being well organized and not sloppy. They will also want to skim the page and get a gist of who I am as a designer.

I want this site to be:

-                Well designed: I want to design above my current capacity. I want everything to have thought behind it and nothing left to arbitrary decisions.

-                Easy to navigate: I want a user who is not used to visiting portfolio sites to be able to understand the organization of my site.

-                A fully functional site: I don’t want to use the crutch of, “I couldn’t figure out how to do that”. Along with designing above my current capacity, I want to create a site that is above my current capacity.

-                Visual of my competencies: I know that this site is one of my first impressions to my future employers; it MUST show that I am a capable designer, who can creatively solve problems. This may be based on my portfolio more than execution of my site.

Good professional portfolio sites are not complex. I discovered three main structures that these sites use: The home page links to different areas of the portfolio. The home page is the only page that has links to images. Or the Home page has a featured art with blurbs and links.

In the Willamette Valley there are few personal portfolio sites, but I found a few design firms’ sites. They may seem a bit generic but they are easy to navigate. Some have interesting parts, like side bars or ways they display their portfolios, and some don’t even show their portfolios.

I definitely want my site to have a coherent style that is not outdated.

A 02 Execution & Implementation

by claire

This was a very intimidating step.  Having very little background in HTML, CSS, and Dreamweaver, it was hard for me to leave my Photoshop/Illustrator comfort zone. Once I got some advice and massive help from classmates and tutorial websites I was able to stop hyperventilating and accomplish something. Well, for the most part.

I started this step by working with what I knew. From class I knew how to create the wrapper and sidebar, a navigation bar and links. I figured out how to implement the background image. Because my page layout wasn’t quite the same as the example we did in class some creative solutions were sought. I troubleshooted a lot; I got to understand a lot about divs and working with the files. I had trouble linking my pages in the beginning, but I looked hard at the files and figured out why they weren’t working; ALL ON MY OWN!(!!!!!!!) Now I know how to organize all my files from the beginning so that I wont have that problem ever again.

I obviously couldn’t figure out other things. I tried over and over to figure out how to get the hover over the navigation bar to change the color of the whole box; but it doesn’t. There were other things that don’t work how the mock-ups show they should because of lack of experience. I thought I’d be able to highlight the pictures on the “Observe” page and the corresponding simple machine would also highlight. I think I bit off a little more I could chew with the “extras” of the site.

There are a lot of, “should’ haves” and “wishes” for this step but I believe I did more than my best with my skill set and time. I know that I have a TON to learn, but I think I held my own for being dropped in the deep end.

Why Design is Important for the Web

by claire

Design has always played a subtle but vital role in our society, and has done for centuries. Design communicates messages, it helps us find our way through spaces, and it evokes emotion to call us to action. Over the past decade our society has embraced a new medium to which design is vital: The World Wide Web. On the web, design is needed for navigational, aesthetic, credibility, legibility and profit purposes. Staying true to its nature, these designed elements on the web are subtle, and often not thought twice about by someone who isn’t a designer. However, as a designer I will explain how these elements prove that design is indeed vital even for the web.

Anyone who has ever used the Internet to search something has had the experience of visiting a website that seemed that it could have what they were looking for, but it was nowhere to be found. This could be the lack of thoughtful design. A designer creating a webpage understands their audience. Are they a contingent of the technologically savvy Generation Y who is quick to understand where to find things? Or are they of the Baby Boomer generation, like my father, who needs step-by-step tutorials every time he even approaches the computer? A designer will think of creative ways to address what’s needed and make a site accordingly. For example, a site geared towards teenagers will have the standard navigational bar with links at the top of the screen to move to and fro around the site. But each page has links throughout to get to those same sites on the navigation bar, as well as others intertwined within. Thus creating alternative routes to get to the same place. (www.icarly.com, www.facebook.com, www.mtv.com).  Elderly audiences are not used to this non-linear reading. Instead sites geared toward these audiences have everything up front, the home page is where they start, and then they choose their own linear path of information. (www.medicare.gov, www.ancestry.com).

Design also plays a role in what the navigation looks like.  It is obvious, but is still important. What I mean by this is that all links are recognized because they are the same color. You know that you are browsing similar pages within a site because their links rest on the same navigation bar.  Because it is standard to have some sort of navigation on any website we don’t often notice how important it is. But if you ever go to a site where links are sporadic and different colors and the type comes at you in 20 different fonts it would be pretty overwhelming and you would leave pretty fast.

Along with creating websites that enables their target audience to know how to use the site, designers also know what imagery to use. Because the web is part of the technology rush, things are constantly changing, and getting outdated, quick. We have all seen sites with that ‘generic web feel’ and we have also seen sites that are interesting and clever. Maybe they use of other technologies such as Flash for moving imagery, or java for tricky roll-over maneuvers; or maybe just the type and the picture on the page just looks nice? Yes, “nice type” whatever that may be, is enough to be visually pleasing for a passer by. Good design will keep up with trends without leaving the audience behind, It also wont be too much or too confusing. Design will tastefully use artistic inspirations from the past, implement them on the web, and create today’s style.

Imagery is also important to help make the site look reliable and credible.  Think about job interviews. When two people go in for a job interview and they both have the same experience, and both are socially compatible with the job, but one person is wearing a shirt and tie, and the other is wearing ripped jeans and a dirty t-shirt. Who gets the job? Obviously, it’d be the person with the shirt and tie. Looks are important. For the web it means a site that looks credible, one that an audience can rely on.  Even though Wikipedia is an encyclopedia of information inputted by anyone it still looks credible.  That probably wouldn’t be the case if everyone who inputted information got to choose what color they wanted their input to be, and what font and size it would look like. It would be a hod-podge of Comic Sans and Times New Roman in pinks and blues, and just be a big mess. Wikipedia knows that when they adhere to a style they gain credibility. And when they gain credibility, people come back. A designed page looks like the party responsible for the page cares about its audience; they care enough to not let them get bored. They care to be up to date with their imagery. And they care to not lie and assure their audience that they are reliable.

Design on the web is important when it comes to legibility.  It may sound silly, but think about it. Reading on the web IS different than reading a piece of paper. When you read on the web, you are reading off a lighted screen. While the light is not excruciating, it does cause the eyes discomfort. With a designer’s eye, they will treat the type with this in mind. Maybe they will make the type bigger, change the length of the type line so that they eyes aren’t traveling too far back and forth, or maybe they will change the colors so they don’t contrast so much.  These design choices are again subtle, but again encourage visitation to web sites.

I have talked a little bit about, “target audiences,” but there is another variation for the title, “target audience”, it is, “target market”. The web is a virtual market place. People can buy or sell goods without ever leaving their homes. Have you noticed that the sides of web pages have started to mimic what billboards used to be on the sides of highways? It seems that nowadays every store, every service, every free lancer, every motion picture has its own website. Why? To make money!  A designed site encourages a customer to explore, to get lost in the virtual store and not leave without purchasing something that will magically appear at their doorstep in 2-5 business days. When a designer creates clear navigation, good imagery that appears credible,  and makes the site easy to read, the viewer wont be quick to find another site. However, if a site is badly designed they will quickly move on. The faster they move on, the faster that company isn’t making a profit. Think of that job interview analogy again. A snazzy dressed website will pull all the stops to make sure you’re convinced that your mother will love that cookbook. Whereas that scrub in the ripped jeans wont even bother to say, “hi”. Who do you want representing you on the web?

Design has played a purposeful role throughout time; on stonewalls, stretched canvases, posters, fliers, and now the computer screen. Good design on the web makes sites that are easy to use, good looking, reliable, aren’t harsh on the eyes, and if it’s the purpose of the site, design will  transform your site into your salesman of the month, every month.

Site Link

by claire

Oregon Simple Machines

On the one hand I could be proud of myself for knowing nothing and coming away with that this round. But on the other hand I know it doesn’t function properly, let alone at the standard to which I envisioned. With the help of class mates and a few Google searches I learned how to accomplish some things I was having trouble with, but I just rand out of time to troubleshoot things on my own. I will write a complete learning summary soon.

Updated Photoshop mock-ups

by claire

I really wanted a good idea of where I was going visually with all of the different sites, so i made a mock op of each one covering a different type of topic.

The home page that explores all type and rollover treatments.

The home page that explores all type and rollover treatments.

A page depicting one of the different types of simple machines

A page depicting one of the different types of simple machines

A page that gives real world examples of simple machines

A page that gives real world examples of simple machines

A page encouraging students to create their own compound machines

A page encouraging students to create their own compound machines

A page citing the purpose of the sites and my sources

A page citing the purpose of the sites and my sources

As I have been working on these I am realizing that my skill set, hinders me making the pages look how I had envisioned them. At this point, if I can link all my pages, have content that adheres to a style guide, and get the message of simple machines to 5th graders, I will consider this a success.

A 02. Photoshop Mock Up

by claire

Being able to pull all my work together to create what I have been visualizing for this website was a very rewarding step. And as usual, it has pointed out areas that I need to go back and adjust.

Photoshop mock up for 5th grade simple machine website main page

Photoshop mock up for 5th grade simple machine website main page

I realized that I had done my grey box method at the full browser size (1024 x 768) instead of 960 x 600. Luckily those adjustments didn’t take me too long.

Since my grey box method nailed all of my elements down, the thing I got to concentrate on most was color. Color actually seems to be a finicky thing with kids, especially tween 5th graders. Too monotone and it’s boring, too many swatches and it’s overwhelming and a bit nauseating. I took a good look at other popular kids websites, and noticed that the gender-linked colors (pink/blue) were even, and they were indeed bright! Even though these bright colors often reflect immaturity, the design brought back a level of sophistication and communicated to the young viewer respect. “You are young but you’re smart enough to use this site”. I don’t know if that insight is too hippie-dippy of me, but in today’s world I know that that market is very, very finicky.  I looked at good color pallets on kuler and found a few that I liked. I combined core colors and landed on 11, which seems like a lot, but no more than 4-6 will be used on one page.

Also, like everyone in our class, I was hesitant to comp this in Photoshop because of the limited type options. I worked from my grey box method to get to this in Illustrator and then converted it to Photoshop and was able to get a better feel for it. Good practice!

A 02. Imagery

by claire

For the imagery for my simple machine site I have come to the conclusion to use simple vector illustrations, and stock images of actual simple machines.

types of simple machines and lever types in illustrator

types of simple machines and lever types in illustrator

machine gear background

machine gear background

This step was really intimidating for me. I think because for my design aesthetic I like to stick with one style of imagery; all illustrations or all photographs. I also have a tendency to want to go beyond the norm and do a very elaborate illustration, or hire a photographer and get a very cohesive set of photographs. Because of time,  budget, and skill sets, the imagery I have found and created will do, and am actually quite pleased with.

I also searched You Tube and flickr for kids’ simple machines projects, and am waiting to hear back from a few people to see if I can use their pictures/videos on this site.

I also created a background image to make each website more interesting.

A 02 Typography

by claire

For the typography of this page I knew I was limited to typefaces for the web. I am unfamiliar with most of these, some were made for the web, and others were accidents that just happened to work well for the web, but I don’t know the difference. Instead of doing the proper thing of researching the history of these fonts, I just gathered the list from Dreamweaver and started plugging them into my grey box. Because this is a site about machines, I wanted a very precise feel to the page. I decided on Trebuchet for the navigation bar and section headings because of its geometric qualities, and Georgia for most body copy for both its geometric qualities and legibility. Some added bonuses was that Trebuchet seems very kid friendly without going to the evil arena of Comic Sans. The two fonts paired are also very complimentary.

I will use size, value, emphasis tags and strong tags to differentiate other categories of type. The revised gray box shows some, but not all. I have made note of what categories of type will constitute my h1-h6 tags. This will make production run a lot smoother when I reach that point.