Week 7 Summary

October 15, 2011 in Web Design Summaries | Leave a comment

Argh, getting behind again. More on that later.

So this week, we worked on basic animation in Fireworks and Photoshop. I haven’t quite gotten used to the setup Fireworks offers, but I guess it’s like learning anything else–it takes time and practice! Some of my classmates’ banners turned out very well, and they managed to incorporate the animation nicely. It seems like they are really enjoying the work 🙂

Fireworks animation works by creating “states” instead of frames, which are pretty much the same idea. The way you set up an animated symbol will directly affect how you’re able to use and edit it later, so it’s best to save frequently and go back to scratch when needed. Modifying any graphic into a symbol automatically deposits it into a little collection that you can pull from whenever you want, so that’s helpful. I had a really hard time figuring out how to modify a symbol once it’s been made though.

Animation for the web in general has been through a lot of growth since it first began, though making GIFs is still the prominent, simpler way to do it. This method relies on raster images though, and only allows for frame-by frame.The other option is SWF, or Flash. This has come to a decent level of popularity in recent years, as it allows for greater flexibility in what you can do. It relies on vector, which pretty much allows you to embed raster files. And while GIFs are limited to simple animation, Flash can incorporate text, sound and its own scripting language.

The reading for this week concentrated on the importance of layout and composition. Much of the textbook chapter mentioned the essentials like shape, emphasis, animation, and “the fold” (the first part of a web page you see before scrolling down). I’ve noticed that not all websites maximize the usefulness of the fold, often placing the most pertinent information somewhere further down the page. While it’s not horrible to do that, it detracts from the page’s initial impact.

 

Pretty neat stuff, on to catching up with week 8…

Final Project Proposals

October 5, 2011 in General Updates, Web Design Summaries | 1 comment

Let’s cut to the chase.

Proposal #1: Personal Portfolio

This is pretty straightforward. The main highlights of my site would be:

  • A home page directory
  • An “About me” section
  • Separate sections for my recent traditional and digital artwork
  • A resume portion that contains generic information like work experience, schooling, etc.
  • A “Recent Exhibits” page or something like it (containing past exhibits, current and upcoming events)
  • A contact page

There will probably be further category break-down for my artwork, but only into two more categories tops. I will make all the page assets myself (aside from possibly using free fonts), so the site can be a portfolio piece as well.

Proposal #2: Anne Arundel Archers

The second option would be to work pro bono for the Anne Arundel Archers in Crofton, MD.  I’ve taken a recent interest in archery and have passed their sign for years along Route 3, but haven’t had the means to get involved until now. I’m not a member as of yet, but this website would be a great way to get to know how the club works.

While they already have a website, I really think that it could do with some improvements. The information is a little vague and that logo hasn’t been touched in at least 10-15 years. I’m not trying to spurn the creator of their current website or say that my design will be better, but I’d at least like to try. A club that has been around that long deserves that much.

All of the officers are local and have either a phone number or e-mail address listed on the site, so between personal meetings and digital means of communication, I could get a dependable stock of content, photos, and info for the site. Provided they let me do this, anyway.

Week 6 Summary

October 5, 2011 in Web Design Summaries | Leave a comment

This past week was mainly about polishing our strongest banner designs and tiling a background image for them. The tiling background is needed since not all monitors are as small as 800 pixels wide; repeating a background helps eliminate the problem of having a banner cut off abruptly.

We also learned some nifty new tools for Dreamweaver as it pertains to adding images to a webpage being edited in that program. There’s toolbars, menu options, and favorites lists that can help you organize all your assets into a manageable format. Knowing what goes on in the code really helps to round out the knowledge of DW’s WYSIWYG nature, too.

Fireworks continues to impress me with its vast array of efficient tools. We covered how to make vector masks, work with compound shapes, and use the layer blending options (effect +opacity). I don’t think I needed to use it for the banner assignment, but I will definitely keep it in mind for the final project.

Speaking of that! My Final Project entry is coming right after this.

Week 5 Summary

September 28, 2011 in Web Design Summaries | 2 comments

I’m getting there! Slooooowwwlllyyy getting back on track with the schedule for this class. I really enjoy it, but life has been making a habit of obstructing punctual turn-ins…

Adobe Fireworks

I had heard of Fireworks before but didn’t know what features it had that made it worth investing in… However… it’s like a mini Illustrator for web designers, with some Photoshop elements thrown in. We worked with it to create a couple of banners for the AACC Fall Banner Design Contest.  It’s actually very enjoyable to work in 🙂

