Skip to Navigation | Skip to Content

MAT 125 - Web Design 1: Fundamentals

Projects and Exercises

Exercises

Exercise details are provided on the schedule page within the week that they are assigned.

> Go to Top

Project #1 (due 11/8)

single page scrolling website

A common structure and increasing trend on the web is to create "single page applications" (or spas) wherein each content section is contained within one long scrolling page, often accompanied by JavaScript scrolling effects.

For this project, you will design and develop a 'one-page' website for a fictitious book, movie, album (or other media product). You are required to invent your concept and content for this.

Include a 'cover' with the name of the book, movie, or album. Consider including a tag line and/or 'call to action' button (to 'buy' or 'scroll down'). Include navigation that will scroll down the page to least four sections of content, such as "Story" or "Description", "Cast and Crew" or "About the Author", "Reviews", and/or such content as "Gallery" or "Contact" or "Behind the Scenes", etc. These actual labels and their accompanying content are up to you to invent. You may use dummy text for some of the textual content, but you must at least write all of your own 'micro copy' including headers, subheads, navigation labels, etc. In other words, you can generate lorem ipsum for the body text of your varying sections, but must use real text that you make up for the headers, subheads, and link/button labels.

Techniques to explore in this assignment include:

  • Creating a 'moble first' hamburger menu for navigation that is 'toggled' via JavaScript or jQuery functions such as toggleClass().
  • Using JavaScript to enable scrolling effects, such as animated smooth scrolling or parallax scrolling.
  • Using CSS Animations (@keyframe and/or transitions) to animate the title or other elements on the page.
  • Using pseudo classes (like :hover) to create rollover buttons or hover effects
  • Using media queries to create responsive and mobile friendly experience.
  • Using viewport units (and other units of measure) to create 'full page' content
  • Working with sophisticated web typography, including text-shadows, letter-spacing, line-height, etc.
  • Working with the CSS box model and layout and positioning strategies
  • Working with responsive foreground and background images

Using HTML for structure and an external CSS stylesheet for presentation, creatively format your pages to be thematically consistent with your media product. In other words, try to use text styles, images, and/or colors that relate to your content and contribute to the meaning and experience of it. There are no particular requirements for typography, image-use, or layout, but it is expected that you make stylistic choices for each and every element on your page (ie. nothing should simply inherit the default browser styles).

Create a root folder/directory called "project1". Save your HTML file as "index.html" and include your other CSS file(s) (ie "styles.css") and image files within this "project1" folder. Using FTP, upload your files into a "project1" folder within your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and video tutorials about how to accomplish this.

Project Resources

Single Page Website Inspiration

jQuery and JavaScript (for scrolling effects)

CSS3

Color Resources

Typography and Fonts

Image Resourcces

> Go to Top

Project #2 (rough due 11/29, full project due 12/4)

FICTITIOUS BUSINESS / RESPONSIVE Website

Create a responsive website for a fictitious business, comprised of at least 4 web pages, that adapt appropriately to mobile, tablet, and desktop screens while maintaining stylistic and thematic consistency. Choose one of the following businesses or think of your own. Make up a name for it.

  • Cafe or Restaurant
  • Bar or Nightclub
  • Floral Shop
  • Day Spa
  • Barber Shop or Hair Salon
  • Bike Shop (motorcycle or bicycle)
  • Dentist/ Physician Services
  • Law firm/Professional Services
  • Design Firm (web or graphic design)
  • Contractor Services
  • Landscape Architecture Firm
  • Boutique Clothing Company

Your website design should have all the basic components of a website, including a header, a navigation menu, a main content area, a sidebar, and a footer. You should use HTML5 structural tags to markup these elements and CSS to layout them out and add style and formatting.

The textual content for the website can be compromised of dummy text, but you must include headers and sub-headers that you write/invent. In other words, you can generate lorem ipsum for the body text, but must use real text that you make up for the headers, subheads, and link/button labels.

You may use any graphics and images that you wish, but only one graphic is required. It is required that you create a banner and/or logo graphic for your business that you apply to the header of the page using image replacement techniques.

