☰  

Welcome to GDES 218,
Graphic Design for the Web

Final Class Projects from students in GDES 218, Graphic Design for the Web at Montgomery College

This class is a safe space, a community of learners, this class belongs to you.

In this virtual classroom, a non-judgmental environment, your Professor strives to maximize student engagement and opportunity.

This course is designed to allow every student a voice, to feel heard and respected, to recognize their value as a scholar regardless of background or experience. Your words, your ideas are important.

Differences are Celebrated Here

Montgomery College is a welcoming institution that is proud to represent more than 135 countries, students of all ages and backgrounds. As a community, we are committed to diversity, inclusion, and equity in education. At Montgomery College, we aspire to be JEDIs in our treatment of students, committed to:

SUMMER 2022 COURSE INFORMATION

Once Registered for the class:

  1. Login to MyMC.
  2. Select BlackBoard.
  3. Select BlackBoard GDES218 Section.
  4. Select Course Content.
  5. ZOOM LINK Provided Course Content and via Email.

Class Stream Channel
(To view videos, you must be logged into MyMC in the same browser you are viewing this page.)

All Class sessions will be recorded via zoom and posted the same day.

SPRING 2022 CLASS WORK

Made with Padlet

2GoGreen Assignment Description:

For this assignment, students create a user interface design based on text, navigation and elements provided to them for the 2GoGreen.me concept homepage content. Using the same content, students come up with different design solutions for a UI design.

See Fall '21 2GoGreen Design Examples

See Spring '22 2GoGreen Design Examples

Individual Layout Assignment Description:

For this assignment, students create a user interface design with their own concept and content. This design will serve as inspiration for the final assignment, A coded 3-page website. Plans for HTML development provided in class Padlet below specific to each student's design. Using the plan as a guide students code the HTML; from there we step through in class how to create CSS to style sites, and how to make and link to additional pages or link to anchored sections on the same HTML page. Coding work will be posted here by Professor Hubley once complete, students will learn how to make their sites live via GitHub Pages if they choose to.

See Fall '21 Individual Layout Design Examples

See Spring '22 Layout Design Examples

Perspectives Coding Assignment Description:

For this assignment, students began with a provided HTML Page, with images. With this starting point students practiced: File Management, Creation and Linking of Style Sheet, Image Optimization for .SVG and .JPG files, Replacing images in HTML, Implementing hosted fonts via Adobe or Google Fonts, Overriding Default Styles Applied to HTML Elements, CSS Layout Techniques and CSS Typographic Properties and Values.

The purpose of this assignment was to expand our vocabulary for CSS Properties and Value Options, leading into the final coding assignment for the class

This Assignment was uploaded by Professor Hubley, though for the final assignment, students will also practice uploading files via GitHub Pages.

Numbered Examples Below of Perspectives Coding Assignment from previous Semesters:

1 2 3 4 5 6 7

Final Assignment Description:

Using the plans discussed in class and provided above in the class Padlet as a guide, students code the HTML for their homepage. From there, we review the steps for creating and linking an external CSS document, and coding CSS to style the look of their page. Students then make additional HTML pages and link to those pages via the navigation. We'll also cover creating named anchors on a single HTML page and linking to those anchored page sections via navigation links for students who prefer a single-page website experience. Coding work will be posted here by Professor Hubley once complete. Within the context of this assignment, students learn Responsive Design strategies, and how to make their sites live via GitHub Pages.

Numbered Examples Below link to Final Assignment Examples:

1 2 3 4 5 6

COURSE OBJECTIVE

An examination of principles of design and design considerations as applied to the creation of Web pages and Web sites. Emphasis is on visual communication principles and visual presentation aspects of Web pages, including page layout, typography, color theory, navigation, and image creation and editing. Students will apply principles of design in the creation of a website.

COURSE MATERIALS

Blackboard Course Website

No textbook purchase is required for this class, materials authored by your Instructor are provided via BlackBoard, along with curated resources for the study of Web Design.

Instructor-Recommended Out-of-Class Resources

