2.00 Apply procedures to planning site design and page layout using Dreamweaver. (20%)

Research in a Digital Media Environment Once a designer and client have discussed and established the target audience, purpose, and goals of a project, the next step for the designer is to conduct research to prepare for creation. View a collection of similar projects for ideas and inspiration. Research possible copyright or trademark issues associated with the nature of the project. Find assets (pictures, audio, video, etc.) needed to create the project.

Communication in a Digital Media Environment Establishing an effective line of communication and using active listening techniques will help ensure the project best meets the needs of the client. What message does this person’s body language convey to the client? What specific details led you to this conclusion?

Active Listening A communication technique that takes place when the listener restates or paraphrases what they have heard in their own words. The listener confirms to the speaker that what has been said was acknowledged and understood. “Let’s see if I am clear on this…” “So, it sounds to me as if…” “This seems really important to you.” “I’m sensing that you are feeling that…”

Collaboration in a Digital Media Environment Collaboration is the action of working with someone to produce or create something. Using technology to assist the collaboration between the designer and client will result in a more efficient and effective workflow. Cloud storage allows a working document or project to be stored electronically and accessed by different parties simultaneously. Dropbox, GoogleDocs, iCloud, Box.net, etc.

Feedback Verbal or written responses containing information about a client’s reaction to a designer’s performance of a task. Feedback should be specific and offered during the construction of the project, as well as at the end. Performance feedback is used to shape the redesign process and improve the overall project. “It was effective when you decided to…” “The color scheme is a bit off from what we had discussed.”

Redesign The designer uses the provided feedback to make changes to the original project with the ultimate goal of meeting the client’s needs. This process could occur several times throughout the time span of a particular project.

Web Design Usability Usability, not the visual design, determine the success or failure of a website. If users can’t find content, it might as well not exist. Following web design conventions and principles will help build a website that is user friendly and accomplishes the purpose for which it is designed. Use GUI (graphical user interface) such as buttons and image maps to allow users to interact with the site and access information quickly.

Web Design Principles Purpose – Focus is on the needs of the users. Communication – Users want to locate content quickly. Use headings, bullets and concise text. Typography – Choose readable, web-friendly fonts and apply typography guidelines regarding spacing and size. Colors – Choose web-safe colors appropriate for the page. Contrasting text and background color makes reading easier. Use white space effectively.

Web Design Principles Images – Use high quality photos, infographics, videos and illustrations. Navigation – Follow three-click rule. Use consistent and logical navigation bar, buttons, and links. Page Layout – Use grid based content in columns, sections, or tables consistent across all pages. Keep aligned and balanced. Reading Pattern – Keep content at top and to left of page.

Web Design Principles Load Time – Don’t lose the user by forcing them to wait for content. Be careful of background images and optimize images and video for web use. Mobile Friendly – Make sure to consider mobile devices with smaller screen sizes when designing the site.

Pre-Production Meet with the client to create a project plan: Determine the purpose of the website. Define a target audience. Set overall goals of the web site. Agree on deadlines for phases of the project. Create a budget. Decide which web design language will best fit the needs of the website.

Pre-Production Choose a set of typography based on client’s current marketing and branding materials. A limited selection of fonts is available for web design, since downloaded fonts will not show properly on other users’ machines. Choose fonts that are more likely to have consistency across platforms and browsers.

Pre-Production Decide upon a color scheme that represents the client or company. In web design, web safe colors are noted by hexadecimal value (hex code). For Example: #496133 #1B6699 #3A3B76

Pre-Production Work with client to create a flowchart. Helps decide how many individual pages the website will contain and their titles. Organizes the structure and navigation between parent pages and child pages.

Pre-Production Gather and manage digital assets. Create a file-naming convention to assure proper organization and storage. Save and organize files for easy and quick access. In web design this is often done in the root folder. For web design, knowing a file’s pathname is very important. Links to a file on a website call on the pathname of the file, not the file itself User/Desktop/WebDesign/Assets/HomeBanner.jpg

Pre-Production Create the Wireframe (Skeleton) A visual guide to how web page content will be organized; assists in the arrangement and scaling of design components. Similar to storyboarding in animation or video.

Pre-Production Determine specific software needs: Visual Editor Design software that manipulates components of the web page without the user writing or editing code, WYSIWYG (What You See Is What You Get). Text Editor Simple text editing program used to write or edit web design code; does not show a visual component.

Production Create web page template. Set up formatting rules. Add content, graphics, text, and hyperlinks. Set up site navigation.

Post-Production Review design comps with client: Provide the client with multiple renditions of the website that meet the goals and purpose, but look visually different (layout, colors, etc.). Used for comparison purposes so the client can make a final decision. Different layouts could be used for different pages of the website (landing page, home page, contact page, etc.).

Post-Production Debug the source code Run the website’s code through a debug program to check for syntax or structure errors.

Post-Production Preview the final version Proofread the website for errors in text. Check the links to make sure they are all working. Check the website for compatibility with all browsers to ensure consistency.

Post-Production Publish the final website: Save all of the CSS and HTML files, images, and other assets (on the designer’s computer and/or on an external server if necessary). Publish the website to the Internet (through a website hosting site or through the client’s home server).