Kaitlyn Janine's Blog

my crazy adventures in school

Week Six. 02/23/2010

Filed under: CAT 274 — kaitlynjanine @ 5:49 pm
Tags: ,

This week we took a break from the book and instead watched some lectures and visited some websites to learn more about website structure and design. I think the main things I took away from the reading and lectures this week were about the planning process.

Organization is an essential part of having an effective website. Flowcharts are good for mapping out your navigation and showing the realationship between pages. And it’s stupid, but I never thought about the fact that you should show even your flowchart to your client so that they can approve of it.

Storyboards are the next thing on the list in designing a website. Storyboards are basically just sketches of the design that you have in mind. You should always use a grid and the rule of thirds when sketching out your storyboard, and again, show it to your client for approval.

After storyboards are comps. A comp is basically a digital version of your storyboard that you make in Photoshop or FIreworks. It didn’t say in our lecture, but I’m sure it would be a good idea to get this approved, too.

To make your website from a comp, you use your images and reassemble it using your code. To be consistent, your page layout should be basically the same for all your pages.

Different Types of Navigation:

  News/Column Style
    CNN
    Baltimore Sun
  Drop-Down
    Monster
  Text with CSS Styles
    PETA
    Baltimore
  Breadcrumb
    Peachpit

We read an article on Dreamweaver(though I think it was a little old) that was very helpful, and referenced a few sites that are very opinionated on design elements.

  Good Design Features
  Top Ten Guidelines for Homepage Useability
  Breadcrumb Pros
  Fresh vs Familiar

My Sites for This Week:

(I think after this week I’m not going to include my lynda.com files…they seem to be growing a bit too fast.)

Photoshop Chapter 5
  Tiling a Background Image

xHTML Chapter 8
  Video 1

  Video 2

  Video 3

  Video 4

My Resume

My Banner

 

This Semester.

Filed under: Uncategorized — kaitlynjanine @ 11:49 am
Tags:

This semester has been completely crazy. Between the weather changes, snow days, and my own schedule adjustments, this has been quite a ride so far. I can’t wait until Spring Break so I can just sit on the beach and catch up on my work 🙂 This semester is making me a stronger person- pushing me to handle stresses that I haven’t handled for years, and some that I haven’t ever handled before. I am finding myself balancing my life between school, work, the Graphic Design Club, my family and friends, and my fiance. Every semester before this since I started concentrating in web and graphic design, I have put 100% into school and work, and still had some time for a life. It is not working out that way this semester, and it’s a bit hard.

 

Week Five. 02/19/2010

Filed under: CAT 274 — kaitlynjanine @ 1:36 pm
Tags: ,

This week we learned about texture, typography, stock photos, and optimizing images for the web.

Texture is pretty much anything that gives a site a particular appearance or feel. There is a lot of stuff to know about using texture on the web. If you don’t use it properly it can look very cheesy. If you want your website to have a certain feel to it, start by describing the surface, such as roughness or smoothness, patterns, shape, lines, and volume. The main things that contribute to texture are points, lines, depth, and pattern. Points are the smallest element used to build a graphic element, and have no scale or dimension on their own. Groups of points create line, shape and volume. Minipops Line is the most common element of graphic design, and the one of the most expressive. Diagonal lines create a sense of movement and excitement. Lines with varying thicknesses give a feeling of expression and character. Jagged lines feel dangerous and frantic, while curving lines feel relaxing and smooth. Ninety degree angles feel mechanical, while lots of different curves and angles feels especially expressive. Shapes for the web are usually based on rectangles, but geometric shapes feel mechanical, while freeform and organic shapes have a more informal feel. To create this feeling on the web, people tend to use rounded rectangles. The next version of CSS will probably even have an easy way to create them. For now, however, creating them takes a bit of work. Below are some articles that explain different methods on how to create rounded corners.
  Creating Custom Corners and Borders by Soren Madsen
    Part 2
  Thrashbox by Ryan Thrash
 The previous two are based on Sliding Doors of CSS
 Part 2
  Nifty Corners by Alessandro Fulciniti
  Nifty Corners Cube by Alessandro Fulciniti
  Spiffy Corners by Greg Johnson
  Spanky Corners by Alex Walker

You can also can make an organic-looking site by using organic shapes that draw attention away from the fact that web pages are made up of squares. An example of this is Fish Marketing. When using this method, you also want to be aware of the economy of line, or creating a significant meaning with as few lines as possible.

