Comments Off

Kaarens website update

http://kmd.syncomsales.net/Classwork70309/dsymbolisminart2.html

Comments Off

Latest version of Sue’s Webpage

Here is a link to my final webpage for now. Next time I’ll try posting it to google, so I don’t have to make extra space for the tripod ads.

Comments Off

I know what I need to do I just have to keep looking for the little things that get left behind: here it is http://annaengelbrecht.tripod.com/index.html

Comments Off

Week 5 (LAST WEEK)

Post links to your final pages here on this blog if you haven’t already– and check ‘em to make sure they’re working! i need to be able to see them for grading!

Comments Off

jfgiampietro_homework_week 4

Got the IRT in theory, couldn’t fully make it happen.

Week 4

Comments Off

michelle website week 4

http://michelleorsigordon.com/mlog/mlog.html

I really got the image replacement technique, probably because we went over it in detail last class.

I  modified an image gallery I found on w3school  for the painting and printmaking pages. Eventually I would like a more sophisticated gallery, but I’m happy this works.

Buttons for navigation seemed wrong for the site. I added links but didn’t want them in list form. I’m having trouble spacing the navigation links.

I would like to push the header image flush with the top and left of the page.

Michelle

Comments Off

Week 4

Review of CSS positioning
Here is another resource that explains much of what we went over last week

File Structure and Site organization

Images when and how to use backgrounds and IMG tags

Interface Design Principles

Now we’ll talk a little about the design process.

The Basics

Function First. A Web site is like a chair. Aesthetics don’t make up for poor usability. That beautifully carved and varnished cherry wood contraption in the corner is no good if you can’t sit in it.

Your interface is a frame for the content of your site. Just like a piece of fine art, the frame shouldn’t overshadow the picture.

Don’t make me think. Your Web site isn’t a puzzle for your users to solve. When they hit the home page, it should be immediately apparent what they can do next. Think about it, when you go to a Web page, do you carefully read every word and weigh your options before clicking to the next page, or do you quickly scan and take a shot at the best guess for what link or button will get you what you want?

Don’t reinvent the wheel, unless what you really need is a jetpack. At this point, Web designers have figured out the best solutions to the basic Web problems. And, visitors to your site spend 99% percent on other peoples sites. So give them something familiar.

Where am I? Where can I go from here? Clear, persistent navigation is crucial to a successful site.


Page Size

Unlike a printed page, you can not predict or truly control the amount of pixels you users will see. Here’s a few quick stats to chew on:

October 2008 Monitor resolutions:
1024×768 – 45%
1280×1024 – 31%
800×600 – 7%

(These stats are from The Counter)

To further complicate things, now many users have the ability to view the Web through mobile devices. The iPhone, for example, has a screen size of 480×320 (but with that nifty zoom feature) and they go down from there.

So what’s a designer to do? You’ve got two main options:

  1. Use a fixed layout, and design for the lowest common denominator. Since 10% of users are still looking at the Web at 800×600, build for them and assure that the largest amount of users will be able to easily view your page.
  2. Use a flexible layout, one that resizes to optimally fit the current browser window.

Each of these approaches has its drawbacks, and in truth you will probably find yourself splitting the difference more often that not.

Regardless of how you decide to tackle the problem, building to optimal page size means keeping key elements “above the fold.” Key elements include navigation, branding, and enough page content for the main points to get across. And remember that users are willing to scroll horizontally or vertically but rarely want to do both. Nor do they want to scroll through more than a couple of screens of content. Pages longer than that should be broken up. Last, don’t forget that the maximum visible page area is actually smaller than the screen size due to browser interface elements (sometimes called browser chrome).

A few good links


Creating a Design Mockup

Creating a template

  1. Open the wireframes that you created for your site. You are going to use this as a guide for setting up your template. For every distinct interface that you have defined for your site, you will need to make a mockup for it. If your page layout doesn’t vary much from page to page, you may be able to use a single document and sets of layers to contain all the permutations.
  2. Create a new document in Photoshop or Illustrator. Go to File > New
  3. Set the following document settings:
    • Size: 800×600 or 1024×768, depending on what size you decide to build for
    • Resolution: 72 pixels/inch
    • Mode: RGB
    • Contents: Transparent
  4. Open your layers palette: Window > Layers.
  5. Create and name separate layers for each part of your design grid. Typical sections that your site may have are:
    • Body (background color or pattern)
    • Branding / Header (Logo and Site Title)
    • Sidebar
    • Global Navigation
    • Content
    • Section Heading
    • Copy (sub-headings, paragraphs, lists, bullets and inline links)
    • Footer (copyright and email link)
  6. Turn on your Rulers: Window > Show Rulers
  7. Use guides to define the sections of your design grid. Click on the Move Tool in the Tool palette and drag a horizontal and vertical guide from each ruler.
  8. Use the Photoshop or Illustrator tools to create your mockup. The mockup should show the client how the final interface will look. Specify logo, color scheme, fonts and positioning.
  9. Once you have finalized the your mockup you are ready to slice and optimize your images.

IMAGE REPLACEMENT TECHNIQUE

this is how the pros use images for headers, navigation etc.

The Recipe:
these things must be set in the CSS for the element

if you have all those elements it should work. for more see my bookmarks on the subject.

EXAMPLE FILES

This is a link to a zip file containing all the examples we used in class.

Comments Off

Homework #3

Week 3- Assignment

Comments Off

Michelle Orsi Gordon #3

http://michelleorsigordon.com/michelleorsigordon/mlog.html

I added css to my new artist statement page, link is at the bottom of the page.

Comments Off

jfgiampietro_homework_week3

On a roll . . .

vA

vB

vC

vD