Planning Site Design and Page Layout

Identify Best Practices

• Demonstrate Consistency:– One way to ensure a professional look and feel to

a website– Using same layout on all pages– Placing navigation buttons or menus in the same

place– Using same colors and fonts on every page

Useful Consistency Techniques

• Using Templates:– master page that you can create and then reuse to

maintain a consistent layout or style

• Reusing assets such as Library Objects– reusable assets that are maintained in the assets

panel in the Library category; more efficient

• Using Cascading Style Sheets:– Method of creating customized styles, such as

fonts, colors, alignment and spacing

Benefits of Consistency

• A consistent design between pages improves the usability and accessibility for the user

• A consistent layout makes information easier to find throughout the site

• Consistent navigation will also improve the user’s experience and encourage them to explore the site

Benefits of CSS Style

• Sheets are able to be shared between web pages as a way to create a consistent design or layout

• Make it easier to maintain a website• More accessible to every browser• Helps your page download faster

CSS Best Practices

• Create the web page first, then apply styles with the CSS

• Use an external style sheet • Avoid use of inline styles

Features Used to Maintain Page Structure

• Headings• Use of font styles and sizes• Color schemes• Size and placement of photos• Use of design elements such as bullets• Use of indentation to organize content

Fixed Layout

• Sets values in pixels for any columns and the overall width

• Centered in the browser window• Will not change and may result in horizontal

scrolling

Liquid Layout

• Sets the values using percentages for any columns and the overall width

• Percentage is determined by the user’s browser window

Tables• Another way to control the placement of text and

images• Controls the length of a text line and whether or

not text wraps• Fixed: table or cell width is set with pixels• Flexible: table or cell width is set with percentages• Also an option not to allow text to wrap– When this option is selected the cell will expand to

accommodate the length of the text

Div element

• Allows you to place an item anywhere on a web page

• May also be layered on one another

Printing• You can create a separate CSS to handle how

a web page will print• However, users have some control over how

they choose to print what they are viewing

Printing

• You can change the font used for printing to make the printed document more readable– Sans serif looks better on a monitor; serif looks

better on a printed page

• You can also choose to eliminate some of the content from the printed page, such as navigation elements and advertisements

• There are a variety of operating systems and web browsers available for those using the Internet

• Operating systems may include: Windows, Mac and Linux

• Web browsers may include: Microsoft Internet Explorer, Apple Safari, Google Chrome and Mozilla Firefox

Fonts

• Some fonts are not available on all operating systems

• The font may not appear as originally intended

• Dreamweaver provides a font family that includes a list of related fonts, that will work on both the Windows and Mac operating systems

Colors

• May not be displayed correctly because of a browser or a monitor

• Use browser safe colors also known as web safe colors– 216 web safe colors– Built into Dreamweaver

Margins, table borders & padding

• May be displayed differently from browser to browser

• Set margins and padding to a value– Do not leave blank

• Colors in table borders or cells should include the # sign before the hexadecimal value when naming.– Some browsers will not recognize a color if the #

sign is missing

Horizontal Rule

• A line that can be customized on a web page– Color, height, length and alignment

• To ensure a <hr> will be displayed correctly in all browsers it is important to use CSS rather than HTML

BrowserLab

• Component of Adobe CS Live online services• Subscription based• Previews a web page across multiple browsers

and operating systems to test the compatibility of your design

• Eliminates the need to have various browsers installed on your computer

(3) Design Elements

• Line: – The basic component of a shape

• Shapes: – A line that defines or implies a boundary

• Texture: – A fill used in shapes to imply what an object may

feel like

(12) Design Principles

• Emphasis:– Making a specific element stand out

• Movement:– Directing the eye in a certain direction

• Balance:– The page is laid out in a planned and coherent

visual pattern

(12) Design Principles

• Symmetry:– When the composition of the text and graphics is

evenly distributed around a center point

• Color Theory:– The idea that color can affect human thoughts and

emotions

• White Space:– Areas of the page that do not have text or

graphics

(12) Design Principles

• Contrast:– Similar to emphasis, it separates elements by

comparing or creating differences

• Rule of Thirds:– The theory that the most interesting components

of a composition, like a web page, is found off-center

• Proximity:– The closeness or distance from text and graphics

(12) Design Principles

• Unity:– Creating a feeling of wholeness

• Alignment:– The spacing of text and graphics in relation to one

another or the margins on a page

• Repetition:– Repeating an element to create visual consistency

Improving Website Usability• Helps to encourage visitors to stay at your

website once they arrive• Items to consider when creating a website

with successful usability:– Page loading time, ease of finding information,

consistent and global navigation, consitent layout throughout the site, alternative text placed on images, use of headings, varying text size and color, use of tables to organize information, placement of important info relative to scrolling

Text-Formatting Guidelines

• Style text with CSS rather that representing text as an image

• Control the formatting and positioning of text with CSS

• Use tables to control the layout of web pages

Flowchart

• A visual way to outline your website• Identifies each of the primary pages,

secondary pages, etc.

Wireframe

• Shows the layout for each page• Skeletal layout of the design• Provides a general idea of where the web

page elements will be located

Storyboard

• Uses the information from the flowchart and the wireframe to provide details for each page in the web site

• Breaks down the plans for the site into manageable pieces

• Shows how each page will be organized with headings, content, links, graphics, and the name of the page

Project Manager

• Oversees the communication process and helps keep individuals on task and on time

Planning

• Planning for potential issues ahead of time is one way to prevent them from occurring.

Possible Problems

• Slow response during client review and feedback• Unclear roles and responsibilities• Client changes project requirements after the

project has started OR adds new requirements• Poor communication between team members• Poor communication with the client• Poor work quality from team members

Scope Creep

• A problem that arises in the development process

• Changes in the requirements of the project as the project is being constructed

• Often arises in the later stages of the project; therefore, allow for extra time in the building and testing phases