Week 12

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.

Week 11

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?

Week 10…Navigation and Wireframing!

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.

Week 9…Getting one step closer.

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

Style Tile

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.

Week 8…more than a little late!

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.

Animating Images

I was very excited to learn how to animate symbols this week.  I have always had a vision of what I wanted to do for my sister’s website, which is what I have decided to work on for my final project, and this will help with what I have in mind.  It is by no means a high tech animation, but it is enough to add interest to the website.

My sister has already started sending me lots of pictures to use for her site and we’ve discussed a general idea of the content.  We talk and spend time with each other pretty frequently, so it should not a problem to get feedback from her.  She is pretty excited herself about getting a website.  I am pretty excited myself as I love make up and all that “girlie” stuff too and I feel like I have my first real client.  It helps me feel a little closer to my goal of becoming a graphic designer.

I am also happy with the outcome of my banner design thus far.  In general, I feel like I have learned a lot.  I am no “coding” wizard, but Adobe software is pretty user friendly once you learn your way around.  I’m looking forward to learning more as we move along.

Here is a link to the animated banner I created.

Final Project Proposals

The first idea I have is for my youngest sister’s freelance make up business.  She has been slowly growing it over the years and we have often talked about how having a website would be beneficial to her business.  Working together we would be able to create a good amount of content together as over the years we’ve brainstormed a lot of ideas and she has been kind of bugging me to help out with this anyway.  There is a tren show this weekend that she is working for Smashbox Cosmetics in Annapolis that I can go to to get photographs, in addition to upcoming weddings.  I could also reach out to any number of her friends for wedding pictures to showcase her make up work (she’s literally done the make up for 98% of her 10,000 friends).

We’ve also talked about setting up a photo shoot to display her more creative side (like in fashion magazines).  I would also create a page that spoke of her background, a Q&A page where she offers advise for frequently asked questions and/or a blog about products or trends she likes, a page about the services she offers and contact information.  We would have to come up with her corporate identity but we have been working on that concept already.

My second idea is to create a portfolio of my work.  It would include digital work from the 3 graphic design classes I’ve taken so far in addition to my artwork (drawing/painting).  Honestly, I feel that working on my sister’s site is the better idea for now.  I do want a website to showcase my work, but I do not really feel that I have enough work in this medium yet to make an impact.  I believe that my sister’s site would be a better choice to help build my own portfolio.

Using all this new software is crazy…

You really need to practice the software to be able to create digital art.  It is frustrating in that you have to start with the basics as opposed to just being able to draw something.  It took me forever to figure out how I was going to draw an acorn and a leaf to help create a Fall theme for this week’s banner assignment.  THen I realized that I had to just break it down and think about the shapes. So I googled pictures of leaves and acorns.  The acorn I just tried to copy a digital image I saw online and for the leaf, I imported a picture of a real leaf and traced it with the pen tool in Fireworks.  I then played with different textures to try to get a realistic look.  So here are what the first drafts of my two banners look like:

I personally prefer the first image.  I like that the colors are vibrant.  I wanted to recreate a kaleidoscope feel.  I focused on creating one half of the image and used shadows to give a more 3D feel.  Once I was satisfied with the the one side, I copied the image and used to software to flip it – create a mirror image.  I definitely learned how to create some shortcuts for myself.  I wish I was as comfortable with creating my first webpage…I guess I have to just keep practicing.

The Fake Resume!

We’ve been working on an online resume, and while it is not my real resume, it has been interesting to see this come together.  We had to base a color scheme
off of a picture we liked, which I then uploaded to the Kuler website.  The site took colors from the image to create a color scheme.  Using Kuler to create the scheme was interesting and easy.

I have to admit that while Stargazer Lilies are my favorite flower, that I am not crazy about the scheme.  If I had taken more time in the picture choice I probably would have picked another color scheme – the picture we have taken or a work we created.  But here is the a page.

While this is a real basic page, it is encouraging to see immediate results.  I didn’t think that after 3 weeks, I’d make this much progress!

My First Web Page (aka Week 2 Summary)

Well, creating a page was a little easier than I thought.  Once you practice using the code and get a feel for things, it’s not so bad.  I say this, but I made a very, very, very basic page.  It reminds me of math, you have to be very specific with your coding-following the formulas to get what you want.  I downloaded a free text editor, Text Wrangler (the icon is to the right), to help write the coding for the page.  This also really helped me understand how the internet really works.  You read about it in a book and understand that it is an exchange of files from one server to your computer, but actually making a webpage really helps you see how much work goes into making a website.

We also spent a lot of time reading about color.  I love everything about color – nothing inspires me more than colors.  So this topic was also very interesting to me.  I had used Adobe Kuler for a previous class, but reading about different color schemes in our book helped me to understand how to put Kuler to better use.  I find this class very interesting so far and am excited to keep learning.