There are a plethora of tools at your disposal, including, but not limited to, the pen, shape, line, texture, and pen and vector path tools, and some old favorites, like the Pencil, Paintbrush, and Eraser. There’s also the gradient and paintbucket. The program operates similarly to PS and AI in that it uses layers, though the layout is slightly different to cater to easier page designing. By default, the properties panel is located on the bottom of the screen, which I find to be a much more helpful location as opposed to being on the right side. Fireworks also has a native PNG format that is different from the flat image PNG; in the FW PNG, all of your layers and page information is saved in a high-quality file.

Here are some free Adobe videos on Fireworks:

Some fun terminology that we are getting acquainted with:

Layers:

  • think of an onion and the layers of skin you peel off of it, one at a time;
  • layers of acetate used on a overhead project, that, when sitting on top of one another, create a collaborative piece;
  • layers can be moved and the order of items on a layer can be rearranged;

Frames:

  • controls the state of your image;
  • used in animation;
  • used in the creation of rollover graphics;

Guides:

  • guides help you divide up your image;
  • guides are invisible, except within the original program;
  • to show guides, show your Rulers, Ctrl-ALT-R or Cmd-OPT-R;
  • pull down guides from the ruler bar to divide up the layout into images / text;

Slices:

  • think of a knife, cutting through the image, dividing it up;
  • slices do just this, so that you can “chop” up an image ;
  • you later reassemble it with HTML;
  • NEVER slice and build a website entirely as graphics;
  • slices are stored in your raw file in Fireworks;
  • slices will not print, show in a browser or save in different formats;

Web Layer:

  • Fireworks creates a layer called Web Layer;
  • holds slice and hotspot information;
  • layer is added automatically when you create a slice;
  • is not editable through the Layers window;
  • it does appear in the listings as a layer.

Banner Design

Going back to the banners I was talking about earlier, we did do some light reading on the subject. It is true that most webpages have a banner of some kind, whether it is for branding or just information. The banner can be best described as the “header” for your standard internet page. Without it, viewers have little to no other frame of reference for your page besides the actual address. Banners can also be animated or static, and set the theme for the rest of the page. Of course, not all banners are there to describe a site either: they’re used for advertisements as well.

One fun link we got concerning this topic: Interactive Advertising Bureau. I didn’t even know there was such a thing! Apparently, it exists to be a helper to any media companies in increasing their revenue through interactive online means! Very interesting…

Texture in Web Design

The third component to this week’s lesson  involved reading the chapter from our textbook on texture. This has to be one of the more complex elements of design because it can incorporate just about every other aspect of design one way or another.  Line, shape, pattern, rhythm, color… There are a huge number of possibilities when considering texture. Some example websites referenced in the book to demonstrate these principles:

Here are examples of different, popular styles:

Week 4 Summary

September 23, 2011 in Web Design Summaries | Leave a comment

Very late posting this…but alas, sometimes life gets busy and likes to chunk curve-balls at you. Yay for baseball analogies! Okay now to the point…

This week we covered CSS more in depth. It’s fascinating stuff, really. And a lot of fun to play around with. There are different selectors that govern which kinds of elements are changed in the HTML: HTML, ID, and Class. HTML applies to regular block elements in the code; Classes apply to certain sections of the code that you designate accordingly and can be used more than once; IDs are the same as classes, except they can only be used ONCE. You can also use DIV tags to insert modifications into inline elements. Some web pages we were given to read in reference to CSS:

We also went over color again! Color is a vital part to any design work, and designing for the web is no exception. Having tools like Kuler help a lot when it comes to making palettes, though you still need to be careful that you aren’t  putting contrasting colors together. It’s feasible to do so, but only in certain ways….otherwise your eyes feel like they’re going to pop out of your head when you look at the page! Not fun.

Last but not least, repeating and static backgrounds! Lots of good Photoshop tips from the Lynda.com courses, especially when it comes to sizing your background image correctly. Testing out the tiling sizes and designs helps too–sometimes you have a nice design by itself, but when it’s multiplied on the page a bazillion times, it can be a bit distracting…

Anywho! All this to say that we have created some spiffy online resumes! I think mine is still a bit rough; perhaps the colors are too saturated. I tried toning it down a bit, but we’ll see what my professor and classmates think. 🙂

The Logbook