Web Design final exam review

From Knowledge Kitchen
Jump to navigation Jump to search


Format

  • open book/web
  • multiple choice
  • ~40 to 60 questions
  • Google Form

User Experience Design

  • Requirements Gathering
  • Site Maps
  • Wireframes
  • Prototypes
  • User Testing

Responsive design

Mobile devices generally have... (select all that apply)

  1. Slower internet connections than desktop devices
  2. Faster internet connections than desktop devices
  3. Smaller screens than desktop devices
  4. Larger screens than desktop devices

Which of the following design trends can trace their origin to the popularity of mobile devices? ... (select all that apply)

  1. Longer scrolling web pages
  2. Larger fonts on web pages
  3. Fewer links on web pages
  4. Fewer pages on web sites

The two general categories of responsive design layouts on the web are:

  1. Tiling layouts
  2. Scaling layouts
  3. C-clamp layouts
  4. Breakpoint-based layouts
  5. Cheerio layouts

Approximately what percentage of web pages are viewed by people on mobile devices?

  1. Fewer tan 25%
  2. Between 25 to 50%
  3. More than 50%
  4. More than 75%
  5. Over 100%

How might one create a breakpoint-based responsive design?

  1. Intelligent use of HTML inline elements
  2. Multiple CSS media queries
  3. Use of multiple <section> elements
  4. Use of percentages instead of absolute values in width settings

How might one create a scaling responsive design?

  1. Intelligent use of HTML inline elements
  2. Multiple CSS media queries
  3. Use of multiple <section> elements
  4. Use of percentages instead of absolute values in width settings

Allowing users to be able to see a hamburger icon, and click it to show the primary navigation requires:

  1. HTML-only
  2. HTML and CSS
  3. HTML and Javascript
  4. Javascript-only

What are issues to address in a site map?

  1. Try to reduce the number of content groups to as few as possible
  2. Try to reduce the depth of the site map to as few levels as possible
  3. Try to accommodate all the content of the site in as few pages as possible
  4. Try to make the grouping of the content intuitive to users

Information Architecture

The questions in this section are all "select all that apply", with possibly multiple correct answers.

What is the purpose of a site map?

  1. To determine the main grouping of pages
  2. To show how many sections of content there are on the site
  3. To show how many "levels" deep the content goes
  4. To show every link between every page

What is the purpose of wireframe diagrams?

  1. To determine the types of content that will appear on every page
  2. To determine the approximate layout of content on each page
  3. To determine which content is most important
  4. To determine exactly what text and images should appear on each page

What are some ways you can indicate that a piece of content is important in a wireframe content?

  1. Place it closer to the top-left of the diagram
  2. Make it larger in size
  3. Indicate with a note that it should have a unique visual design
  4. Place it at the very right side of the page

Photoshop

  • raster images
    • pixels
    • resolution
    • dimension
  • GUI layout
    • tools
    • menus
    • panels
    • panel menus
    • color picker
  • selections
  • layers
    • layer masks
    • adjustment layers
  • color
    • color modes
    • bit depth
    • color channels
    • alpha channel
  • compression formats
    • JPG
    • PNG
    • GIF

Bootstrap

  • css reset
  • components
  • readymade styles
  • responsive design
    • breakpoint-based
  • grid system
    • rows
    • columns
  • using classes

Animation

  • frames
    • key frames
    • tween frames
  • tweening
  • compression formats

Audio

  • samples
  • sample rate
  • bit depth
  • compression formats
  • audio tag in HTML
  • frequency range of human hearing
  • Nyquist-Shannon theorum
    • 44.1kHz sampling frequency

Video

  • tips for good cellphone video
  • compression formats
  • video tag in HTML
  • soviet montage

Illustrator

  • paths
    • anchors
    • segments
  • colors
    • stroke
    • fill
  • tools
    • pencil
    • pen
    • brush
    • text
    • type on a path
    • etc...

What links here