Perspective, proportion, and light and shadow can create volume and depth in a webpage. It can be as simple as adding a drop shadow. CSS Drop Shadow II: Fuzzy Shadows and Dunston Orchard can give you tips on how to create a drop shadow using only CSS, without having to open Photoshop at all. Nuby on Railsuses shape and drop shadow to create depth to their post-it note. Pattern can be applied to just about anything. Browsers now support background attachment, but for older browsers, there is a Javascript fix available. Veerle Peter’s Blog uses pattern in a discreet way. Tattered Fly uses the “wicked weathered” look, and in the past, so did Jason Santa Maria. Cameron Mall coined the term in his article. Another style is Whimsical Cartoon. Yes Insurance uses it, and Let’s Play Music used to use it. Web 2.0 is yet another style marked by gradients. This style is used by Mozilla and Bamboo.

Typography is the balance and interplay of letterforms. It helps the reader to understand what they’re reading. Typography creates a visual heirarchy through punctuation and graphics, emphasis of certain content, and the relationship between headers and secondary text. This creates easily “scannable” text so that users can quickly find the information they need. Basic rules are pretty much the same for print and web, but there are some important differences.

  Computers render type at a lower resolution
  The useable area of monitors are smaller than most books
  Information on a webpage is very limited without scrolling
  The most distinctive characteristic of web typography is variability

Stock Photos come with different levels of rights. Rights managed is an individual licensing agreement for each use of an item. It includes an option for exclusivity for a certain period of time, and is usually more expensive. Royalty-free includes unlimited use for a single fee. There is no option for exclusivity, but it’s much cheaper. This week we created an account with Getty Images. Some other popular stock photo websites are:

  Jupiter Images
  Foto Search
  Corbis Images
  Shutterstock
  iStock Photo

Adobe TV
  Styling Text in the CSS Property Inspector
Another neat Adobe TV video, but I think we’ve seen it before…


Top 10 Mistakes in Web Design

Gudelines for Visualizing Links

My Sites for This Week

Fireworks:

Chapter 2
  Video 8.1
  Video 8.2
  Video 9
Chapter 4
  Video 9
Chapter 9
  Video 1

Photoshop:

Chapter 2
  Video 2.1
  Video 2.2
Chapter 4
  Video 2
  Video 4

AACC Banners
 &nbsp:Banner One
  Banner Two

Three Friends

 

Final Project Proposal. 02/16/2010

Filed under: CAT 274 — kaitlynjanine @ 2:25 pm
Tags: ,

For my final project I would love to work on further developing my portfolio site. I have a great basic start, but there are a lot of elements that I hope to be able to incorporate into my site. My portfolio site would be divided by content- fine art, graphic art, and photography. I already have most of the digital content sized and ready to go.

Another idea is to work on a site for my cousin’s business, Best Friends Forever Pet Services, LLC. She had asked me to develop a site, and this would be a great opportunity to take it to the next level. Since I have already created a basic site for her, I have the content already. Most of it is graphics that I have made myself, the photos she provided herself, and the logo she owns the rights to.

 

Week Four. 02/08/2010

Filed under: CAT 274 — kaitlynjanine @ 3:23 pm
Tags: ,

Snow, snow snow! We received almost 30 inches of snow this weekend! Since I can’t get out of my house, I am using this opportunity to do all of my Web Design coursework for this week. This week we are going over color theory, and learning about Fireworks. Since I took a Color class at AACC, some of this is review, but some of the more psychological aspects are new to me.

Color Theory
the art of mixing colors to achieve desired effects

Cultural and psychological contexts affect how we interpret color. Demographic palettes represent how different people prefer different colors depending on their demographic makeup (age, sex, etc)

Color Wheels show how colors relate to each other. While pigment color wheels are based on the primary colors of cyan, magenta and yellow, the screen color wheel is based on red, green and blue. The screen color is an additive system, which means that when every color is combined in equal amounts, the result is white.

Psychology of Color:
Red- passion, romance, fire, violence, aggression. Red means stop or signals warning in some cultures.
Purple- creativity, mystery, royalty, mysticism, rarity. Purple is associated with death in some cultures.
Green- nature, fertility, growth, envy. In North American cultures, green means go, is associates with environmental awareness, and often linked to fiscal matters.
Yellow- brightness, illumination, illness, cowardice.
Black- power, sophistication, contemporary style, death, morbidity, evil.
White- purity, innocence, cleanliness, truth, peace, coldness, sterility. White is also the color of death in Chinese culture.

Useful Adobe TV Videos
Understanding Fireworks
Fireworks Interface
Importing and Exporting Images
Understanding Styles and Symbols

New Fireworks Terms
Frames:
  controls the state of your image
  used in animation
  used in the creation of rollover graphics
Web Layer:
  layer that holds slice and hotspot info
  added automatically when you create a slice
  appears in the Layers window, but not editable through Layers

