week 12
Coming down to the wire with our final project. Time to take the pieces and put them together in one puzzle – all the things we did in individual exercises now get applied to our project. I think.
Web hosting sites recommended:
Articles from this week:
- Killer Web Content – Studies of headings and summaries on the web show that viewers are most interested in consumer oriented information which is concise and to the point. Using the perspective of an organization in presenting content (and not how it pertains to consumers) along with being too wordy is a recipe for being ignored by the reader.
- CSS Cheat Sheet – Presents two cheat sheets in PDF format. One is for CSS basics and one is for CSS layout. Plenty of other links for tutorials and helpful information.
- How we really use the web – Designers should realize people skip most of the information on a page and go for what they think will solve their problem. The author presents three facts about real world Web use: 1.People do not read pages, they scan them. 2.People choose the first reasonable option and do not take time to consider all the options. This is called satisficing. 3. People don’t take the time to figure out how a site works, they just muddle through. They may muddle through your site to get where they want to go, but designers should not count on it. The clearer the presentation, the better.
- Estimating Time For a Project – Gives pointers on how to calculate how long a project will take. The process of formulating the estimate include 1. Identify Deliverables: What will the client receive upon completion of the project. 2. Break it Down: Break the project down into simple tasks headed by a summary component. For example Project Planning with a listing of tasks, Design with its listing of tasks, and Testing with a listing of tasks. Add it up, round it up, add in a buffer of 10-25%.
Test your web design at: Browsershots.org
week 11
My final comps:
I made final revisions to my home page and the product page. I have cleaned up the home page so that there is no overlapping. I have rollovers created for the buttons. Right now the “on” buttons are just sitting in the layers in Fireworks.
The directions to draw slices for major graphics, buttons, etc. and rectangles for DIVs and consider export options… incorporate rollover activity – frankly, I’ve done these in individual exercises with a tutorial to lead me through each step, but I am completely overwhelmed when I look at my pages and start to try to remember everything involved. I still need handholding.
I added three extra buttons in the body to help a viewer go directly to a page without searching the sidebar buttons.
I want to animate the photos on the product page. I did the first one in Photoshop, but before I keep going, I need to know how this is going to work. Don’t want to do a bunch and find out I did it wrong. My photos are still too large, even after optimizing to the max. I will have to ask, maybe I forgot something.
Links to sites from this week:
Article: Understanding CSS
Article: CSS Page Layout Basics
Article: Zen Garden
Article: Estimating your time for a project
week 10
Working on our resumes this week. First we added code to modify the layout of a sample resume. Then we took some of what we did to that resume and applied the techniques to our own. It took a long time to get it right. I keep finding places where I forget one little thing, like a hash mark or a semi-colon. Then, when I loaded it to the server, the images that defined the page limits did not show. I could not get them to show no matter how I brought up the html file. Somehow my images folder became separated – I can’t remember now what I did on Friday. So, once I moved the folder and put it on the server correctly, it works. It is interesting to look at the validation panel. I looked there to see if it would help me figure out what was wrong. No help for that, but lots of listings about upper and lower case and some nesting things, etc. To my knowledge, I used the right code. So there is more to it than we know at this point!
Our case study is complete. I am reading critiques – it is very interesting. Critiques are so helpful. You never know exactly how other people will see your design. Even your best effort may have a different effect than you plan for. Also, other people see things you don’t or have different points of view or experience. It’s all good.
Still have to finish my revisions of the Design Comp. Mine was critiqued in class already and I am amazed at the great suggestions.
We had two tutorials this week from online sources. The yacht one was fine. The more we do these things, the better. It is good to see how someone else describes the same actions we have done before. The second one was mostly beyond what I can understand. I did what he said, but I could only really grasp a small amount of what he was saying.
Links for this week:
Article and tutorial: From table-based to tableless web design with CSS by Sheri German
Linked Article: Rendering Mode and Doctype Switching, by Holly Bergevin. Discusses correct doctype, standards and quirks.
Tutorial for creating standards compliant design in Fireworks CS4
Linked articles:
- Getting started with CSS using prebuilt templates in Fireworks CS4 by Matt Stow
- CSS page layout basics
- Taking a Fireworks comp to a CSS-based layout in Dreamweaver
View my webpage comps:
week 9
Continuing work on our Design Project. I took some pictures this week and modified them. I think they look good on my web page comp. Looking forward to seeing how we slice up our designs and bring them into DW.
Links for this week:
Exporting CSS and Images video
Creating HTML Click-Throughs video
Creating CSS/XHTML Layouts video
Introduction to CSS (Part 1) 30 minute video
Articles
- Designing with Grids
- CSS Typography – lots of good links to other info
- Prototyping
- Placeholder text can be copied from lipsum.com
week 8
I am late finishing this week, mostly because I was sick. Starting Sunday afternoon, I had some energy and it has been uphill since then.
Working on the final project. Identifying the needs of my client. Researching other web sites to see how they present themselves. It is quite interesting to compare web sites. Some of them have so much information, it is ridiculous. Their site becomes kind of like a blog. It was also interesting to look for library web sites. I saw a number that were bad or only OK. The ones that stood out were quite a bit better than the others I looked at.
Links from this week:
Article: A Dao of Web Design, by John Allsopp
Article: Blasting the Myth of the Fold, by Milissa Tarquini
Article: Five Principles to Design By, by Joshua Porter
Article: The Difference Between ID and Class, by Chris Coyier
i love typography website
Article: The Anatomy of Web Fonts, by Andy Hume
Survey results for font usage on the web
Article: CSS Typography, by Garrett Dimon
Videos:
- The Complete Design Process
- Information and Interaction Design
- Quickly Transform Photoshop Layouts
- Dreamweaver Integration
Maybe it is because I was sick this week, but the load was quite something. I even had most of my field trip ready to go.
week 7
From the reading:
There are nine fonts on the “safe list”. They are found on both major operating systems. Choosing one of these (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS and Verdana) means users will already have the fonts installed on their computers. CSS allows for chosing a font-family. You can choose a font not on the safe list, with a string of back-up fonts or general font categories specified in case the user is missing your font. Some designers get around this by using specialized fonts in images. sIFR (“siffer”) is another way to solve this problem. It is open source and uses JavaScript and Flash. Kerning (spacing between individual letters) and tracking (spacing between letters in blocks of text) are terms in horizontal spacing. Web designers cannot use kerning, but CSS does letter-spacing, which is tracking. CSS also does word-spacing. Vertical spacing or leading is done through CSS line-height.
Aligning both right and left of a text block (“justify”) is risky in web design, especially in narrow columns. “Rivers” of white space can inadvertently form and create a distraction for the reader. Rivers are less likely with center, left or right alignment. The author describes six categories of fonts: serif, sans serif, handwritten, monospace, novelty and dingbats. San serif fonts work well on the web, especially for body text. Specialty fonts should be used as images or with a type replacement like sIFR.
Try not to use more than 4 fonts on a single web site. The size of type is measured in pixels in CSS. Because of some browsers, using pixels is a problem, so the author recommends using body font size set at 62.5%, paragraph font set at 1.2em, and H1 set at 3.5em. This gets around the pixel issue.
Links from this week’s studies:
Online community for discussing typography: http://typophile.com/
Website featuring fonts in images: http://bearskinrug.co.uk/
Typetester: an online application that allows you to compare HTML type
Free font sites:
Fonts sites – not free:
Fonts from Artists and Foundries:
- The Astigmatic One Eye Topographic Institute by Prof. Brian J. Bonislawsky
- Blue Vinyl Fonts by Jess Latham
- Fountain by Peter Bruhn
- Larabie Fonts by Ray Larabie
- Misprinted Type by Eduardo Recife
- Pizzadude by Jakob Fischer
Listing of special HTML entities to produce special characters: w3schools.com
12 Rules for Choosing the Right Domain Name
Internet Corporation for Assigned Names and Numbers (ICANN) accredits companies that register domain names. Has full list of accredited registrars.
Common Domain Name Registrars:
- GoDaddy – http://www.godaddy.com
- Register – http://www.register.com
- Network Solutions – http://www.netsol.com
Types of Search Engines
- Crawler-Based Search Engines (Ex: http://www.google.com)
- Human-Powered Directories (Ex: http://www.dmoz.org)
- Hybrid Search Engines (Ex: http://www.msn.com)
Info on designing for Search Engines:
week 6
Accomplishments this week: Added design elements to our html resume. The links change color when you hover or after you have clicked on them. The whole resume has color. Gaining some experience with Kuler color. Created rollover buttons. Used Spry Assets to create rollover buttons in the DW lesson. Also, used a system of horizontal tabs to organize information so that viewers do not have to scroll down for that information. Created a small version of my banner for AACC. Created a morgue file for my final project. Will design a site for CJ Fashions, an Annapolis seamstress. I took some pictures yesterday and have brought home her binder with her own pictures and testimonials. She likes the colors I used for her business card, so we will start with those and build.
Links from this week’s reading:
GIF Animation Shareware Programs: a list of inexpensive software programs
GIF Animation digital presentation do’s and don’ts
Matt Brown’s article: Usability: The key to good website design
Jakob Nielsen’s article: Breadcrumb Navigation Increasingly Useful
Spry info from Adobe: http://labs.adobe.com/technologies/spry/
week 5
Read about web design and texture this week. Also saw highlights of some terrible web sites. Used stock photography comps to create an imagemap. I enjoy seeing the final product and how it actually works to link between pages using images. Redesigned my banners and tiled the backgrounds so they spread across the page as the width changes.
Here are some links to information from this week’s study:
Spanky Corners: how to modify corners within the design of a web page to make them rounded
Example of organic feeling web page: Fish Marketing
Web 2.0 designs use background gradients, rounded corners, and whitespace for a clean, un-cramped space. See Mozilla’s homepage.
Creating graphics for the web using Photoshop: The Photoshop Anthology: 101 Web Design Tips, Tricks, and Techniques, by Corrie Haffly.
Using the CSS Property Inspector to style text in Dreamweaver CS4: http://tv.adobe.com/watch/learn-dreamweaver-cs4/styling-text-in-the-css-property-inspector
Poor web page design from the perspective of Vincent Flanders
- http://www.webpagesthatsuck.com/
- Mystery Meat Navigation
- Worst Web Sites of 2008: Navigation #1-5
- Contenders for Worst Web Site of 2009
- Video of bad navigation
MY FINAL PROJECT IDEAS:
One web site idea is for a seamstress I have known for years. Several years ago she went through a long process of developing a business plan. One of the elements of her plan was to have her own web site. She has not as yet had the opportunity to get this done. She has a long list of satisfied customers who would provide testimonials. She has many photographs of her work, although I may need to redo some for the best quality. She does wedding gowns, bridesmaids gowns, prom dresses, alterations, tote bags, the list is very long. I can see if we can use a recommendation from Joanne Fabrics in Annapolis. They give out her business cards to customers who need a seamstress. I designed those cards for her a few years ago.
The other idea I had was to create a web site for a local Realtor. Heritage Realty lists properties primarily in Crofton. They are in need of advertising and exposure in every way. The web site would feature the owner and his expertise. It would have information on each listing with photographs. There could be articles or loan information or other information helpful to a buyer or seller. Realistically, this company would be more difficult to work with than the first one.
week 4
This was a full week. Never having used Fireworks before, I needed time to experiment. It was not too different from what I already know. The videos are a great help. It makes me want to go back and watch the videos for software I already use as I am sure I will pick up some things I missed. Also, I am used to CS3, so the updated videos will help there too.
We are working on our resumes. Writing simple code and getting familiar with tags and links. It is fun to watch it work, pretty much instantly.
I created two banners for the school contest using Fireworks. I am wondering how our study of color will impact the fact that these are Fall banners, so most people will be choosing autumn colors. We have some very artistic students in our class. It will be really interesting to see how the discussion goes.
As far as color goes, it is easy to understand that certain colors have emotions tied to them. It is interesting to think about the cultural or demographic impact of colors. If a color means “power” and also “death” (like black) then the designer must be careful not to convey the wrong message. Using a traditional color wheel, you can choose a monochromatic color scheme (uses one color with variations in shade, tint), complementary color scheme (colors found on opposite sides of the color wheel), or analogous color scheme (colors found adjacent to each other on the color wheel). There are also split complementary, triadic, and tetradic or double complementary color schemes. Computer screens use RGB colors (red, blue and green) in combinations to form millions of choices of colors. White is formed when these three are added together. RGB is an “additive” color model. CMYK is used in the printing process. When you combine Cyan, Magenta and Yellow you do not get white, you get something close to black. CMYK is a “subtractive” color model. “K” is for black and must be used in the printing process to achieve real black. There are warm colors and cool colors. Warm colors includes variations of red and yellow. They stand out over cool colors, which include variations of blue and green.
RGB colors use a hexadecimal numbering system. Each color uses 6 numbers or letters. The first two correspond to red, the second two to green and the last two to blue. Black is 000000 and white is FFFFFF. The designer must carefully choose a palette using color theory and insure that there is proper contrast with the values of colors within the palette.
This week we also learned about Kuler color themes, which can be found within Adobe. We read articles by Jacob Nielson, who writes about usability on the web. Stock photography was covered as a resource for the designer.
Resources from this week:
Stock photography sites:
- http://www.gettyimages.com
- http://comstock.com
- http://www.fotosearch.com
- http://pro.corbis.com
- http://www.shutterstock.com – mostly amateur photographers
- http://www.istockphoto.com – mostly amateur photographers
Articles by Jacob Nielson
Information on the Interactive Advertising Bureau which promote standards and effectiveness in online commerce.
Adobe Fireworks video library:
Adobe’s Kuler color themes:
Various articles and websites on color theory and the web:
- Color Matters/Color Symbolism
- Color in Motion interactive experience
- Color for Coders by Jason Beaird
- Monocromatic color scheme samples
- Analogous color scheme samples
- Complementary color scheme samples
Online color picker site: http://colorschemedesigner.com/
Check your palette for color contrast at: Colour Contrast Check
week 3
FTP not working from home. Can’t send my files to the server until tomorrow before class. Glad to know it is not my fault since others are having the same issues.
Learning which types of image files work best in web pages. JPEG files are best for photographs. They are lossy files, which means they lose information as the file is compressed. GIF files are lossless. Because they use an algorithm, no information is lost during compression. GIF files are best for type, vector images, images with hard, flat edges. PNG files are gaining popularity, but are not yet standard.
Always optimize images for web pages. When saving an image, choose “Save for the web” instead of “Save” or “Save as”. The goal is finding the best tradeoff between quality and size. Keeping file sizes low means web pages will load quickly. This is critical to the viewer.
There are guiding principles for designing effective web pages. As a practical matter, the designer must spend time identifying the needs of the client and learning about their industry and product. Sketching designs happens before designing on the computer. The web page anatomy includes a Containing Block (sets bounds for the page), an Identity Block (includes logo and branding items like color), Navigation Tools/Panel (should be near or at the top and easy to find), Content (the main focal point), and a Footer (which contains copyright, contact and legal info, and often links to other places on the site). Grid Theory uses the pleasing idea of thirds to divide web pages. Common layouts can use a left- or right-column navigation or a three-column navigation. Ease of use and pleasing to the eye are overall considerations whether using one of these layouts or something unique.
Image Editing Software:
- Photoshop – Industry standard for image editing in general
- Fireworks – Industry standard for image editing, particularly for web graphics
- Photoshop Elements – Consumer software for amateur photo editing
- LightRoom – Industry standard for photographers for cataloguing and editing digital photos
- The GIMP – Free editing tool
- Graphic Converter – Shareware for MAC
- PaintShop Pro – Shareware for PC
Adobe tutorial series for Fireworks CS4
Article: Image Optimization
Book: The Principles of Beautiful Web Design, by Jason Beaird – CHAPTER 1 FREE DOWNLOAD
