I decided to stick with the original picture for the home page. I also decided to make some changes to the design. I was not feeling the boxes for the header and footer, so I removed the shapes. I also changed the header/navigation to the green. I also adjusted the filters a bit.
The other change was to add a description to the Homepage. This was recommended by my professor so that search engines would have some data to pick up. The next step was to lay out the colors in Dreamweaver, which is a little overwhelming. I used a “starter page” which is like a layout template to get you going. Here’s the link to the first stage of building the actual site. I am a little intimidated as to how I am going to get the same filter effects for this page, but I am just going to go with basics and see what I can build on.
For the most part, what I have envisioned for Elif’s site has been based on my own user experience. This module has taught me that before you decide how you want things to look or lay them out that you have to gather all the information and content first and them organize it based on several points: the intent of the site, what the users wants from the site, what the user will need and the amount of content.
When I first thought about designing this page for Elif, I immediately began dreaming up how it would look. I was excited about colors and started looking up how other make up sites looked without considering the content. Every article I read and the lecture we had to watch on Adobe TV emphasized that you should not make the content fit into the design, the design should fit the content.
The other important lesson I learned in the vein of print versus web is that print media is static and the web is fluid. Being a “fine artist” you can completely control the “layout” of your work. You can create a page break and indent, the exact size of the font, the size of the page and the user can only read. On the internet, the user can manipulate certain aspects of your page through their browser or just using their fingers to increase the font/page size. You have to take this into consideration and create your page to be adaptable. This reinforces the idea that the designer should focus on the intent/function first.
My perspective on this project has definitely changed as we move along. As a result, what I have in mind for the site is changing as well.
What I learned from this module’s assignments is that you want the design to be somewhat predictable and consistent for the user interaction.
This ran contradictory to my initial impression of what the “design” of a site should be about. In my original storyboards, I had navigation links on the right side of the page and then would switch it up on another page of the site because I didn’t want it to feel monotonous. It just felt like it would be so boring! But after watching a video on Adobe and reading a few articles, I realized that by making it predictable you are really making it intuitive for the user. They don’t have to think about how to navigate, which allows them to give full attention to the content.
The pretty part should be in the aesthetics – but don’t mess with the interface. No one likes a site that is complicated or hard to use. If I get frustrated with a site, I just google what I’m looking for and go to another site.
So the other main thing that I am starting to understand is that print and web are totally different. What I thought would look good on paper, ends up looking like too much on the screen. I realized this when I started making a Style Tile of the colors and fonts I wanted to use.
Here are pictures of the storyboard compared to the Style Tile:
Storyboard for the Bio Page
For example, I originally thought that I would make actual squares as buttons for the links. But when I tried it out on the page it looked unnecessary. I thought that just using the word itself was cleaner – and everyone knows that you click on the links. When you are staring at a white page, it feels empty. When I look up at a screen the small details just seem unnecessary. It’s counterintuitive to how I like things to look on paper, but I realize now it is a different medium and I will just get used to it with practice.
Well, in an effort to catch myself up there will be a series of posts as I move towards catching myself up in this class.
This week’s lesson covered stock photos and web design mistakes. Often you go to a big company’s website, or corporate literature and see these images of business people. I doubt most people think about where these pictures come from. A lot of times, I just assumed that company’s would have to have some sort of a photo shoot to help create their latest campaign or literature. This is what fashion retailers do, but now I wonder if companies like Comcast just get these images from these stock photo sites like Gettyimages.com or shutterstock.com.
We had to read about bad web design and the biggest take away for me was that aesthetics do not mean a web site is good. Being able to get the information you want from a site is what makes it good. An example is the website for Blue Bell Ice Cream.
When I first went to the site, I thought it was pretty. I liked the way it looked. But it is hard to navigate because things are not clearly labeled – so you do not know your options. You have to hover over things, which is referred to as “Mystery Meat Navigation”, to figure out where to go. The problem is that unless you study the site or write out a key for yourself, you don’t remember what the compass links to versus the two identical ice cream containers. The point is that you cannot sacrifice function for looks.
I feel like a total ass for turning this project in soooo late, but I did it!
I learned a lot quickly about using Illustrator with this project. I had to create 3 images from the scissors I drew in my earlier blog. The images are close up of various parts of the scissors, so that you may or may not be able to recognize that they are scissors.
I spent the most time on the first image (artboard). Coloring in the black was sooooo hard at first, but then as I moved to the next board I realized how I could make things much easier just reducing things to shapes. When you are used to pen and paper and paint and charcoal for drawing, its daunting to figure out how to make what you do translate over into a computer program. But the second board made me realize that the fundamentals are the same. Reduce the images to shapes and build on that. By the time I got to the third board I felt way more comfortable and was able to maneuver through much faster. Well…here is my first project using Adobe Illustrator…