Awesome Color Theory Websites
Color Matters
Colorstrology
Color in Motion
Adobe Kuler-my favorite extension for Adobe!

Our book went into detail about color psychology, and gave different emotional and behavioral effects for each color. It also gave example of how color temperature and value both can play a big part in emphasis and balance.

I learned a lot about the battle over the color wheels, and the benefits of using a good ol’ RBY color wheel, even if it doesn’t accurately portray how our eyes perceive color.

My links for this week:

My Resume

xHTML and CSS

Chapter 2
  Video 3

  Video 5

  Video 9

  Video 10

 

Week Three. 02/04/2010

Filed under: CAT 274 — kaitlynjanine @ 5:25 pm
Tags: ,

So far this week, I have really learned a lot. I am such a huge fan of our book, “The Principles of Beautiful Web Design” by Jason Beaird. It makes such a huge difference to learn about something in words of your own generation (or close to it). He’s mentioned a few really good looking sites that I am going to check out. The one downside is I will be looking them up, hoping they still look the same. The book was published three years ago, which doesn’t make a huge difference as far as the XHTML goes, since it’s been pretty much the same, but design is changing all the time. His guidelines, however, seem timeless and very wonderful. I think this week has been the most informative so far. I have come up with quite a few notes for this week.

A good website must be usable, accessible, functional and beautiful. Users should be drawn to the content, and able to easily navigate throughout the site.The Bus Full of Hippies template is a great example of a page that is both beautiful and useful, with simple navigation.

The navigation should be as close to the top of the page as possible, and clearly visible. Navigation that changes on hover or indicates the current page can help users see where they are and where they want to go. Secondary navigation (including search fields) should not be dominant. The Icon Factory‘s Halloween 2006 webpage was a perfect example of intuitive navigation with search fields being less dominant.

Pages should be consistent. Keep the same theme or style, even if the layout isn’t the same.Ordered List is a perfect example of this. Even though the layout of the main page is completely different than the rest of the site, the consistent color palette keeps the site looking as though it belongs together.

Beaird went into detail about the design process, laying out all of the specific steps a designer has to go through when designing a site for a client. He talked about the discovery process, which includes Googling the company and scheduling a meeting with them. Your first meeting should always be in person when possible. At the meeting, you should take notes with a pen and paper, since computers can not only be intimidating to some, but also because computers discourage eye contact. Also, avoid technical jargon and design-specific questions. Asking specific questions about the design can lead to misguided suggestions.

Some good questions to ask a client during the discovery process:

  • What does the company do?
  • What is your role in the company?
  • Does the company have an existing logo or brand?
  • What is your goal in developing a website?
  • What information do you wish to provide online?
  • Who comprises your target audience?
  • Do its members share any common demographics, like age, sex, or physical location?
  • Who are your competitors, and do they have websites?

When you are designing a new site, the elements that you need to include are:

Containing block
  A container can be either the body tag, a div tag, or a table, and can be fixed or liquid.
Logo
  Include the logo and colors that exist across company media to make up their identity.
Navigation
  Main navigation must be easy to find and use, be close to the top of the page, and must be above the fold.
Content
  The user must be able to find what they need in a few seconds, so keep the main content block as the focal point.
Footer
  The footer usually contains copyright, contact and legal info, as well as links to the main section of the site.
Whitespace
  Having empty space is important to the look and feel of a website. It helps a design “breathe” and moves users’ eyes through the page. A site without whitespace can look overcrowded.

When drawing sketches of the new, site, use a grid based on the Golden Ratio. An easy way to do this is to use the rule of thirds.

As in any form of design, balance, unity and emphasis are a big part of web design. Hicks Design is a good example of using brighter colors to provide unity, and both large and small shapes to create balance. Left Justified is a good example of creating unity through repetition. The red wood throughout the page ties everything together. Woot is a good example of emphasis through contrast. The site uses green, but for the I Want One button, they used a bright yellow.

Bread-and-Butter Layouts:

Left column navigation
  Think Geek(now 3 column nav)
Right-column navigation
  Audi(no longer right- column nav)
Three-column navigation
  Apple Store

Design Showcase and Gallery Sites
CSS Zen Garden
CSS Beauty
Stylegala Gallery
CSS Vault
Design Interact Site of the Week

Trends from ’06

Expansive Footer Navigation
Jeff Croft
The City
Powazek
Fresh Branding

3 Columns with Content First
Vivabit
Veerle’s Blog
Django

My links for this week:
 Kona’s Website

 Chapter Five
   Video 4
   Video 5

 Chapter Eight
   Video 2
   Video 3
   Video 4
   Video 5