BarbaraMilligan'sBlog

Week 15

barbaramilligansblog — Mon, 10 May 2010 02:45:41 +0000

Week 13

barbaramilligansblog — Sat, 24 Apr 2010 20:24:38 +0000

Week 11

barbaramilligansblog — Sun, 11 Apr 2010 22:34:27 +0000

On my Home page I change the navigation buttons when I changed my rollover buttons to look like this.

It is a simpler look which was what I was going for in the first place. I guess I got caught up with the pretty buttons and not what would go with the theme of the page.

On the Graphic Design page I moved the navigation buttons up to add negative space at the lower left which helps equal out the negative space on the upper right. I also fixed the typos.

Website hosts :

Understanding Cascading Style Sheets:http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html

How to Estimate Time for a project:http://www.sitepoint.com/blogs/2009/04/14/how-to-estimate-time-for-a-project/

How we really use the web:http://www.sensible.com/chapter.html

Week 10

barbaramilligansblog — Mon, 29 Mar 2010 19:49:47 +0000

The Benefits of Slicing Images by Jim Babbage gives you the main advantages of slicing when you have an image and text that are combined.

Exportng CSS and images in Fireworks CS4 by John Wylie helps you to understand the rules of placing and sizing your design objects.

Greeking Generator generates a dummy text and you can set how many paragraphs, words, bytes and lists that you want.

Fireworks CS4:

Photoshop CS4:

Chapter 5 Imagery

The placement and the direction of an image can give the page movement and help the eye to move in the direction that is desired.

Choosing the right image ask yourself:

What is relevant to the page?
What makes the image interesting to look at and something that the viewer will want to investigate?
How are the target audience and want is appealing to them?

Where to get the images you need?

Produce them yourself
Free Images: restriction-free means that you can use them for most of personal or commercial uses. Stock.XCHNG is a good site to look for free images.
Stock photography: Royalty-free images means that there is a one time fee for an image that you can use over and over again. Rights-managed images means that you have more control over the use of the image so that no one else will have that same image at the same time that you are using it.
Professional Photographer: before you hire someone to take the pictures for you get references. If that does not work than the is a site called Advertising Photographer of America

Image sources that you should avoid:

Google Ganking is where you save an image off of the internet and edit for your own needs.
Hostlinking is where you used the URL link of another website.
Clipart can look cheesy and generic it does not look professional.

CSS borders:

Has three properties border-width, border-style, and border-color.
There are eight styles of borders to choose from doted, dashed, solid. double, groove, ridge, in se and outset and they could be set as none and hidden.
Drop shadows to make an image stand out.

Portfolio Design Comps

barbaramilligansblog — Sun, 28 Mar 2010 11:58:52 +0000

Week 9

barbaramilligansblog — Mon, 15 Mar 2010 21:39:15 +0000

The Complete Design Process >> is a video on how you can use different Adobe products to build your website.

IL: Site maps and Flow diagrams
Fw: Wire faming, storyboards and proto typing
Ps: Visional design
ID: Documentation

The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.

Common Mistakes Print Designers Make On The Web >>

Designing with a Grid-Based Approach:

This website is about using grids for designing websites. It also has useful references, tutorials and tools that was used in creating this site. Grid-based designs can help making your site visually strong and structurally balanced.

Dao of Web Design – a timeless article from A List Apart: This site is about how the web is flexible and some steps to take in to unsure that the pages that are produced will be accessible to all.

Blasting the Myth of Above the Fold – by Milissa Tarquini :

The “fold” means the line beyond which a user must scroll to see more contents of a page and also referred to as a “scroll-line.”

Five Principles to Design By… :

The five principles are not let technology take over humans, good design is something that works will, the user owns the experience, great design is often invisible and don’t transferred complexity to users…only simplicity

Week 8

barbaramilligansblog — Tue, 09 Mar 2010 20:27:57 +0000

Difference between ID and Class http://css-tricks.com/the-difference-between-id-and-class/

With IDs each element can have only one ID and each page can have only one element with that ID
With Classes you can use the same class on multiple elements and multiple classes on the same element.

CSS Typograph http://www.digital-web.com/articles/css_typography/

There are nine save font families that are commonly used Arial, Arial Black, Comic Sans Ms, Courier New, Georgia, Impact, Time New Roman, Trebuchet Ms and Verdana. You will need more than one font incase the user does not have the font that you have choose. The declaration for this is:

font-family: ‘Calisto MT’, Georgia, ‘Times New Roman’, serif;

If you want specific font you could rely on images to display your text.

sIFR (Scalable Inman Flash Replacement):

It allows you to apply any choose of font to the headings by using Flash and JavaScript
To down load the latest version visit

Mike Davidson’s sIFR Pages http://www.mikeindustries.com/sifr/

Mark Wubbin’s sIFR Wiki http://wiki.novemberborn.net/sifr/

Text Spacing:

Horizontal

Kerning is the adjustment of the space in between the individual letters

To make a letter-by-letter adjustment use the CSS property (letter-spacing)

Tracking is the adjustment of the space is between letterforms

word-spacing is the CSS property

Vertical

