Nicolevenable's Blog

Image Files for Web –

– There are 2 mainstream file formats for the Web:

– JPEG = Joint photographic Experts Group

– GIF = Graphic Interchange Format

– PNG file format

– Less standardized, but is sometimes used

XHTML Structure –

– Block Level Elements

– hi (header tags) – most important heading

– Paragraph tags

– Unordered lists or ordered lists

– div tag (divided content)

– Inline Elements

– Strong tag

– em (Embed tag)

– img tag (creating links)

– span tag

– Consistent structure throughout your site is very important

In our book (The Principles of Beautiful Web Design) chapter one, it talks about layout and composition. The process of creating a design comp includes two things

– Discovery

– Implementation

Discovery – Finding out what the client does, and how they run their business. This helps you come up with an appropriate and effective design. Some good questions to ask are:

– What does the company do?

– What is your role in the company?

– Does the company have an existing logo or brand?

– What is your goal in developing a website?

– What info do you wish to provide online?

– What comprises your target audience? Do its members share any common demographics, like age, sex, or physical location?

– What are your competitors and do they have websites?

Implementation –

You should then start sketching out possibly layouts. You can then move onto Photoshop and create a simple mock up of the layout, messing with color schemes and things.

Defining good design –

Usability standpoint and aesthetic perspective are two main standpoints for defining good or bad design. The design should be about communication.

– Users should be pleased by the design but drawn to the content. The design should not be a hindrance; it should act as a conduit between the user and the information.

– Users can move about easily via intuitive navigation. The main navigation block should be clearly visible on the page.

– Users recognize each page as belonging to the site. A cohesive theme or style should exists across all the pages of a site.

Web Page anatomy –

– Containing Block, every web page has a container.

– Logo, It’s the identity.

– Navigation, essential the navigation system is easy to use and find. Users expect to see navigation at the top of the site, even if you have navigation on the right or left hand side as well.

– Content, content is king. Keep main content block the focal point of the website.

– Footer, at the bottom of page, contains copyright, contact and legal information.

– Whitespace, is every bit as important to the content on the page. Helps the design to breathe, so it isn’t cluttered. Creates balance and unity.

Grid theory –

– A grid is essential to graphic Designers. Used to make things square or lined up but also, helps proportion things.

Balance –

– Symmetrical Balance, otherwise known as formal balance, when the elements of a composition the same on either side of an axis line.

– Horizontal symmetry, centering content or balancing in between columns.

– Bilateral symmetry, composition is balanced on more than one axis

– Radial symmetry, elements are equally spaced around a central point.

For the web the best image is images with little file size but the best quality possible.

Dreamweaver CS4

Image Accessibility Preferences

– Images should have alternative text in order to meet accessibility guidelines

– Alterative text is added using the “alt” attribute of the <a> tag

– This text is often referred to as “Alt Text” or “Alt Tagging” your image.

– Text should be descriptive and short

– If the image is a link, or represents data, the text should give direction or information.

– Dreamweaver allows you to enter Alt text for an image in the Properties Inspector.

– Missing Alt text is the most common accessibility error