This the label I made for a hair spray bottle and part of the label was used in part of a magazine advertisement I made. It was made in the spring of 2012. I used Photoshop for the background and changing the color of the cotton candy. I then made an Indesign document and placed the images in them. The text was added last and was based on another hair spray bottle.
This website has great links with definitions on search engine results, page rank, keyword tools. The page title is what Google uses for their searches while Bing does not use page title always for the results. Search engines are the main way user find websites. A good listing will increase traffic; most websites don’ t consider how search engine work. Google is a crawler based search engine. Human power directories are things like open directory. Hybrid search engine is like MSN search.
Good Host Sites
- Blue Host
- Chrystal Tech
- Network Solution
Keywords are the words the user might use to find your site. Should be at least two words long. Include title and atl tags.
Use Fireworks and Photoshop to make slices to define and create buttons and images. Does not create HTML code or account for incorporation of text/background images. For Fireworks to export css, html, and images import into Dreamweaver. When using PSD, smart objects importing to Dreamweaver. Photoshop save for the web and use CSS in Dreamweaver.
Last semester I did this collage based on Saul Bass work. Most of his centered around logos and movie poster that were simple designs. I tried to add as many of his designs that I could without it becoming to hectic to go along with Bass’s simple designs.
Low Cost Images
Can go to micro stock sites for .20 cents to $10 per image.
Can get the images from:
A set of copyright licenses and tools that create a balance inside traditional all rights resources. Can get them at Flickr or Fotopeds.
- Font Awesome – http://fortawesome.github.com/Font-Awesome/
- Icon Moon (create your own font) – http://icomoon.io/app/icomoon.io/app/
Web Fonts In Photoshop
- Technology serves Human
- Users are always right
- Design is not an Art
- Web Design is first technology and gotten right of when it is not needed.
- The experience belongs to the user
- Designer creates things for the user to use and does not work until the user uses them
- Great design is invisible
- Works so well the design goes into the background
- Simplicity is the ultimate sophistication
- Know what to keep and what you don’t need.
Images should be relevant, interesting, and appealing. Can create the picture yourself. purchase the photo, or hire a professional. Rights managed are professional quality but costly. Can use CC Flickr. Don’t get images from google or hotlinking. Use Photoshop for adjustment. Save as jpegs, gifs, pngs. Can use CSS to enhance images with things like boarders.
This is a picture of my grandfather taken before my mother was even a thought. Through the years the picture got bent and stains all over the image. This summer I took the time on Photoshop and lightened the image and went by small sections cleaning up the image. He cleaned up pretty well.
Putting Design before Content
- The user is not thought of.
- Websites are context first than design second.
- Wire Frame the content.
- Three Document Layers
- Three Document Layers
Designer for a specific Browser
- Leaves out consideration for other devices and sizes.
- Assertive technology needs to be thought of
- Large Text
- Navigation on-screen
- Create pages to web standards
- Preview in Many Browser
Naming & Styling Element Based on appearance
- Use appropriate tags
- Name CSS based on function
Believing the tool is Smart
- You use the tools not the computer
- Don’t forget the code
Misunderstanding linking, naming, and server codes
- Uploading everything to the server
- Use lower case letter
A Picture is worth a thousand words, isn’t it?
- Don’t reply on pictures
- Gif for flat color area
- jpg for photos, gradient and drop shadows
- Transparent png when you need transparency
Putting all the image directly in the page
- Put images in CSS
Being a control freak
- Colors vary from monitors
- Web is not Print
- No <Br> in headers
Think inside the Box
- Using fluid method
- Use 3D instead of 2D
- Use navigation space
You Don’t have to wear all the hats
- If you need help ask for help
Web developing out of old medias like radio and tv. Radio to tv saw voice overs when voice overs were no longer needed. Don’t copy but be influences by old medias. Designers are not in control of the web. Deal with the facts and be creative in the box. Think why you do things.
- Primary: Content most used navigation
- Secondary: Other things that may have interest to the user
- Carding: sorting information that will on the page.
Wire Frames clarify exacting which you want to look like.
Mock up focuses on visual design elements and includes graphs
Prototypes: Semi-functional webpages, give you and the client a feel of what the webpage will look like.
I did these vector drawings in the spring of 2012. The assignment was to first do up close photos of an object then draw the object. I choose a binder clip because I thought it would something you see once it is mentioned. Being really detailed orientated I actually used the paint tool to paint in the black.