Education Section > Usability & Website Design
LIS4301 - Electronic Media Production
Spring 2008
Instructor: Jane Barrager
This course focused directly on design, and the common rules and guidelines to follow when designing anything. Unlike other courses I took, this course did not just focus on designing for the web. This course also discussed designing ads, logos, etc. This course focused particularly on four key design concepts: proximity, alignment, repetition and contrast. In a few of my previous courses we had discussed these concepts before, but not to the extent this course did. In this course these key concepts were pretty much the crux of the course. All designs we created and all the assignments we did involved these four concepts.
I learned a great deal about these concepts and how to properly incorporate them into any design. The first concept, proximity, involves making sure like elements remain within a close vicinity of one another. For example, contact information such as address, email, etc should all be located in the same general area. The same applies for navigation and other web elements. Secondly, there is alignment. Elements in the design should maintain one alignment and stick to it. The design should not have one block of text left aligned, then another right aligned, or then have another one that is centered. The design should try to align nicely all on along one margin. Third, there is repetition, meaning put certain text and shapes in the same place as it was on the other pages. Fonts, color schemes and placement of these elements should be consistent throughout. Finally, there is contrast, making sure colors and text mesh well together. Designs shouldn't use dark text on dark background, but rather dark on light and vice versa. Contrast is not just about colors though. It also includes the size of text, such as making more important items or headers larger or bold so that they stand out and are easier to see. By learning and understanding these four concepts in this course, my designs have improved and have really become more professional.
In this course we had several assignments in which we created logos, designs and websites, using the mentioned guidelines. In one assignment, I learned how to create better logos. The logos for this assignment were all just made of letters, but I learned a lot about how to combine letters and how to use color and size to make logos with letters look more professional. Designing logos has always been one of my weaker areas of design and this assignment helped me increase my creativity with logo design. Another one of the major assignments in this class was to redesign a website. We had to create a website wireframe in Photoshop making sure to abide by all of the design guidelines as well as the guidelines for accessibility and typography. We also had to make sure all layers were named and organized. This assignment was some of my first Photoshop wireframe experience and I really enjoyed designing the site in Photoshop, compared to my old method of just coding it right away.
Skills Acquired
- Design Guidelines
- Logo Design
Samples
- Web Redesign - For this web redesign, we had to take a current website that broke every possible design guideline and
create a new layout. This layout had to be created using Photoshop, with each item, text layer, and element on their own layer.
This assignment was my first real attempt at creating a wireframe. Note, that the PSD file is also below which can be viewed in
Photoshop so that you can see all layers, styles, and fonts.
View the Web Redesign (JPEG)
Download the Web Redesign (PSD)
- (1.47 MB)