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.
Well so far I created the first design draft for the homepage of Elif’s site. Here is what it looks like…
As I mentioned in earlier posts, I wanted it to be simple, for Elif’s name and her work to be the focal point. I think the large image in the homepage accomplishes that. I stuck with the color scheme I found in kuler, making the red and green work together by adjusting the opacity so it isn’t so harsh and by using them more as accents to break things up subtly.
When I created the wireframe for this design it was looking pretty bare and I was worried it would be too plain so I added those floral shapes to break it up slightly. Here is what it looks like without the shapes:
The Lynda.com courses were so helpful in giving me ideas and the practice on how to use filters in Photoshop to create this draft. I relied a lot on drop shadows and used them on every element – the header, image, shapes and navigation text. I even used it on the rectangles to add some more depth. I used a diffused glow filter on the background and header/footer rectangles to create texture. I also used a radial gradient for the background, which also added emphasis on the image. Here’s what it would look like without any of the filters:
I also ended up changing my mind on the image I originally envisioned for the homepage. Here is the other picture I was going to use:
I may end up switching, I’m not sure. What do you think?
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.