Category: Uncategorized

Week 15

I am running my last mile with my web design class… I can see the finish line finally!  My Portfolio Site is getting close to being finishes.  Or at least I think it is.  I have to figure out the JavaScript for my gallery image overlay.  It is a bit tricky to use without messing up my rollover button script.  I was able to get this script working on my other website for my other class, but that was done with strictly hand coding, unlike this site.  I am considered adding more context to it.  I am really terrible talking about myself/skills.  I wish I could have someone else write the “fluff” to add to my site.  I am pretty satisfied so far.  If it weren’t for Prof. Jenn, I would not have made it this far.  She is really a great and patient teacher. 


Week 14

This week I concentrated on my template page.  There was plenty wrong with it so I am still doing revisions.  A lot of my graphics were exported as gif’s instead of jpg’s when I had specified them to be exported as jpgs.  I had to go and re-export them.  After my meeting with Prof.Jenn, we got rid of a lot of extra div’s that fireworks had created.  That helped me figure out a lot more problems.  I still have one major problem I am trying to fix.  I am off now to work on the site some more… wish me luck!

Week 13

This week we dove into the world of templates.  I really am excited about this topic.  Once you create a basic layout, you can then make it a template and use it throughout your site.  This way you have a cohesive and user-friendly site that people will be comfortable using.  AND the best part is that it is very time effective in the creation process.

  I like templates the same way I like CSS- it is universally applied to your site with minimal time and effort.  Once you spend the initial time to build out and make sure everything works beautifully, you want to make sure you are consistent.  I feel so much better about web design knowing there are “short-cuts” like this to make the process a little easier.  The CSS Zen Garden is a great site to check out.  It shows how much you can change just by adjusting the CSS.  I love looking at this site at work.  It really taking a rake into sand and creating your very own “zen garden.” 

Here are some helpful videos we viewed this week:

Layers TV: Creating and Using Templates

Rapidly Building Layouts

Creating Templates

Using Templates

I am now about to work on my own template for my web site.  I am having difficulty translating my comp into an html build-out.  I am hoping A will soon connect to B and my “Eureka!” moment will soon come…

Week 11

This week I worked more on my comps.  I took the advice I was given and improved it.  I am still worried it may be to plain-looking.  Maybe once I get into it more things will come together.

Home Page Comp

Interior Page Comp

In class this week we learned about different web hosts and some of the most commonly used ones.  Go Daddy would have been the only one to come to mind a few weeks ago, but now looking more into it I have discovered numerous ones.  I am finding the decision hard to make because they seem to promise you so much for discounted prices.   I am thinking I may have to get referrals to tried and true hosts.  Among some of the recommended in class: Go Daddy, Blue Host, Chyrstal Tech, and Network Solutions.

We also read some articles to brush up on our CSS knowledge since we are exporting our files into Dreamweaver as CSS and image files.

Understanding CSS

Another article we read is about estimating your time on a project.  This is very important when quoting a client a price, you want to give them the most accurate portrayal of the actual cost.  I design dresses, and it is sometimes difficult to forsee all the issues you may come across with a project.

How to Estimate your Time

Another article to check out: How We Really Use the Web

We also dove deeper into the exploration of translating your page in Dreamweaver.  We looked at font sizing, how you should really use em’s for the main bodies of text on your page.  We learned about creating rollover styles with CSS in Dreamweaver as well.  I feel like there is so much information floating around in my head I can barely keep track of it all right now.  I feel like I need an external hard drive for my brain, if only things were so simple…

Week 10

This week we worked with slicing Fireworks images to help prepare them for css and being imported into Dreamweaver.  I am really enjoying how all the different programs work together.  Here are some videos to help:

Exporting CSS and Images

Creating CSS Layouts

Exporting CSS 1

Exporting CSS2

Exporting CSS3

And some web articles:

The benefits of slicing images

Exporting CSS and images in Fireworks

Greeking Generator

I also revised my comps from last week and improved upon them.  I want to make it elegant and efficient.  Hopefully I will achieve this.

Week 10 Revisions

Here are links to my first drafts of my home page.

Comp 1

Comp 2

I am still not thrilled with them.  I have a lot more work to do.  I will keep pushing it!

Week 9

  The weather is quite beautiful outside this week.  Despite the rain we had at the end of last week, it all seems worth it now.  Being able to work on web design with the window open and fresh air for your mind and soul can work wonders for your determination. 

   I started the week learning about the design process of websites and all the parts Adobe plays in that.  From creating the site in Illustrator, your then bring it into Fireworks for the wireframe process and interactive prototypes, then export it as a psd into Photoshop and create more design work, then into InDesign for documentation, and THEN into Dreamweaver or Flash.    I also learned about mistakes web designers usually make.  One of the largest topics was about how you need to pay more attention to content because that is what will keep people on your website and the reason they will visit.

  Designing with a Grid Based Approach

 Dao of Web Design

 Blasting the Myth of the Fold

 Five Principles to Design By  I like this article.  It was easy to read and it wasn’t long and drawn out.