REQUIREMENTS

  • Include a minimum of 4 separate pages (including an 'about' page and a 'contact' page, plus at least 2 other pages of your choice (services, products, links and resources, clients, staff/bios, etc.).
  • Use semantic markup that separates structure/content (HTML) from presentation (CSS) to the best of your ability, including the the use of CSS (not HTML tables) for page layout.
  • Use an external Cascading Style Sheet (CSS) that is shared by all pages to apply style and formatting and include a CSS Reset (such as this reset.css code) that 'zeros out' browser default styling. You must make your own stylistic choices for each element and not rely on any default browser styles.
  • Create and optimize a graphic/image to use for the header/banner/logo of your page and apply it using the CSS image replacement technique. You are encouraged to use other web-optimized graphics/images as appropriate to your content, but additional graphics are optional.
  • Use a color palette of no more than 5 colors for the site. See Adobe Color for help selecting colors.
  • Create responsive, fluid designs that use media quieries to create appropriate break points to target mobile phones (320 - 480px), tablets (~768 px), and desktops (~960px +) with custom/contextual CSS. In all likelihood, this will require at least 3 break points, wherein your design and/or layout may need to change. Note that the space in-between break points is important too. Ideally, your design should not become ugly or unusable at any size.
  • Include the following meta data in the <head> of your document:
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  • Utilize fluid/flexible layouts, responsive images, and responsive navigation as demonstrated in class lectures and as you feel appropriate to optimize your site for 'mobile' and 'responsive' display.

PAGE STRUCTURE/LAYOUT

  • A header within <header> tags that includes the business name (or site identifier) and uses the image replacement technique to apply a background image/graphic in replace of the header's textual content.
  • A global menu/navigation bar within <nav> tags that links to each page and uses HTML lists for markup and CSS for styling. Your navigation menu buttons should include rollover effects (using the :hover pseudo class).
  • A main content area within <main>, <section>, or <article> tags with the primary textual content. This textual content can be dummy lorem ipsum. But, you should also include subheads (h2, h3, etc) that you write/invent and use to break up the content. Style your text and headers with appropriate colors, sizes, font-families, line-heights, font-weights, etc.
  • A sidebar within <aside> tags that floats left or right of your main content. You can invent text or graphics for the sidebar or use dummy lorem ipsum text.
  • A footer within <footer> tags that includes copyright information and text-based navigational links (redundant links that reflect your navigation menu) and/or any other information that you'd like to include.
  • It is recommended that you place all of the elements above within a container div that is centered on the page (margin: 0 auto) and is sized using a percentage-based width (such as 80%), perhps with a max-width (of 1280px for example).

Create a root folder/directory called "project2". Save your first page or homepage HTML file as "index.html" and include your other HTML pages (.html files), CSS file(s) (ie "styles.css") and image files within this "project2" folder. Using FTP, upload your files/"project2" folder within your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and video tutorials about how to accomplish this.

> Go to Top

Project #3 (due 12/13)

STUDENT CHOICE - WEBSITE PROJECT

Create a website using content of your own choosing (with proposal and instructor approval). This can be a real or fictitious business site, a personal website, or a website about a subject or topic (or almost anything — it's your choice). You can choose to rework or extend one of the first two projects to turn it into a 'portfolio worthy' piece or you can do something brand new. If extending one of the first two projects, consider using real content instead of lorem ipsum dummy text.

The design process for your final project will contribute to your course grade. You will be asked to respond to an RFP (Request for Proposal) for your website that will layout the specific details of your project (objectives, look and feel, content, flow-chart, etc.). The proposal will serve as your design plan.

Your final project will give you an opportunity to apply the techniques you have learned in this class. Use them in appropriate ways to add function, design, structure and interactivity to a complete site. Adhere to the following requirements.

REQUIREMENTS

  • Be realistic and limit the scope of the production work to make the site “doable” in the given time-frame
  • Complete the Project Proposal (due 11/27)
  • A minimum of 4 separate pages or sections within the site with a global menu/navigation bar that links to each page/secttion
  • Use semantic markup that separates structure/content (HTML) from presentation (CSS) to the best of your ability
  • HTML pages must be written in valid HTML5
  • Use an external Cascading Style Sheet (CSS) that is shared by all pages to apply style and formatting
  • Use CSS (not HTML tables) for page layout
  • Use web-optimized graphics/images appropriate to your content
  • Include at least one of the following elements to add more advanced functionality or media to your page: JavaScript or jQuery image galleries, sliders, or other functionality and/or plugins, HTML forms, HTML5 audio or video, CSS3 Transitions
  • Complete and upload the site by the deadline (due 12/13)
  • Participate in final project critiques

> Go to Top

Final Project Proposal (due 11/27)

Write a 1-2 page creative brief/project proposal for your final project. Use the brief to figure out what you plan to do and how you plan to do it. The proposal will help to organize your thinking, clarify your objectives, develop your intended look and feel, and provide you with an action plan.

Prior to writing your proposal, you may wish to review my Client Survey and Project Planning Questionnaire. Not all of these questions will be applicable to the project you are building, but the answers to these types of questions will form much of the content of your proposal.

Submit your Final Project Proposal by e-mail as a PDF or Word Doc attachment.

Your proposal should include the following info/sections:


Project Summary: Write a one paragraph summary of your project.

Objectives: Specify the communication objectives of your website. What are the goals and purpose of the website?

Audience: Specify the target audience for the website. Who is the site for and how will site will address this audience and/or their unique needs and wants?

Look and Feel: Describe the intended look and feel of your project. Include any initial ideas for branding and/or thematic elements and/or possible fonts, colors, graphics, compositional arrangement, etc.

Content, Navigation and Functionality: Specify the content that will be included on each page of your project. Describe how the website will work, what it will do, and how users will use it. Describe your planned navigational scheme/menu and information architecture.

Site Map/Flow Chart: Create a simple site map or flow chart that illustrates the content and navigation of your project. The site map should reveal your information architecture plans including the organization, labeling, and navigation of your intended pages. View sample site maps here. (Note: Site maps for small sites are relatively simple and it is not expected that you create something as complex as many of these samples.)

> Go to Top