BarbaraMilligan'sBlog

Just another WordPress.com weblog

Week 15

Posted by barbaramilligansblog on May 10, 2010

Posted in Uncategorized | Leave a Comment »

Week 13

Posted by barbaramilligansblog on April 24, 2010

Posted in Uncategorized | Leave a Comment »

Week 11

Posted by barbaramilligansblog on April 11, 2010

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

Posted in Uncategorized | Leave a Comment »

Week 10

Posted by barbaramilligansblog on March 29, 2010

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.

Posted in Uncategorized | Leave a Comment »

Portfolio Design Comps

Posted by barbaramilligansblog on March 28, 2010

Posted in Uncategorized | Leave a Comment »

Week 9

Posted by barbaramilligansblog on March 15, 2010

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

    Posted in Uncategorized | Leave a Comment »

    Week 8

    Posted by barbaramilligansblog on March 9, 2010

    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 <pre></pre> tags. pre is short for preformed text, also you can use the <pre> 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 &lt; and any >s with &gt;

    Free and Shareware Font Galleries:

    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

    Posted in Uncategorized | Leave a Comment »

    Week 7

    Posted by barbaramilligansblog on March 5, 2010

     The read for this week was:

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

    Optimizing Animated GIFs:

    12 Rules for choosing the right domain name:

    Everything you need to succeed online:

    Websites on designing for Search Engines:

    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.

    //

    Posted in Uncategorized | Leave a Comment »

    Week 6

    Posted by barbaramilligansblog on February 24, 2010

    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:

    • <LINK href=”style.css” rel=”stylesheet” type=”text/css”>

    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

    Posted in Uncategorized | Leave a Comment »

    Final Project Proposals

    Posted by barbaramilligansblog on February 20, 2010

    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.

    Posted in Uncategorized | Leave a Comment »