Week 10 Summary

Common Mistakes Print Designers Make on the Web

The Dao of Web Design

Five Principles to Design By

Photoshop

You can open files in Photoshop with Mini Bridge.

It is preferable to take your photos in raw format and do the editing in raw. Raw files have more data than jpegs, and when you edit the file the original file is not permanently altered.
Clicking on a photo in Mini-Bridge will open it in Adobe Camera Raw (or in regular Bridge you can right click and select ‘open with Photoshop’ and it will open in Camera Raw.

When editing photos for the Web, convert the color profile to sRGB.

After editing in Camera Raw you can make further non-permanent adjustments in regular Photoshop by editing with adjustment layers and filters instead of editing the file directly.

Filter–>Convert to smart Filters :Converts your layer to a smart object which allows you to apply filters from the filter menu.

Always resize a photo first and only sharpen after it is the final size. The sharpening is dependant on size, and info will be lost if you change the size afterwards.

When resizing for the web change the drop-down to ‘Bicubic Sharper (best for reduction)’

Sharpening only effects one layer. If you need to sharpen a document with multiple layers you can make a composite layer which duplicates all the layers below it in a single top layer. To make a composite layer, select the topmost layer you want included in the composite. Hold down the ALT key while you select ‘merge visible’. Instead of merging the existing layers it merges a new layer with duplicates of the layers below it.

If you convert the layer to a smart object and use a smart layer you can come back later and re-edit the sharpening, instead of the sharpen being a permanent change.

To sharpen: Filter–>Sharpen–> select either ‘smart sharpen’ or ‘unsharp mask’. (The 2 options are similar but Smart Sharpen offers a larger preview and more settings to sharpen with.) Smart Sharpen also lets you have different settings for sharpening the highlights separately from the dark areas.

Fireworks

Resizing with the 9-slice scaling tool will change the size of the image but not the size of the document. Click the ‘fit to canvas’ button (or Modify–>canvas–>Fit Canvas) to resize the entire document to make the resized image.

When using the selection tools you can switch back and forth between the different tools (like the magic wand and lasso) without losing the selection. Use the magic wand to select large similar areas, and then use the lasso to add or subtract refinements. Hold down ALT while you select with the lasso tool to subtract from the selected area (don’t unclick while drawing with the lasso). Make sure you set all selection tools to the same type of edge (ie anti-alias, etc).

You can add a mask to a bitmap by selecting an area with the marquee tool and clicking the “add mask” button on the bottom of the layers panel (it looks like a circle inside of a square.)

You can add effects like drop shadows, etc, to a masked item. In the properties menu click the filters drop-down and select “Photoshop Live effects” to get the type of filters available in Photoshop. Selecting “stroke” from this part of the menu will add a border to an image. ‘Outside’ will give the stroke rounded corners. ‘Inside’ will give sharp corners.

To use a vector shape a s a mask:

A mask with a fade:
Select object.
Commands–>Creative–Auto Vector Mask.
Brings up box with 8 options to control the direction of the fade. After you apply the mask there will be a line running through the image. You can use this line to control the fade. You can tell a layer is a vector mask is there is a pen icon on the corner of the mask box that shows in the layers menu.

To make a regular mask with a vector object:

Place the vector shape over the bitmap image.
Cut the vector shape out of the document (control + X or edit–>cut)
Select photo
Edit–>paste as mask
The vector will mask the photo.

Here are comps of the portfolio website I am designing for my final project:

Homepage:

Interior gallery page:

Posted in ART 170: Web Design 1 | Leave a comment

Week 9 Summary

FINAL PROJECT:

project_profiler (Personal portfolio site.) Flowchart and storyboards are contained along with the rest of the profiler outlining.

Storyboards (homepage and gallery page): gnarlycat_storyboards

Wireframe for home page -This looks a bit sparse because I wanted the first page to be very simple.

Wireframe for a gallery page from site – This is more typical to how the rest of the site will be laid out.

NOTES/LINKS:

Five Essential Principles of Interaction Design

Interactive design is the relationship between the user and the product which it is being designed for.

Interactive design needs consistency. If your interface is not consistent, the user will be distracted by noticing the differences, and will distract their attention from the content.

You want to design with consistency in both aesthetics as well as functionality.

Good interactive design also needs visibility. There is no point to good design if features go unnoticed by the user. Mystery meat navigation is an example of bad interactive design. It should not require effort from the user to navigate your interface.

Interactive designs should be easy to learn and remember.

Perceived Affordance: Taking advantage of the user’s preexisting knowledge. Using images of real world objects with similar functions (like having a link on a website look like a button you can press) is an example of this.

The outcomes of a design’s interactions should be predictable. People will be afraid to interact if they cannot predict the consequences. Labels and previews will help set people’s expectation.

Feedback is helpful for improving your design, but the gathering of feedback should not interrupt the user’s interactions.

Prototyping your design is very important. The design you envision in your mind does not always function well when actualized. You can only tell if a design is good by actually using it.

When designing a site, remember to consider ways which the site may still grow.

Grid Based Design: Six Creative Column Techniques

Typography resources:

I Love Typography
Anatomy of a Web Font
Code Style’s Combined Font Survey Results
A List Apart: On Web Typography
Glossary of Font Terms

Lorem Ipsum Generator

The Elements of Typographic Style Applied to he Web
Typophile
Typograhica
The Font Feed

Stacking fonts with CSS:
Building Better Font Stacks
Code Style: Font Stack Builder

Resources for downloading fonts:
Font Squirrel (Free)
Fontspring (For purchase)

Web Font Services:
Typekit
Fontdeck
WebINK
Google Font Directory
Webfonts Info

To test your text in a browser window with differenet leading, kearning, alignment options:
Type Tester
Typechart

Make your own handwriting into a font: Your Fonts

ASCII art generators:
ASCII-O-Matic
Patrick Gillespie’s Text Ascii Art Generator

Automatic font identification system: What The Font

W3Schools HTHL entities page (Charts of code)

Posted in ART 170: Web Design 1

Week 8 Summary

Stock photography sites:

Getty Images
Jupiter Images
Foto Search
Corbis Images

Shutterstock (subscription baed)
istockphoto (Pay per image)

Web Design:

Vincent Flanders on bad web design

Web Pages That Suck

“Mystery Meat Navigation”: Navigation items that are not clearly labeled, and whose purpose is not apparent until your mouse rolls over them and you can read th epop-up label.

Flander’s Examples of Mystery Meat Navigation

The site for Mxyplyzyk was a particularly irritating example of mystery meat navigation and bad usability. The links on the home page are constantly flashing. Every few flashes the name of what the links represent appears, but the timing is so brief that you barely get a chance to read it. You can find the label again by hovering over the link, but I felt so bombarded by information by the flashing of the other links around it, my memory had zero ability to retain what I’d just read once I moved the mouse away from the rollover. Aside from the completely gratuitous use of Flash and unclear labeling via mystery meat navigation, the site’s usability was further compromised by the quality of the product thumbnails. The thumbnails were very tiny, and have been cropped to such close up views that it is extremely difficult to guess what the product is before clicking for the enlarged picture. I don’t like to waste a lot of time looking at things that don’t interest me, so not being able to get an immediate idea of what something is by the thumbnail usually discourages me from bothering to click and have a closer look. This site is probably losing a portion of their business from people not wanting to waste their time trying to figure things out. (On the other hand, this company is appropriately named, the character Mr. Mxyplyzyk is supposed to be extremely frustrating/irritating, so maybe an element of the site design was intentional….)

If I thought that the flashing mystery meat in Mxyplyzk’s site was frustrating, Pearl Brite managed to out do it. On the front page of this site, the links are not just hidden mystery meat style, but the mystery meant icons bounce around the page. By the time I’ve hovered to reveal what a link contains, it’s moved away from my cursor and I have to track it down again. This is one of the most terrible ideas I’ve ever seen for site navigation. Not to mention, the bouncing bubbles are initially a nice bright blue color. The text which appears with the mouse rollover is white, and would potentially have very nice readable contrast. But when you touch the bubbles to illuminate the text they wash out to a flashing cloudy pale blue, decreasing the contrast drastically when the text appears and making it unnecessarily difficult to read. If the opening page does not completely put you off and one ventures into the site, I found such features as the bouncing bullet points and menu tabs extremely distracting and frustrating to click on as well. This is definitely a site that tries my patience and would discourage me from spending any extra time browsing if I could avoid it.

Flander’s list of 10 worst Websites of 2010.

So far my favorite bad website was the one for the Association of International Glaucoma Societies

I couldn’t stare at the screen without cracking up.

Jakob Nielsen on web design

Top 10 Mistakes in Web Design

Guidelines for Visualizing Links

Photos as Web Content

Posted in ART 170: Web Design 1 | Leave a comment

Week 7 Summary – Part 2: Notes

GIF is a popular format for animation on the web because it simple to make a GIF animation, and they will automatically play in any browser without special software or plugins. They are best for simple animations however, because they are low resolution, do not support a huge color palette, and if you make the animation too complicated with too any layers, the file size will get too large.

The most common use for GIF animation is for advertising banners
(blue banners are the most effective at persuading viewers to click on them).
Loop 3-5 times.

Elements that can be animated in a GIF: Position, opacity, effects, layer visibility

Be very careful when using text in an animation to maintain readability. Sans-serif is better than serif.

Website design:

First step, make a morgue file to collect inspiration, examples of design elements you would like to include in your project.

Use a flowchart to begin planning out the structure of your site. Also use sticky notes to help you decide on the placement of the site’s components. Elaborate on these planning stages with a storyboard.

Keep the navigation straightforward and efficient. Keep all the different pages making up the site unified in appearance (they don’t have to be exactly the same, but they should look like they belong to a consistent site).

Fireworks:

You can convert an object into a symbol. The symbol can make working a lot more
efficient; it works somewhat like grouping as the graphic becomes a single entity, but it is still possible to edit the components making it up. It also becomes a master copy, so each time you use the symbol it is a copy of the original. If you edit it you are editing the instance and not the original. You can edit an instance and the original copy will be unaffected. However if you edit the original copy then all of the instances will take on the change as well. The allowance to make global changes by editing the original file is what makes them so valuably efficient.

If you click on an object and a cross hair appears over it, then you know that the object is a symbol.

Edit in Place Mode: allows you to double-click on something, and the rest of the document will fade out. You can edit only the thing you clicked on, separated out from the rest of the document (even if it is grouped to something, and does not exist as a separate entity).

3 main types of symbols in Fireworks: graphics, button, animation (also components symbol, an enhanced graphics symbol).

You can make a graphics symbol either from a single item or from a complex group of items.

To convert an object to a symbol:

Select object–>Modify–>Symbol–>Convert to symbol. A dialog box will come up and you can type in a name for the symbol, and select which type of symbol you would like it to be.

*To alter a symbol without the other instances also being effected, only click on it to select it once. Don’t double click. Add filters and change size in the properties panel.

You can enable 9-slice scaling guides when you convert something to a graphic. If you apply 9-slice scaling guides you will always go into isolation mode when you edit it. When you position the guides inside a symbol with 9-slice scaling enabled, the guides will always stay put. They are kept locked down as part of the symbol.

Creating animation symbols:

Select object–>Modify–>Symbol–>Convert to Symbol–>set type to “animation”

Brings up a dialog box where you can determine things like how many stages you wish to make up the animation, if it should roate or scale, etc.

A State = a frame of the animation (like a cel in traditional animation).

Inside the State panel you can control aspects like the timing of the states, if there is a delay between each one showing, etc. (The number for the state delay is to the right of the name in the states panel.) The number shown for the state delay equals hundreths of seconds (“7” actually = 7/100th second). To slow down the speed on an animation change the timing delay number to a larger value.

Creating GIF animation in Fireworks:

Make sure that all layers you wish to remain visible are presnet in th estate when you animate. If a layer is not animated select “share to state” (highlight layer and select from drop-down menu in upper right of layers panel). You can highlight all layers at once to do this. Even if a layer is visible in the PNG file, if it has not been shared to stats it will not show up in the GIF animation.

The layer that will be animated, you do not “share to state” (This is because it ill be different in each state in order to achieve the animation). It will be distributed to the states as you animate it.

First method to animate:

1. Select object you wish to animate.

2. Edit–> Clone (this makes a copy of the object in the exact same position.)

3. Make as many clones as you want states.

4. Change the position of each clone layer to create movement. Once all of the different clones have been positioned where you want them, then select them all and select ‘distribute to states’ (select the layers in the layers menu, select ‘distribute to states’ from the main drop-down in the states menu).

If the layers do not distribute to states in the correct order, you can rearrange them by drag and dropping. test to make sure the animation runs smoothly.

To Export the file as an animation:

Optimize panel–>make sure that ‘animated GIF’ is selected (the default is regular GIF, which will not play the animation, so be careful to change it.)

Or: Save as an Adobe Flash file (File–>Save As–>Adobe Flash SWF)

Twist and Fade

Select object–>Commands–>Creative–>Twist and Fade

You can set a variety of effects, such s fading opacity, blur, moving in a circular motions, or random patterns.

Make sure to check the box in the twist and fade dialog box that says “Animate”. Click “Ok”.  Fireworks will generate all the states needed to accomplish the animation.

Tweened Animation

1. Convert the object to a symbol.

2. Make a copy of the symbol and move it to a different position on the screen.

3. Select both instances of the symbol.

4. Modify–>Symbol–>Tween instances.

In the dialog box that will pop up you can set how many states you wish to comprise the animation. You also can chose whether or not to distribute to states. Fireworks will then generate all the in between states needed to make the symbol move from postion 1 to position 2.

Export as an animated GIF.

Animating in Photoshop

Start with a layered file which hs different element son each layer.  Open the animation panel from the windows tab in the top navigation menu. There will be only one frame in the animation panel. The frame will only show those layers which are visible in the layers panel. Make a second frame by clicking the button that looks like a tiny square inside and in the corner of a larger square. The new frame will be a copy of frame 1. Select frame 2 and make changes (such as turning on the vibility of a layer which was hidden in frame 1). Continue adding new frames and making new layers visible until all layers have been added.

To add a layer and have it visible in all frames, select the layer. This brings up 3 unity icons at the top of the layers menu. Clck on the center button (“unify layer visibility”). This will bring up a dialog box. Clik “match”.

You can test play an animation by selecting the first frame and clicking the arrow button in the animation panel. o change the timing delay: Click the drop-down menu of any frame (the little black arrowunderneatht he frame icon).

To make the animation loop: Drop-down on bottom left og the animation menu. CHange from “once” to the # of times you wish the loop to play.

To save:

File–>Save for web and devices–>make sure format is set to GIF

*If you have a photo in your animation, and the GIF format makes it look bad, try increasing the # of colors).

 

Posted in ART 170: Web Design 1 | Leave a comment

Week 7 Summary – Part 1: Links

Sites for website design style inspiration:

Unmatched Style
CSS Drive
Design Meltdown
Pattern Tap
Yahoo Design Pattern Library
Responsive Web Design

Posted in ART 170: Web Design 1 | Leave a comment

Final Project Proposals

Idea 1: Personal Portfolio

(One of the reasons I specifically took this class was so I could do this.)

I have current digital scans/photos of all traditional artwork spanning from several years old to current (Categories include: paper collage, pen and ink, ceramics, and textile projects). I will also be able to link to 2 websites which are using digital art I made for headers within the past 2 years.  Hopefully I will soon be able to add a third as I recently completed a freelance project, but the logo I designed has not been applied to the website yet. Site would also include an artist’s statement. Site would be a showcase portfolio which could be shown with a resume.

Idea 2: Website for “The Feral Cat Fairy. . . humane cat population control through spay and neutering” Project.

The director of this project is someone I work with at my job. There is an overpopulation problem of feral cats at a horse-boarding barn she is affiliated with. The populations have become so great that farmers have begun killing off many of the cats to keep the numbers down.  Furthermore several batches of kittens have been abandoned by their mothers at ages too young to survive on their own. My coworker is trying to capture as many of the cats as possible and bring them to the SPCA to be neutered before re-releasing them (she has also personally adopted 3 of the abandoned kittens). If the population can be kept under control the cats won’t keep being killed. To raise money for the large quantities of cat spaying/neutering my coworker has been collecting old art books and the shop “Art Things” in Annapolis is selling them for her. Website would include information on fundraising to finance the neutering project, photos of many of the cats and kittens affected, and lots of other information on feral cats, such as information on how they got there to begin with, why the problem starts, why it is wrong for people to assume that domestic animals can fend for themselves, solutions to feral cat overpopulation, links to organizations that are helping this project, such as the SPCA offering discounted neutering and the people who have been lending humane traps to the project. My coworker heading the project has many photos of the cats and barn already and I would probably visit the barn and take some photos myself to feature on the website. I would have to do some research to fill out the factual/FAQ content.

Posted in ART 170: Web Design 1 | 1 Comment

Week 6 Summary

Dreamweaver

Creating new documents:

1. from the welcome screen simply select ‘create new html document’

2. Files–>right click root directory folder (folder icon)–> ‘new file’ (will automatically make new file based on the type of file you have set as your default in preferences).

3. File–>New: brings up dialog box with lots of options. Through this prompt you can select DocType declarations. Currently XHTML 1.0 Transitional is the most popular Doctype.You can attach pre-made style sheets from this menu as well. Click ‘create’.

You can set/change your new document preferences  by going to Edit–>Preferences–>New Document

Specify if you want your default document to be HTML, XHTML, which version, etc. If your document is set for HTML you can choose whether you want the file extension to be ‘htm’ or ‘html’ (it doesn’t matter, just personal preference).

Ctrl + n is a keyboard shortcut to the ‘create new’ dialog box. This will only work if you check a check box for it in Preferences.

You can manage the images in your site through the assets panel (images are the top icon on the left hand side of the assets panel). You can choose to view your assets panel by clicking at the top of it to choose either a list of all images on the site or a ‘favorites list’ where you can keep only the most important images. Placing an image on the favorites list does not alter it’s appearance in the regular list, it is just making a shortcut for accessing it. You can rename the image in favorites and it will not change the original file, and you can also further organize the favorites list into folders to make viewing and finding more manageable. You can add images to the favorites panel by right clicking on it in the site view and selecting “add to favorites”. You can also add and subtract images to the favorites panel by highlighting and clicking the ribbon icon at the bottom of the panel (it will have a plus or minus next to it for adding or deleting). You can also add images to favorites by right clicking on them in the files menu.

The assets menu makes it easy to place images on your page. There are several ways to do so:

1.Place your cursor where you want the image. Menu–>Insert–>Image. You can select the file you wish to insert from a dialog box.

2. Place your cursor where you wish to add an image on your page. Highlight the image you want in the assets menu. Click the ‘insert’ button at the bottom of the assets menu.

3. Drag and drop an image from the assets panel directly onto your page.

If you select an image in the assets panel and click on the ‘edit’ icon at the bottom of the panel the image will automatically open in whatever editing program you have set as your default for that type of image file extension (ie, you can have it set so all jpegs open in Photoshop, etc). You can also accomplish this by double clicking on the image in the assets panel. You can choose which editors to set for which file extensions by going to  Edit–>Preferences–>File Types/Editors. Click ‘Make primary’ to set an editor as a default. If an editor you wish to use does not automatically show up to choose from, click the plus sign over the Editor Window.  This allows you to browse your hard drive for the program you want. If you wish to edit an image in a different program from what you set as the default, right click on the image name in the assets panel and select ‘edit with’ and then choose the desired editor.

It is a good idea to turn on the setting that will cause Dreamweaver to prompt you to fill in alternative text for your image (Edit–>Preferences–>Accessibility). Having alternative text will make your website more accessible. You can fill in this info at any time through the properties inspector, but it is best to do it immediately upon placing an image so that you do not forget to add it later.

If you want the text on your page to flow around an image you’ve placed, you can accomplish this by changing the class style of the image through the pull-down menu in the properties inspector. Selecting “article-image” will cause the text to flow around it.

Fireworks

View–>Smart Guides–>’Show smart guides’ and ‘snap to smart guides’ = select to turn smart guides on or off.

View–>Tool Tips. If you turn on tool tips it will display the X and Y pixel coordinates when you move an object around.

You cannot delete the web layer from a fireworks document.

In the layers panel you can have sub-layers. You can even have sub-layers within a sublayer.

You can create a master page layer to use throughout the design (sounds to me similar to the feature in InDesign, although the lesson did not go in depth into this feature yet).

Clicking on a layer in the layers panel causes everything in that layer to be selected.

File–>Image Preview (Provides export options that are different from the ones you get from the optimize panel, although many of the options are also the same.)

Compound shape tool: Using the different options for compound shapes allows you to have paths automatically grouped as you use the tools. If you select the punch tool and draw a shape over another shape the top shape is cut out of the bottom shape. However you can still move it around as if it were a separate but grouped shape. This seems to me similar to using the pathfinder tools in Illustrator CS3/4 except you have even more control over editing the end result.

Live filters allow you to place an effect on an object but the effect stays completely editable.

Select a layer and click on the plus sign next to the word ‘filter’ in the properties menu. You can select different filters like drop shadows, glow, blur, color correction, etc. You can turn the effect on and off without deleting it entirely if you change your mind about wanting the effect.

Auto Vector Mask Tool Commands–>Creative–>Mask–>(choose which direction you want the fade to orient to)–>Apply

You can apply styles to text.

A style is a collection of effects that are already grouped together. Using styles saves you time because you only have to apply one selection to your object instead of choosing several different effects.

If an object already has a style applied and you duplicate it, the duplicate will be linked to the styles.

If you edit the style that is applied to a duplicate object, and want to apply the edited version to the original as well,click the ‘redefine style’ icon (small square with a bent arrow next to it). The icon is found beneath the style drop-down in the properties menu, second icon from the left.

Styles usually work better with vector images than bitmap.

To apply a clipping mask: select–>Restore Bitmap selection–>ok

Once the object you wish to mask has been selected click on ‘Add Mask’ icon in the layers panel (looks like a circle inside a square).

Blending Modes are a quick way to make adjustments to things like a photo being overexposed, etc.

Make a duplicate of your image and make adjustments to the top layer. In the layers panel the drop-down at the top is default set to ‘normal’ you can change the blending mode by choosing different options like ‘darken’ or ‘multiply’. If a blending mode gives too strong of an effect you can decrease the opacity to make the contrast more subtle. The blending mode can also be adjusted from the properties panel. Blending modes do not work with symbols.

More on Kuler:  If you create a color theme on the Kuler site you can save it as an Adobe Swatch Exchange File (ASE).  Click the second icon which looks like a page with a bent corner and an arrow pointing down next to it. To load in Adobe, click the options tab in the upper right corner of the swatch menu. select ‘replace swatches.’

If you use Kuler directly in Fireworks through an extension, right click on a color theme in the menu and select ‘add to swatches.’

To save click the options drop-down in the swatch panel and select ‘save swatches.’ Choose the ASE extension.

Posted in ART 170: Web Design 1 | Leave a comment