COURSE OUTCOMES

  • Evaluate Web pages and Web sites based on design principles.
  • Apply graphical layout concepts to the creation of Web pages, utilizing industry standard digital tools.
  • Apply principles of color theory to the creation of Web pages, utilizing industry standard digital tools.
  • Apply principles of typography to the creation of Web pages, utilizing industry standard digital tools.
  • Demonstrate the ability to create and edit images for the Web, utilizing industry standard image creation and editing tools.
  • Demonstrate the creation of a well-designed Web site, utilizing industry standard digital tools.
  • Demonstrate methods for incorporating video and sound, utilizing industry standard digital tools. Demonstrate the creation of Cascading Style Sheets (CSS), or current industry standards, to produce Web layouts.
  • Demonstrate the incorporation of advanced techniques into the creation of Web pages, utilizing industry standard digital tools.

STUDENT EVALUATION

Login to Blackboard Course Site for detailed Assignment descriptions and due dates.

Assignment 1, ‘2gogreen’ Layout:

100 points | Due 06/07/22

HTML & CSS Exercise:

50 points | Due 06/14/22

Assignment 2: Web Layout:

100 points | Due 06/21/22

Assignment 3: ‘Perspectives’ Coding:

100 points | Due 06/28/22

Assignment 4: 3-page Coded Website:

100 points | Due 07/10/22

Grading Scale:

To calculate your grade, divide your points earned by points possible. Points earned are entered on Blackboard Grade center.

A 90   B 80   C 70   D 60   F 0-59

CLASS OUTLINE

May change due to overall class progress or advances in technology/emerging standards.

Unit 1: Introduction to Web Design Strategies and Concepts

Introduction to Web Design concepts and User Interface (UI) Design; Creating design mockups with a grid; Typography resources and strategies; Design strategies specific to the Web as an evolving, non-fixed medium.

Unit 2: Content-First Design

Creating, collecting and organizing information; Implementing a cohesive design style.

Unit 3: Introduction to HTML & CSS

Introduction to Hypertext Markup Language (HTML) & Cascading Style Sheets (CSS); How proper HTML markup affects both findability and accessibility.

Unit 4: Introduction to Web Typography

Utilizing Google Fonts & Adobe Fonts on Web Pages with application of (1) stylesheet link for HTML head, and (2) font-family declaration(s) for desired CSS selector(s.)

Unit 5: CSS Layout Techniques & Advanced Web Typography

Best practices for fine-tuning Web typography through complementary or contrasting type family combinations, as well as implementation of strong typographic hierarchy.

Unit 6: Web Image Optimization

Optimizing images for the web (JPEG, PNG, SVG, GIF.)

Unit 7: Moving From Design Concept to Code

Strategies for moving from design program concept to working web prototype in-browser.

Unit 8: Troubleshooting CSS Layout Issues

Solutions for common CSS layout issues.

Unit 9: Creating a variety of CSS-based Layouts

Strategies and techniques for creating a variety of CSS-based layouts

Unit 10: Site Definitions, FTP & Linking

Linking pages and/or views; Uploading pages developed locally to a Web Server via File Transfer Protocol (FTP); Working with Codepen.io and other Online coding environments.

Unit 11: Responsive Design

Exploring responsive design concepts & techniques.

Unit 12: Slideshows for Portfolios & Features

Preparing images for, and the creation of slideshows, swipers, and galleries.

Unit 13: Audio & Video on the Web

Embedding audio and video; Creating and embedding animated gifs; CSS-based Animation.

Unit 14: Contact Forms, Publishing, Building on Coding Essentials

Contact form design; Website hosting and domain registration; Identifying essential areas in Web hosting control panels; Low/no-cost hosting options; Building on coding essentials—overview of frameworks and popular publishing environments.

Unit 15: Final Projects

Presentations of final website projects and class discussion.

STUDENT INFORMATION & RESOURCES

Read Additional Syllabus Information:

https://www.montgomerycollege.edu/admissions-registration/student-resources/syllabus-resource-list.html

LinkedIn Learning:

https://www.linkedin.com/learning (login with your MC Email address for access)

Resilient MC:

https://www.montgomerycollege.edu/resilient-mc/index.html

Additional Student Resources:

https://www.montgomerycollege.edu/coronavirus/students/index.html

IN NEED OF FINANCIAL ASSISTANCE?

Request Assistance Through CARES Act:

https://www.montgomerycollege.edu/coronavirus/federal-cares-emergency-assistance-request.html

MC Foundation:

https://www.montgomerycollege.edu/alumni-friends-donors/foundation/student-emergency-funding-request.html