Leading is the vertical space between the line, the CSS property is( line-height: 1.5em; )

em is the CSS measurement of the hole letter, from the cap height to the lowest descender. If you have 1.2 ems = 12 pixels and 3.5ems=35 pixels

Text Alignment:

CSS property for justify (text-alignment and set it to justify)

Avoid using justified text in narrow spaces

You can also use left, right or center for the CSS property text-alignment

To see what text will look like in CSS with different leading, tracking and alignment go to: http://typetester.maratz.com

Fixed-width Fonts:

To display a fix-width font in CSS wrap it with

tags. pre is short for preformed text, also you can use the

 tags to preserves tab, spaces and line breaks. This will only work if it is within a box of preformatted text. If you want tags are in your code you will need you replace any s with >

Free and Shareware Font Galleries:

1001 Fonts http://www.1001fonts.com/

DaFont http://wwwdafont.com/

Wanted Fonts http://www.wantedfonts.com/

Choosing the right fond: The first thing to do is define the target audience and the feeling you are trying to evoke.

Special Character:

There is a website that will show a complete list of codes to be able to place the special character in our HTML documents. http://www.w3schools.com/HTML/html_entities.asp

Creating the Home Page:

Keep the home page simple use limited text. Have a singular message that’s conveyed in large type. Also have links to the most important features. San serif fonts in small body text is more readable.

Lynda.com Notes

The structural elements that are needed to be on a homepage are the Page Title, Header, Content and Footer. When designing the home page member to think about what is important, what is structural, how will the layout invite the user, to be able to see and to understand the content and the features.

The features of a home page should always have a

Site Identifier is usually on the top left (Logos, text, and/or branding)

Sitewide Utilities is usually on the top right (shopping cart, search engine and/or password)

Primary Navigation is usually right under the Site Identifier and Untilities(use only 5 or 6 buttons on home page)

Second Navigation is in a sidebar and is usually under the Primary Navigation (new info, items, features, and updates)

Main Section Title (distinct and easy to read)

Embedded Links can be it the content(gives access to other parts of the site)

Body Text (content can be text or images)

Subsection Title is to divide into smaller groups so the use can navigate easily

Legal / Contact / Date

The Three Passes:

First pass, gradual perception: We see colors, shapes, main areas

Second pass: We start really understanding what each of those areas may be

Third pass: We actually pick an area to read deeply

Week 7

barbaramilligansblog — Fri, 05 Mar 2010 18:33:52 +0000

The read for this week was:

Search Engine Placement Tips – by Danny Sullivan

8 Web Design Tactics to Help You When You’re Stuck-

HTML Tips and Tricks, How-To, and Beyond:

http://www.tips-tricks.com/k_gifanimation.asp

Optimizing Animated GIFs:

http://www.webreference.com/dev/gifanim/

12 Rules for choosing the right domain name:

http://www.seomoz.org/blog/how-to-choose-the-right-domain-name

Everything you need to succeed online:

http://www.networksolutions.com/

Websites on designing for Search Engines:

Search Engine Watch: http://www.searchenginewatch.com

Free SEO Tools: http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/

Search Engine Optimization: http://www.seomoz.org/

Search Engine Roundtable: http://www.seroundtable.com/archives/014550.html

Domain name registrats:

GoDaddy – http://www.godaddy.com

Register – http://www.register.com

Network Solutions – http://www.netsol.com

For a full list of acredited registrars, visit ICANN.

//

Week 6

barbaramilligansblog — Wed, 24 Feb 2010 23:46:23 +0000

Block Elements: Is a tag that sets itself apart with a hard retune above and below, for an example paragraph tags.

Style Rules: Tags and elements are instructions for the CSS

Elements are defined of the page by the rule i.e., tags, classes, IDs

Selector Declarations is another name for CSS Rules

Example of a selector declaration:

H1{ color: red;} (h1) is the selector, { color: red;} is the declaration, the word( color) is the property and the word (red) is the value.

Separate multiple declarations with semi-colons

Created a CSS file that linked to the regional html resume:

Created a horizon tiled background for the revised banner:

Page Properties>Appearance (CSS) set all margins to zero, in Background image navigate to the image you desire, under the Repeat dropdown arrow select (repeat-x)

Dreamweaver article, Usability: The key to good website design, by Matt Brown: http://www.adobe.com/devnet/dreamweaver/articles/dwmx_design_tips.html

Breadcrumb Navigation Increasingly Useful, by Jakob Nielsen: http://www.useit.com/alertbox/breadcrumbs.html

Fresh vs. Familar: How Aggreeively to Redesign, by Jakob Nielsen: http://www.useit.com/alertbox/familiar-design.html

Final Project Proposals

barbaramilligansblog — Sat, 20 Feb 2010 15:21:35 +0000

Proposal 1:

I currently have a generic portfolio on wordpress.com but I would like to build one that shows my personality and creativity. I do have all my current digital content and I would like to have the site that shows not just my graphic design and photography work but also some of my sculptures.

Proposal 2:

Artistic Design Group Inc. is where I currently have an intern. My supervisor has mentioned that she is thinking about changing the current website for her business. Since she already has a website up I could get all information, photos, and contend from that site.