In our assignments we created different ways of navigation including symbols, buttons, nav bars and even gel buttons.  We had to use a lot of effects for the gel button.  It will take me a while to be able to remember how to do every part of that effect.  I also created a comp and now I will put that knowledge to use for creating comps of my own website design.

Week 8

My head is spinning thinking about how fast these weeks are going by.  Past the halfway point now.  This week was another busy week in web design world.  I went to my first AIGA mixer in Baltimore and met a real life web designer.  Haha, I am such a dork.  He told me the most beautiful web pages are the simplest.  I will try to keep that in mind as I continue brainstorming ideas for my final project.

  We dove deeper into the worlds of CSS.  We learned about four different selectors: HTML, Class, ID, and Descendent (or Compound).  The use of each one of these are differ from the other, we used the different selectors in our practice assignments as well as with our resume.  I am still loving the ease of CSS and how we can change so many elements with just a few specific selectors. 

Difference between ID and Class

CSS Typography

  In our text we learned more about Typography.  This seems to be the theme of my week.  In two of my other classes this has been the focus.  It is nice to know the history behind type and why terms such as “leading” are used and why.  It has been such an important impact on society for YEARS…   A few good links to help continue your knowledge of fonts:

I LOVE Typography

Anatomy of a Web Font

Glossary of Font Terms

These sites are so wonderful!  It has great pictures so you can see the difference between fonts and different terminology that you can stumble upon when first learning.  It is a lot to take in all at once so I am happy to have the resources to resort to when I get stuck.  I have a lot to learn!

Week 8 projects

Week 7

  This week our lectures started off with search engines.  We learned the difference between crawler based and human-powered engines.  There are even hybrid search engines which are a combination of both.  We learned about keywords and how important they are to get you in the top ten results of a search engine.  We learned that they should never be generic but strategic and at least two words long.  We learned about META tags that are placed in the head section of an HTML page.  It is a summary of the content found on the page.

  We also learned about GIF animations.  They are more cost-effective than creating a swf or flash animation.  It takes up less space and it is more cost-effective to create.   They can be created in adobe fireworks, adobe Photoshop, GIF animators, GIF construction set and GIF animation studio.  When you make a GIF animation you should keep in mind your specific goals.  You must communicate a message to your audience through a visually appealing animated graphic.  You should be mindful that it is informative, creative and not annoying.

  Some helpful sites from this week:

8 Web Design Tactics to Help You When Your Stuck

Search Engine Placement Tips

The 8 tips when your stuck site is very easy to read and very useful.  It has some humor to it as well which can be quite refreshing after reading so many articles on web design.

I began working on finding images for my final project.  I also began thinking about the actual pages and the structure of my website.  I think a hierarchical structure will work the best.  I also refined my banner designs and created smaller versions.  I really enjoyed this project.  I also created two animated GIFs.  I have created one before in Photoshop so it was more like a review and I picked up on the “tweening” technique.  Tweening is creating in between frames.  I created my second animation in Fireworks.  We did review the on FW’s animations, but I couldn’t quite apply some of the neat tricks to my design because I couldn’t incorporate the background into my Gif’s.  I find Photoshop easier, well for me at least. 

  We are almost to our halfway mark in this class.  It is still challenging at times but I am still enjoying it.

Week 6

  This week:

I learned about different elements of design for websites.  Certain elements include: organization, navigation, screen real estate, intended audience, and structure.  When designing a website you need to always keep in mind site structure, page layout, and hierarchy.  I also learned about the importance of keeping websites consistent and if a change is needed, either archive past information or change very little because clients do not want to spend time searching on your site.  I learned this from Jakob Neilson’s article on Fresh vs. Familiar.  He also has another website that I learned a lot from this week, Breadcrumb Navigation and its increasing popularity with clients and websites.  I know it is always helpful for me when I am in websites that have a lot of information.  Other useful resources for web design.

  We also learned more about Cascading stylesheets and their effects on blocklevel and inline elements.  It is useful to know how they work and effect your pages. 

   Navigation methods could be the most important factor for a client when they visit your site.  You need to be mindful of placement, design, readability, direction, and heirarchy.  Different navigation methods include: images, rollovers, text links, accessibility and drop down menus. 

 We also learned about background images.  Different types including tiling images (or repeating) and non-repeating images.   Certain designs and/or colors can either add or subtract from backgrounds.  If you want a dark background, use light copy and visa versa.  This is something I will keep in mind when designing websites.

  I decided for my final project I am going to create a website based around my portfolio.  I feel this will help me when I apply for jobs in the graphic design images. 

Week 6