New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here

Web Media Design Exam 2 study guide

by: Danielle Porter

Web Media Design Exam 2 study guide COMM 2040

Danielle Porter
GPA 3.0

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

These notes cover what's going to be on our upcoming exam (October 11 or 12).
Web Media Design
Dr. Barth Cox
Study Guide
web, Media, Design
50 ?




Popular in Web Media Design

Popular in Journalism and Mass Communications

This 17 page Study Guide was uploaded by Danielle Porter on Thursday October 6, 2016. The Study Guide belongs to COMM 2040 at University of Louisiana at Monroe taught by Dr. Barth Cox in Fall 2016. Since its upload, it has received 15 views. For similar materials see Web Media Design in Journalism and Mass Communications at University of Louisiana at Monroe.

Similar to COMM 2040 at ULM

Popular in Journalism and Mass Communications


Reviews for Web Media Design Exam 2 study guide


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 10/06/16
October 4, 2016 Web Media Design Exam 2 Study Guide Web Design, Introductory Chapter 3 The Website Development Process A website plan or a design plan is a solid detailed plan for the website. [Chapter 3] Step 1: Identify the Website’s purpose and target audience Step 2: Determine the Website’s General Content Step 3: Select the Website’s Structure [Chapter 4] Step 4: Specify the Website’s Navigation System Step 5: Design the Look and Feel of the Website Step 6: Test, Publish, and Maintain the Website [Step 1] Define the Website’s Purpose and Audience Goals are the results you want your website to accomplish within a specific timeframe. Objectives are methods you choose to accomplish the website’s goals. A site’s target audience is the type of visitors to whom a website’s content is directed. A site’s purpose statement is a formal written statement explaining a website’s overall goals and the specific objectives designed to accomplish those goals. Website Goals Although a website has a primary goal, it might have additional secondary goals. Example:  Primary Goal: o Increasing sales of products  Secondary Goals o Promoting awareness of the company and its products and mission, and build a community of engaged and potential customers o Establishing the company’s credibility in the field of (insert specific industry) o Informing shareholders and potential investors of business developments and plans October 4, 2016 o Encouraging visitors to return to the website by providing updated information in the form of a blog with articles by industry experts Website Objectives A call-to-action is a suggestion or offer that requires the website visitor to interact with the website. Target Audience Profile A Target Audience Profile is a research-based overview that includes information about potential website visitors’ demographic and psychographic characteristics. Demographic characteristics:  Gender  Age group (ex. 18-34)  Educational level  Income  Location Psychographic characteristics:  Social group affiliations  Lifestyle choices  Purchasing preferences  Political affiliation Target Audience Wants, Needs, and Expectations A needs assessment is an evaluation of a website target audience’s wants, needs, and evaluations. Website Purpose Statement After determining your website’s goals, objectives, and audience, you should create a purpose statement. [Step 2] Determine the Website’s General Content Home, Underlying, and Landing Pages A website’s primary page is the home page. The search feature is a text box into which users enter a search term. Underlying pages provide details to the summary information shown on the website’s home page. Landing pages appear when a visitor reaches a website by clicking a link, advertisement, or search result. Value-Added Content Value-added content is information that is relevant, informative, and timely; accurate and of high quality; and usable. Repurposing, or modifying, content frequently involves: October 4, 2016  Abbreviation  Rewriting text  Adding hyperlinks to background or additional information  Rescanning or altering photos  Creating an infographic  Editing or segmenting audio and video Text See chapter 2 Images are files including graphic elements such as clip art, illustrations, infographics, diagrams, and photographs. Images are the most commonly used content element on webpages, after text. Audio and Video Websites often use animated images to attract attention and enliven webpages. A popular format is the animated GIF, which adds movement to otherwise static images. Flash animation is an animated movie created using Adobe Flash software. Multimedia is any combination of text, images, animation, audio, or video. Interactive multimedia is a multimedia element with which a visitor interacts. Dynamically Generated Content Dynamically generated content is webpage content that automatically updates periodically or appears when triggered by a specific event. A database is a file that stores data. Database-driven websites are websites that use databases to generate dynamic content. October 4, 2016 Web Design, Introductory Chapter 4 Page length, content placement, usability The scroll zone is the area beyond the initial visible screen. Be careful when positioning visual identity content (logo, names, and important links) about and to the left of potential lines or scroll zone. One way to maximize the initial visual content-and prevent webpage scrolling- is to insert carousels or slideshows. Underlying pages provide greater detail in support of a specific topic or website feature and might not lend themselves to a single page or text. When necessary to extend webpage content beyond a single visible screen, consider limiting the page length to two (2) screens of content. Eye-tracking studies use various technologies to produce heat maps representing data using color. Heat maps analyze the movement of a visitor’s eyes as he or she visits a webpage. A fixed-width page layout sets a specific pixel width for the page. The layout screen is consistent regardless of resolution. A liquid or flexible page layout sets the width of the page as a percentage of the browser window. The page expands to fill the entire window. A hybrid page layout uses a combination of fixed-width and liquid page layouts and takes responsive web design (RWD) techniques into consideration. [Step 4]Specify the website’s navigation system User-based vs User-controlled navigation A User-based navigation system provides a linking relationship between pages based on the website visitors’ needs rather than the publisher’s needs. A user-controlled navigation system provides a variety of ways visitors can move around a website beyond the major links from the home page and allows visitors to move around a website in a manner they choose. Link types Text links are hyperlinks based on a word or words in an HTML document. Text links should clearly identify its target- a webpage or content to which the link points. A rollover or mouse-over link is a hidden link revealed when the pointer hovers over it. October 4, 2016 Image links assign a link to a visual element, such as an illustration or photograph. An image map is the common use of an image link. Image maps, or clickable maps, are images that contain hot spots- areas on the image to which a link is assigned. A client-side image map is where the hot spot link information resides in the HTML coding of the page, and the browser processes the code to display the image map. In a server-side image map, the x- and y- coordinates of the clicked hotspot report back to the server, where a script processes the hotspot link information and returns the link’s target page. Server-side image maps:  Are more complicated to create  Increase demands on a server  Typically have slower response times than client-side image maps Navigation Areas A navigation menu is a list of related links that might contain multiple levels of links displayed as pop-out menus. A navigation bar generally uses graphic buttons to present links pointing to some navigation bar buttons displaying drop-down menus. Navigation tabs present links as small tabs and work best when linking to alternative views of the content. -------- The breadcrumb trail is a hierarchical outline or list that shows a visitor the path he or she has taken from the homepage to the currently viewed page. The breadcrumb trail provides a visitor with a visual understanding of the linking relationship between pages, but does not replace navigation elements. -------- Websites with a large number of pages and complex structures often provide a website map or index. A website map is a summary page of links to major pages at the website. Search capability The website search feature is a popular navigation tool for websites with a large number of pages. A hosted website search provider is a third-party company that uses spiders or other tools to build a searchable index of your website’s pages and then hosts the index on their servers. AutoComplete is a technology that provides suggestions to website visitors by searching through the website contents to find matches as the visitor enters the keywords in the search box. October 4, 2016 [Step 5] Design the Layout and Feel of the Website Visual consistency is created by repeating design features across all pages at a website, including:  Typeface  Content position  Color scheme  Company or website name, logo, and major links Color and visual contrast How to create visual consistency using color and visual contrast:  Apply the same color scheme to the background, visual elements, and text for all webpages to build visual consistency throughout your website.  Choose background and text colors that provide sufficient contrast to enhance readability and that permit print legibility.  One way to select an appropriate color scheme and apply it across all pages is to use a template. o Using templates with a predefined color scheme can help ensure visual consistence among all pages at your website.  Another way to choose an effective color scheme is to use an inexpensive color-matching software, such as Color Scheme Designer, Color Wheel Pro, ColorShade, or ColorCache. o Color-matching software and color-matching websites contain tools you can use to create sample website color schemes based on color theory, preview the color schemes in a browser, and then apply the colors in the selected scheme to your webpages. CSS and Formatting Style sheets are CSS specifications to create text documents. Style-group of formatting properties, such as bold, italic, font type, font size, or font color, applied as a group to selected text Style rules are specifications that define one or more formatting properties (declarations) and their values for specific HTML tags (selectors). You can add style rules in 3 ways:  As an inline style inserted within the <h1> HTML tag on a page  As part of an internal style sheet inserted within a page’s HTML heading tags  As part of an external style sheet saved in the folder with the website’s pages and linked to them with an HTML tag CSS editor software is software used to create style sheets.  Rapid CSS editor and JustStyle CSS Editor are two examples of CSS editor software. October 4, 2016 Page Layout Page Layout is the arrangement of content elements that ensures visual consistency across your website’s pages. Layout grids are underlying structures of rows and columns to position content on a page. CSS and Page Layout The <div> tag within a page’s code specifies a section identified by the style sheet. The content tags are between each <div></div> style pair. Tables Tables are the arrangement of columns of rows. Data appears in cells which are the intersection of a table column and a row. Web designers might use an HTML in the same way as a table in a word document or spreadsheet as a data table that organizes content. [Step 6] Test, Publish, and Maintain the Website A usability test evaluates how easy or hard it is to use a site’s navigation system and other features. Site Plan Checklist [Chapters 3 & 4] [Chapter 3] Step 1: Identify the Website’s purpose and target audience Step 2: Determine the Website’s General Content Step 3: Select the Website’s Structure [Chapter 4] Step 4: Specify the Website’s Navigation System Step 5: Design the Look and Feel of the Website Step 6: Test, Publish, and Maintain the Website October 4, 2016 Principles of Beautiful Web Design- Chapter 1 The process of designing a website falls somewhere between bridge building and sculpture. A comp is an image of a layout that’s created before beginning to prototype the layout in HTML. The process of creating a design comp can be boiled down to discovery, exploration, and implementation. Discovery  Meeting clients and learning what they do o Spend time researching their business  Try to learn as much as you can about their industry before the first meeting Exploration  Exploration is the beginning of a process known as information architecture (IA).  Focuses on organizing the content and flow of the website into a structure to design around Implementation  Two main standpoints people determine whether a website design is “good” or “bad”: 1. Strict usability angle:  Focuses on functionality, effective presentation of information, and efficiency 2. Purely aesthetic perspective:  Artistic value and visual appeal of design The elements of functionality of a finished website design should work as a single cohesive unit, so that:  Users are pleased by the design, but drawn to the content  Users can move about easily via intuitive navigation  Users recognize each page as belonging to the site Web Page Anatomy  Containing block/container o Every webpage has it o Could be in the form of a page’s body tag, an all containing div tag.  Logo/identity block o Should contain the company’s logo or name and sit at the top of the page o Increases brand recognition while informing users that the pages they’re viewing are part of a single site o Essential that it’s easy to use o All main navigation items should appear as “above the fold” October 4, 2016  fold- area where the content of a page ends before users scroll down A browser chrome is the space taken up by the browser application itself in the form of tabs, buttons, address bar, and bottom status bar.  Content o Keep the main content block as the focal point of a design so visitors can scan the page for the information they need  Footer o Contains copyright, contact, and legal information as well as a few link to main sections of the site o Should indicate to users they’re at the bottom of the page  Whitespace/negative space o Any area of page w/o type or illustrations o Helps design to breathe by guiding the user’s eye around a page, but also helps to create balance and unity Grid Theory Many historians credit Dutch painter Piet Mondrian as the gather of graphic design for his sophisticated use of grids. Using grids is about proportion. Pythagoras and followers established mathematical ideas which extended the concept of composition. Pythagoreans observed a mathematical pattern that occurred so often in nature, they believed it to be divinely inspired. Pythagoreans referred to this pattern as the golden ratio. 100 cm/ 1.62= 61.73 cm Rule of Thirds  Simplified version of golden ratio  Dividing a composition into thirds is an easy way to apply divine proportion without a calculator. 960 Grid System  CSS framework  Inspired by articles from web designers Khoi Vinh and Mark Boulton Balance  Occurs when elements of a layout have weight Symmetrical Balance/ formal balance  Occurs when elements of a composition are the same on either side of an axis line o Horizontal symmetry can be applied to website layouts by centering content or balancing it between columns o Bilateral symmetry –composition on more than one axis October 4, 2016 o Radial symmetry- elements are equally spaced around a central point Asymmetrical Balance/ informal balance  More abstract  Involves objects of differing size, shape, tone, or placement  Objects are arranged so, despite differences, equalize the weight of the page  Used more often on the web; versatile Unity  The way different elements of a composition interact with one another Proximity  Way to make a group of objects feel like a single unit Repetition  Repetition of colors, shapes, and textures of similar objects helps to tie a webpage design together so it feels like a cohesive unit Emphasis/Dominance  Making a particular feature draw the viewer’s attention  When designing a web page layout, you’ll often identify an item in the content, or layout itself, you want to stand out  One such method is making that element into a focal point- any element on a page that draws the viewer’s eye Methods of achieving a focal point:  Placement  Continuance/flow- o Eyes move in one direction until more dominant features come along  Isolation o Promotes emphasis  Contrast o Defined as the juxtaposition of dissimilar graphics elements o Most common method used to create emphasis o Greater the difference between a graphic element and its settings, the more that element will stand out  Proportion o Principle of design that deals with differences in the scale of objects Bread and butter layouts  Left-column navigation o Navigation block is at the top-left of page; right column is wide  Right-column navigation o Content to the left; navigation to right  Three-column navigation o wide column between two diminutive navigational columns October 4, 2016 Finding Inspiration  Find sites with CSS galleries Using a Morgue File A morgue file is a folder of anything that inspires you when making a webpage. Fresh Trends  Navigation-less Magazine style  Expansive Footers  Bare-bones minimalism o Reducing design down to most essential elements Resizing: Fixed, Fluid, or Responsive Layouts  Fixed width o Wrapped with a div given a pixel-based width and centered with the body tag using margin:0 auto; o If browser window is wider than 960 pixels, body element’s background is seen to left and right of container  If narrower, you’ll have a horizontal scroll bar  Fluid/liquid width o Designed with percentage-based widths, so container stretches when you resize browser window. o Idea is to show user as much content (horizontally) will fit on their screen o Mixed with percentage-based columns (sometimes) o Takes advantage of minimum/maximum width Responsive Layouts- Alternative  Flexible, grid-based layout  Flexible images and media  Media queries Based on an Ethan Marcotte article Screen Resolution  Assumption that desktop browsers display at least 1024x768 px  960 px has become the standard width for most web design projects  Struggle to optimize webpages and sites for outdated, inept browsers and mobile devices. October 4, 2016 Adobe Muse: Classroom in a Book Chapter 1 An Introduction to Adobe Muse Designing a website using responsive web design (RWD) means the layout changes based on the sized, orientation, and even capabilities of the device you’re using to view the site. Responsive Web Design (RWD) Responsive web design takes the same content (text, images, & video) and using web technologies such as CSS, HTML, and JavaScript alters that layout so it works on any screen size. RWD allows you to provide an optimal viewing and interaction experience for your site across a wide range of devices. In Adobe Muse, you can easily create a design that works across a range of device sizes without having to touch code. An example Muse web workflow A typical Muse workflow concept to published website: 1. Create a site concept. 2. Create a Muse site file. 3. Plan your site (plan and organize pages). 4. Wireframe your concept (optional). 5. Design your pages. 6. Preview and test your pages. 7. Publish your site. Web design vs. print design When defining colors in print, you choose from CYMK (cyan, magenta, yellow, and black) or Pantone (spot) colors. When designing for the web, in Muse, you define colors using the colors RGB (red, green, and blue). Understanding Modes Plan mode Design Mode Preview Mode October 4, 2016 Adobe Muse: Classroom in a Book Chapter 2 Creating Your Site Editing the site properties Editing the site in Plan Mode Adding, deleting, and arranging pages in your site Muse uses the name that appears beneath each page thumbnail in the site map as the page’s title at the top of the browser window. Adding Child Pages 1. Hover the pointer over the CONTACT page thumbnail and click the (+) sign beneath it. 2. Select the default name of the new child page and change it. Adding Page metadata Metadata is a way for you to provide search engines with information about your site. Search Image Optimization (SEO) - the process of trying to improve the visibility of a website in search engines in unpaid search results. October 4, 2016 Adobe Muse: Classroom in a Book Chapter 3 Working with Master Pages When you first create a site in Muse, the site has one page as well as a single master page called A-Master. Master pages contain repeating design elements, like a logo and navigation, which are automatically applied to other pages. Content on a master page is locked on the pages in the site and can only be selected within the master page itself. Editing master page properties Setting page properties on a master page can save time because it lets you set properties across multiple pages simultaneously instead of editing them page by page. Editing the master page guides Individual pages in your Muse website may have varying heights based on the unique content on each page, but all can feature the same header and footer regions.  Top of page: defines padding above the page and is the same as the padding top setting in the page of site properties  Header guide: defines the bottom of the header area  Margin guides: defines an area of the page that can be used to keep content like text away from the browser window so it’s more readable  Column guides: divides the page area into columns of content  Gutter: specifies the distance between columns  Page area: indicates where you can add the unique content for each page  Footer guide: defines the top of the footer page  Bottom of page: defines the minimum page height  Bottom of browser: defines padding below the page and is the same as the padding bottom setting in the page or site properties Editing the appearance of the browser and page When you design for the web, you must consider not only the page design and content, but also the area behind and around the page area, called the browser fill in Muse. Setting the browser fill appearance The selection indicator indicates that the page is selected and that most of the formatting options you change in the control panel will affect the appearance of the page area. The Internal-Master is a new (secondary) master page. October 4, 2016 Applying master pages When you apply a new master page, either a black master or duplicating an existing master page, that new master page isn’t applied to any of the pages in your site map. You can apply master pages to any number of pages and have a unique master page for each page. Basing one master page on another In Adobe Muse, you can apply one master page to another so shared elements can be displayed in multiple master pages. Using layers In Adobe Muse, each new object is stacked on top of the previous object in a stacking order. The first object you create on the page is on the bottom of that stack. Each new Muse site starts with one default layer called Layer 1, which all content is placed on. The content is shared across all pages and layouts. Creating Layers 1. Plan > Home mater page thumbnail 2. Window > Layers 3. Double-click Layer 1 in Layers panel and change the name to Page. 4. Click the New Layer button on the bottom of the layers panel to add a new layer called “Layer 2”. 5. Double-click “Layer 2” in the Layers panel then change in dialog box: a. Name: Header b. Color: Red (default) c. Show Layer: Selected (default) d. Lock layer: Deselected (default) 6. Click OK 7. Click the New Layer button at the bottom of the layers panel to add “Layer 3” 8. Double-click “Layer 3” and change name to Footer and click OK 9. Choose file> save site Organizing layers and content “Pinning content”- putting layers at a specific spot. 1. In the Layers panel, drag the Footer layer beneath the Page layer. When a line appears beneath the Page layer, release the mouse button. 2. With the selection tool selected, click the log in the header to select it. 3. Click the disclosure triangle (small arrow) to the left of the Page layer name in the layers panel to show the contents of that layer. 4. Click the disclosure triangle to the left of the Page layer name to hide the layer content. Move any logos to the Header layer. 5. With the logo still selected on the page, drag the small blue square to the right of the page layer name straight up to the empty square on the Header layer 6. Click the eye icon to the left of the Header layer name in the layer panel to hide the logo temporarily October 4, 2016 7. In the Layers panel, click the now blank area where the eye icon was to show the Header layer. 8. Choose File >Save Site October 4, 2016 Adding a navigation menu Inserting a menu widget Excluding widgets from the menu Editing the menu widget options Formatting the menu text Editing the appearance of the menu widget and items You can change the look of your menu by changing appearance settings. Editing the appearance of the submenu -Web edition exclusive- Testing your pages 1. Choose file > save site 2. Choose file > preview site in browser 3. Close the browser window, and return to Muse 4. Close all open pages, and make sure that Plan mode is displayed for the next lesson.


Buy Material

Are you sure you want to buy this material for

50 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Jim McGreen Ohio University

"Knowing I can count on the Elite Notetaker in my class allows me to focus on what the professor is saying instead of just scribbling notes the whole time and falling behind."

Allison Fischer University of Alabama

"I signed up to be an Elite Notetaker with 2 of my sorority sisters this semester. We just posted our notes weekly and were each making over $600 per month. I LOVE StudySoup!"

Steve Martinelli UC Los Angeles

"There's no way I would have passed my Organic Chemistry class this semester without the notes and study guides I got from StudySoup."


"Their 'Elite Notetakers' are making over $1,200/month in sales by creating high quality content that helps their classmates in a time of need."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.