This week I learned about web fonts and their slow evolution. I also discovered google web fonts and had a good time playing around with that. I also learned how handy grids were in web design and found some great resources to learn more.
On the Flourish website I completed the design document which I think turned out well. I also created the stye tile to show what the general aesthetic of the site could be, including fonts, textures, photos and colors.
Reading: Web Fonts
For your final project, you will be required to implement and use a pairing of web fonts. For a little history of web fonts, read the following:
In addition, we’ll need to review some general guidelines for selecting and choosing web fonts, as well as what qualifies as a “good web font.” Laura Franz has done extensive research on what makes a font worthwhile on the screen. Please read:
In our practice assignment we’ll be using Google Web Fonts. Read the overview of using Google Web Fonts, as well as the writeup on the best Google Web Font pairs.
- Grid-Based Design: Six Creative Column Techniques – an article from Smashing Magazine that details the key elements of grid-based design for the web and gives Case Study examples.
- 960 Grid System – website detailing the 960 pixel grid system (which we will be using) and giving examples; read the overview and scroll down to the examples – click the “SHOW GRID” button next to each design to see an overlay of the grid that was used.
- Greeking Generator – use this website to create “dummy” placeholder text, or “greeked” text to use in your designs or storyboards ( http://www.lipsum.com/ )
And the final project begins!!! I have decided to create a website for a business my mom and I are trying to launch next year. Flourish will be a wellness studio offering yoga, pilates and group exercise. This week I pulled out my marketing plan for reference and creating the project profiler. I sketched out storyboards and worked on the logo (shown below).
We also learned the basics of stock photography and how to approach the different rights of each. Below is a synopsis.
Most websites will require some sort of photography or imagery when taking the design into consideration. You have a few options for producing imagery for a website:
- client supplies already shot images, on disc, or for you to scan;
- client hires a professional photographer, who will supply images to you;
- client works with a printer who will supply images to you;
- you will offer to take images for the client, for a fee;
- you will purchase stock photos via a recognized agency for your client.
Stock photography consists of existing photographs that can be licensed for specific uses. Images are filed at an agency that negotiates licensing fees on the photographer’s behalf. Most stock images are available online, and are easily browsed in huge databases.
Stock images come in two primary flavors:
- Rights managed = an individual licensing agreement negotiated for each use, with an option for exclusivity in an industry or for a period of time; price dependent on use and is often a more expensive option.
- Royalty free = offers the ability to use an image in an unlimited number of ways for a single license fee, with no exclusivity; much cheaper option. This does not mean the image is FREE – it simply means there are no royalties attached. The user pays once to use the image in many ways.
Most sites offer low-resolution versions of images called comps, short for “comprehensives”; these are normally used in rough sketches or designs to show a client how a final piece might look. Some well known professional photography stock houses, offering individual licensing as well as entire cd’s of professional images:
Some Micro-stock houses that are gaining popularity, which recruit mostly amature photographers:
10 Worst Web Site Uses of Navigation for 2010
Top 10 Web Mistakes of All Time
Photos as Web Content.
This week I learned about creating animation in Fireworks. I used that information to create an animation within my banner design. I used states to create a simple flow of my leaves. The important thing to remember is the timing between states and to export it as a animated GIF. Below is the reading about animations for reference later.
Animation: Movement and Interactivity on the Web
- Animation on the web has been in practice for years;
- Designers search for creative and meaningful ways to interject animation into web pages;
- Variation of animation methods currently available on the web;
- Many animation types, are not full fledged motion graphics, but a very simplified, cell or frame based animation;
- Layers of images are situated on top of each other, and frames are removed or hidden over designated times.
Two well known web animation technologies: GIF (screen by screen animated raster images) and SWF (animated vector animation with true interactive capabilities).
Gif animations are low-bandwidth, low-tech ways to create animations. Introduced with the advent of GIF-89a (in 1989 – hence the name), the World Wide Web Consortium released it’s newest version of GIF with the ability for layered animation and transparency.
Why GIF animation has continued to prevail as a popular method of animating objects:
- It is a simple format and a well known standard.
- Decoding starts before the data has been downloaded entirely.
- No additional software installation is required.
- Receiver and decoder are deployed with the browser.
- GIF animations are treated like static GIF files, with respect to HTML and how they are added to a page (ALT tags are included, etc)
- GIF offers the ability to link to one HREF tag (no multi-screen linking)
SWF (Flash Animation)
SWF format is the compiled file resulting from Adobe Flash’s authoring environment. Flash evolved from early vector drawing programs that gained popularity after it was acquired by Macromedia and eventually the file format was recognized by major contributors like the W3C and Microsoft. Adobe purchased the technology in 2005 and integrated it into their Creative Suite.
- The SWF animation technique is different than GIF animation. GIF animation is a simple, frame by frame animation of RASTER images, layered on one another.
- Flash is a rich-media application and animation file format that creates VECTOR images (and has the ability to embed RASTER images).
- Flash often refers to both a multimedia authoring program, the SWF file format and the free Flash Player.
- Flash utilizes vector and bitmap graphics, sound and program code and bi-directional streaming video and audio.
- Flash incorporates elements of typography, video, sound, it’s own scripting language (called Actionscript) AND animation.
The other avenue we took this week was basic design concepts. I read chapter 1 in my text book reviewed the key concepts that I learned years ago in art school. We are also covering design concepts in my graphic design class this week, so I was able to reinforce the information there as well.
This week I was thrown in Dreamweaver feet first. I learned how to setup up a site, work with images and use background tiling. I worked with my banners and created a finished html version along with a smaller version.
I’m excited for the final project. I’m thinking about building a website for an underground construction company that I work for part time. They have a very basic 3 page site that needs to be re-done and I think this is the perfect opportunity!
There has been more Fireworks than the 4th of July this week! I had a lot of fun learning Adobe Fireworks this week. It’s super easy to use and you can undo all day! I also got a chance to play around in Illustrator to create the vector artwork for my banners. Below are a list of helpful terms for Fireworks.
There are some basic terms that we’ll hear over and over again in FIREWORKS when referring to image creation:
- 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;
- controls the state of your image;
- used in animation;
- used in the creation of rollover graphics;
- 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;
- 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;
- 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.
Week 4 was all about CSS ( Cascading Stylesheets) which is a set of rules to help define the design, layout and typography of a website. It works similarly to stylesheets in layout application like InDesign. It makes designing a consistent site easier by applying elements to entire sections at a time.
I learned about choosing the right font and how to use type and its different styles to create visual hierarchy and emphasis within the website. I also learned how to use font families to create backup fonts incase your first choice is not supported on the viewer’s computer.
On my resume project I added a background gradient, footers and sections with specific rules. I am having a little trouble getting my footer image on the page, but I’ll figure it out!
Difference between Class and ID
Pros and Cons of 6 CSS Layout Patterns
12 Really Useful Image Optimization Tools for Web Designers
This week was all about links and images and some more color.
I learned about the 3 major types of web friendly images (.png, .jpg, .gif) and did some exercises to help you figure out which one is best for the job. I also learned how to prepare an image for the web by cropping, resizing, etc. I also got an opportunity to use the color palettes that I created in the previous module in my resume webpage.
03: Images – Formats, Optimization & Saving For Web
03: Understanding Visual Hierarchy in Web Design
Color, Links and More!
This week’s theme of color was a lot of fun. Being an art school kid, I have taken my share of color theory courses but it’s always interesting reading different professionals’ perspectives. The chapter in the book reviewed the following color schemes:
- split complementary
Palettes were also a big topic this week. The different ways designers can find inspiration in everyday objects and photos, then the process of creating color palettes from them. Using the Kuler website by Adobe, I created my own color palettes from found images. Once completed I can save my color palettes using the HEX Code. Hexadecimal counting system is way to define and reference each.
On the continuing resume project, I learned a bunch of new html tags that allow be to create hierachy within my site. I also was able to create links and lists.
Below are links some helpful sites:
Week 1 was all about the basics. It started with the basics of using Angel and the online classroom. I then got to learn a bit about my classmates, which was great. I learned how and why the world wide web was created and the timeline for which it grew. I was introduced to ftp servers and how they work and was given tips on naming and organizing files. I also had a chance to analyze 2 websites and give feedback on them using various filters.
Welcome to my web design blog. Throughout the semester I will be using this blog to post ideas, recaps, projects and more about my adventures in web design. I love feedback and welcome any comments!