Skip to Navigation | Skip to Content

MAT 165 - Web Design 2: Tools and Techniques

Menu

Class Schedule

Week 1 (1/23)

Topics + Learning Objectives

  • Overview/Introduction to the class and syllabus
  • Web basics
  • The Code View within Dreamweaver
  • Working with Code in Dreamweaver
  • Emmet and DW
  • HTML for Structure, CSS for Presentation
  • Basic HTML Tags
  • CSS Selectors, Properties, and Values
  • Styling with CSS
  • Internet History

Required Assignments + Tasks

REcommended or OPTIONAL Tasks

Assignment #1: A Recipe for HTML and CSS (50 Points - Due on Wednesday, 2/6)

Using hand-coded HTML markup, create a "recipe" web page about how to make food that you enjoy. This can be your own recipe, a family recipe, or content from a recipe that you find somewhere (give appropriate credit). Using Cascading Style Sheets (CSS), hand-code your own CSS styles in an external style sheet to add style and visual formatting to your page. In addition, add at least one image to the page.

Make this a 'recipe book' of sorts by including links (<a>) to both the previous and next student's recipe as per the Index of Student Work (i.e. include links to Assignment #1 for the both the student above and below you in the Index of Student Work such that we can progress forward and back through all of the recipes/exercises).

Use the exercise to review HTML and CSS basics. Your focus should be on using HTML to appropriately structure your content and CSS to effectively style and format your typography.

At minimum, your recipe content should include:

  • A title for your recipe or the name of the dish
  • At least one picture (of the dish or any of its main ingredients, or any photos or images that relate)
  • Description, background, or introductory information (some kind of narrative about the dish, its history, why you chose it, or anything about it)
  • Ingredients list
  • Cooking or preparation instructions or steps
  • Yield (how many servings?) and prep time (how long does it take?)
  • At least one additional section/element of your choice such as: serving suggestions, beverage pairings, nutrition information, quotes, tips, etc that can apply to your content and allow you to further explore CSS formatting.

At minimum, your HTML page should include:

  • A page title (<title>)
  • A link (<link>) to your External CSS Style Sheet
  • At least two structural tags such as an <<article> or <section> to contain your recipe content, a <header> for header content, a <footer> for footer content, and/or <div> tags for generic containers
  • A header (<h1>) with the title of dish/recipe
  • Paragraph (<p>) tags with the description information
  • Sub-heads to divide up the content (<h2> or <h3> as needed)
  • An ordered (<ol>) or unordered (<ul>) list (<li>) of the ingredients or steps involved
  • At least one image (<img>)
  • Links (<a>) to the previous and next student's recipe exercise
  • And, any other tags you feel are appropriate

At minimum, your CSS should include:

  • The use of element selectors (also called tag or type selectors), id selectors, and class selectors (explore the use of all three)
  • Text formatting using: font-family, font-size, font-weight, and font-style
  • Alignment using text-align
  • Spacing using line-height, letter-spacing, and margins or padding
  • Color including text (color) and background (background-color) colors
  • CSS for lists including list-style-type, list-style-position, or list-style-image
  • At least two of the following extras (text-decoration, text-transform, font-variant, word-spacing, or text-shadow) and any other CSS that you feel is appropriate

If any of the required HTML tags or CSS properties are unfamilar to you, look them up in the HTML Reference or CSS Reference.

Create a root folder/directory called "assignment1". Save your HMTL file as "index.html" and include your CSS file(s) (ie "styles.css") and image file(s) (ie "images/photo.jpg") within this "assignment1" folder. Using FTP, upload your "assignment1" folder/files into 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.

After completing and uploading your exercise, participate in the Assignment #1 Review and Reflection Discussion in Canvas.

VideoS + Tutorials

The Technologies Empowering the Web (Required)

  1. The Three Layers of Web Design: HTML, CSS, and JavaScript (7:39)

Coding in Dreamweaver (Recommended)

  1. Coding in Dreamweaver CC - Features, Emmet, Quick Keys (33:12)

Review of HTML, CSS, and Assignment #1 (Required)

  1. Introduction to Assignment #1 (8:16)
  2. Content is King, Defining a Site, the HMTL Skeleton, External CSS (9:44)
  3. HTML Markup for Structure, Part 1 (16:04)
  4. HTML Markup for Structure, Part 2 (17:46)
  5. CSS for Presentation (26:16)

Publishing and FTP in Dreamweaver (Required)

  1. Site Management and FTP with Dreamweaver CC (16:26)

History of the Internet (Recommended)

  1. The Birth of the World Wide Web (video from the Computer History Museum)
  2. The History of the Internet in a Nutshell (article)
  3. Internet History 1962 to 1992 (Online exhibit/article from the Computer History Museum)

Additional Tuorials if You Need to Brush Up on HTML and CSS (Optional)

  1. Review the HTML Beginner Tutorial at HTML Dog (from HTML Dog)
  2. Review the CSS Beginner Tutorial at HTML Dog (from HTML Dog)
  1. Getting Started with HTML (from the Mozilla Developer Network)
  2. Getting Started with CSS (from the Mozilla Developer Network)

Links + Resources

These and other great books are free from O'Reilly (formerly Safari) Books Online using your Miracosta Surf ID and Password:

> Go to Top

Week 2 (1/30)

Topics + Learning Objectives

  • HTML for Structure, CSS for Presentation
  • Web Typography
  • Crimes in Web Typography
  • CSS and Type
  • Special Characters
  • Working with Images
  • Advanced Typography

Required Assignments + Tasks

VIDEOS + TUTORIALS

Crimes in Web Typography (Required)

  1. Case #1 : Contrast (8:25)
  2. Case #2 : Defaults (4:34)
  3. Case #3 : Poor Font Choices (15:11)
  4. Case #4 : A Matter of Measure (11:05)
  5. Case #5 : Visual Weight (9:12)
  6. Case #6 : Hierarchy and Spacing (17:12)
  7. Case #7 : Centering, ALL CAPS, and Special Characters (19:32)
  8. Case #8 : Visual Interest (Drop Caps, Graphic Elements, Text Shadows) (23:49)

Working with Dreamweaver (Optional)

Introduction to Working with Dreamweaver CC (Optional)

  1. The Dreamweaver interface and workspace (24:20)
  2. Defining a site, creating pages, and adding content (13:52)

Applying Structure using Dreamweaver CC (Optional)

  1. Adding structure and markup - headers, paragraphs, line breaks, HTML5 strcutural elements, divs, and more (14:49)
  2. Using special characters (12:58)

Web Fonts and Font Families in Dreamweaver CC (Recommended)

  1. Working with Web Fonts and Font Families (41:13)

Assignment #2: Magazine Web Typography Investigation (Due 2/20)

Explore web fonts and typographic design on the web using the content and typographic design of a magazine page (or spread) as inspiration. Find a printed magazine article with compelling (but not overly complex) typography and a clean, interesting layout. Using HTML and CSS, create a webpage that reflects the content/layout of the magazine article.

The Crimes in Web Typography series of videos review the CSS properties that you may need to explore. A great free resource and online book about web typography that you may wish to utilize as well is Professional Web Typography by Donny Truong.

Adhere to the following guidelines:

  1. Try to maintain a connection to the graphic/typographic design of the printed magazine article while creatively adapting the article for web delivery. You do not have to make your webpage design look exactly like the article (or use the same fonts or images), but the design of the magazine article should “inspire” your design.
  2. Focus on high-quality typographic design using modern CSS techniques.
  3. Make sure that you have at least four distinct typographic styles (such as styles for a top-level header, a subhead, a byline, and body copy).
  4. Use appropriate and semantic HTML markup (for content/structure) and CSS coding (for presentation/formatting).
  5. Use a CSS Reset to zero out browser preset margins and padding.
  6. Explore and use Web Fonts by either using a font hosting service (like Google's Web Fonts) or embedding the font using the @font-face declaration (such as available at Font Squirrel) or both.
  7. Integrate at least two images into the design (as foreground or background elements).
  8. Optionally, use Image Replacement Techniques to replace text with image on a header (or other elements, but not the body copy).
  9. You are encouraged to explore CSS3 styles such as text-shadow, column-count, column-gap, column-width, transforms, CSS Shapes, etc.
  10. You are encouraged to create a responsive design (adapt to mobile), but it is not required.
  11. Be creative and have fun.

Create a root folder/directory called "assignment2". Save your HMTL file as "index.html" and include your CSS file(s) (ie "styles.css") and image file(s) (ie "images/photo.jpg") within this "assignment2" folder. Using FTP, upload your "assignment2" folder/files into 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.

Magazine Exercise / Typography Demos

Links + Resources

Dreamweaver

Typography

Fonts

Reference

Resets

Magazines and Books

These and other great books are free from O'Reilly (formerly Safari) Books Online using your Miracosta Surf ID and Password:

> Go to Top

Week 3 (2/6)

Topics + Learning Objectives

  • Review of FTP
  • Working with text/typography
  • Class Demo starter files ( starter.html | eye.png )
  • CSS properties for web typograpahy
  • CSS Columns
  • CSS Shapes
  • CSS Transforms
  • Review of Photoshop for Creating and Optimizing Web Graphics
  • Optimizing Images for the Web
  • Formats for Optimizing Web Graphics
  • Working with Images in HTML and CSS

Required Assignments + Tasks

VIDEOS + TUTORIALS

Optimizing Imagery for the Web Using Photoshop CC (Required)

  1. Image optimization - Introduction, image size and resolution (11:13)
  2. Image optimization - Image simplification (6:42)
  3. Image optimization - Compression and file formats (.jpg, .png, .gif, .svg) (25:45)

Images in HTML and CSS (Recommneded)

  1. Images in HTML (from Mozilla)
  2. HTML Images (from W3 Schools)
  3. Image Backgrounds with CSS (from Mozilla)
  4. CSS Style Images (from W3 Schools)

Working with Dreamweaver (Optional)

Images in Dreamweaver (Optional)

Formatting Your Page with CSS and Dreamweaver's Designer Panel - Dreamweaver and CSS in Practice (Older / Optional)

  1. Page properties (11:47)
  2. Creating and editing CSS styles - The CSS Designer Panel (34:42)
  3. CSS Styles in Practice on the HyperPoem Exercise - Including Working with Images, IDs, ViewPort Units, Drop Shadows, and more (37:39)

Links + Resources

> Go to Top

Week 4 (2/13)

Topics + Learning Objectives

  • Introduction to Project #1 and Assignment #3
  • Single Page Scrolling Websites
  • Exploring Navigation
  • Working with Background Images
  • Parallax Imagery
  • Single Page Scrollers

Required Assignments + Tasks

VIDEOS + TUTORIALS

Working with Web Typogaphy

Assignment #3 - The Interactive Mood Board Exercise Demos:

Project #1: single page scrolling website (DUE 3/12)

Design and develop a 'one-page' website for a fictitious book, movie, album, or event. Review the full project details on the projects page.

ASSIGNMENT #3: HTML/CSS Interactive Mood Board (DUE 2/27)

Many designers conduct informal creative investigations, "mood boards," or "style tiles" to explore color, typography, imagery, layout possibilities and more around a united theme/idea/concept. These creative investigations are the birthplace and playground for design ideas that will ultimately inform your site's design.

In this exercise, you will explore creating basic webpage layouts and web navigation in order to create an interactive 'mood board' to guide the stylistic/conceptual development of Project #1.

Your exercise/mood board will take the form of a website with three pages of content and a navigation menu that links each page together. One page will explore color and include at least two color palettes (5 colors max per palette). One page will explore typography and include typographic examples of a headline, subhead, and body copy (using font-family, font-size, text-shadow, etc.). One page will explore imagery and include images that can be used as potential foreground or background graphics.

The layout and content should consist of:

  • A <header> with the name of your ficticious book, movie, or album concept.
  • A <nav> with a global navigational menu or navigation bar that links to each of your pages (using relative link paths). The buttons/links on this navigation bar should be labeled "Colors", "Typography", and "Imagery." Mark them up using HTML lists (<ul> and <li>) and style them with CSS (so that they are made to look and function like menu buttons).
  • <section> tags with your content (either colors, typography, or imagery). If using multiple sections on a page, create two or three column layouts through the use of floats, flexbox, or CSS grids.
  • A <footer> with your name (other content is optional).

Create an HTML/CSS page with the elements above. Layout the page such that the header extends across the page (100%, auto, or a fixed width), the section content is next (with optional columns), and the footer clears all elements to extend across the bottom of the page.

Create a root folder/directory called "assignment3" and save your HMTL and CSS file(s) (ie "styles.css") within this root folder. In addition, create an "images" folder inside of your root directory and save all of your optimzied images into this folder (ie "images/photo1.jpg"). Using FTP, upload your "assignment3" folder into your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions.

Links and Resources

Single Page Website Inspiration

About Mood Boards and Style Tiles

Color Resources

Fonts and Web Font Hosting Services

Image Resources

> Go to Top

Week 5 (2/20)

Topics + Learning Objectives

  • Single Page Scrollers
  • Smooth Scrolling
  • Scroll Snap
  • Project #1 techniques
  • CSS for Buttons and Menus
  • Creating Navigation Menus with Lists and CSS
  • CSS Rollovers
  • CSS Image Replacement Technique
  • CSS Sprites

Required Assignments + Tasks

VIDEOS + TUTORIALS

Single Page Scrolling Websites

  1. Single Page Scrollers - Part 1 : Structure and Layout (26:11)
  2. Single Page Scrollers - Part 2 : CSS Techniques (scroll behavior, scroll snap, parallax) (18:33)

CSS Image Replacement

  1. CSS Image Replacement Technique (9:09)

CSS Buttons and Menus

  1. CSS for Creating the Ultimate Navigation Menu Button (15:48)
  2. Recreating the Nav Menu Button with the CSS Designer Panel (15:23)
  3. HTML and CSS for Navigation Menu Design and Layout (21:23)
  4. RollOver Buttons Using Graphics (14:11)

Links and Resources

About Mood Boards and Style Tiles

Elements of Design (inspiration and resources)

> Go to Top

Week 6 (2/27)

Topics + Learning Objectives

  • Animation on the Web
  • Overview of CSS3 Animation
  • CSS Transitions
  • CSS3 Keyframe Animations
  • Project #1 Demos
  • Responsive Design

Required Assignments + Tasks

VIDEOS + TUTORIALS

An Overview of CSS3 Keyframe Animation

  1. CSS3 keyframe animation basics (37:07)
  2. Creating a pure CSS3 slideshow (23:52)

An Overview of CSS3 Transitions (from others - recommended)

  1. Transitions (article/tutorial from Learn CSS)
  2. An Interactive Guide to CSS Transitions (from joshwcomeau.com)

Responsive Design and Mobile Optimization

  1. Introduction to Responsive Design (17:23)
  2. Media Queries - Part 1 - Introduction and Syntax (18:57)
  3. Media Queries - Part 2 - Layout, Box-Sizing, Within DW (17:50)
  4. Understanding Viewports, Screen Sizes, and Pixel Densities (20:39)
  5. Fluid Layouts - Part 1 - Overview, Moving from Fixed to Fluid Designs (11:08)
  6. Fluid Layouts - Part 2 - Coding Fluid Layouts (31:47)
  7. Flexible Images and Backgrounds (31:48)

Links and Resources

CSS3 Animation

  1. Transitions (article/tutorial from Learn CSS)
  2. An Interactive Guide to CSS Transitions (from joshwcomeau.com)
  3. CSS Animation (article/tutorial from Learn CSS)
  4. Using CSS Animations (MDN Reference)
  5. https://cubic-bezier.com (Timing Function Tool)
  6. https://animate.style/ (CSS Animation Library)

Media Queries

Responsive Design

> Go to Top

Week 7 (3/5)

Topics + Learning Objectives

  • Project #1 Techniques
  • JavaScript Animations
  • Scroll-based Animations
  • Navigation Menu Design
  • Responsive Design

Required Assignments + Tasks

VIDEOS + TUTORIALS

Exploring CSS Animation

  1. The Transition Property (7:39)
  2. The Animation Property and @keyframes (23:23)
  3. Animaton-Timeline and Scroll-based Animations (Coming next week)

Project #1 Techniques

  1. Scrolling, Creating a Hamburger Menu Button, + More (39:29)
    This video reviews working with JavaScript and jQuery to animate the scrolling of the page (which can now also be done with scroll-behavior). At 5:30, the video reviews creating a Hamburger Menu Button that adds or removes a full screen navigation menu.

Using RWD to Create a Responsive Website Header (recommended)

  1. Creating a Responsive Website Header – Part 1 – Overview and HTML (10:32)
  2. Creating a Responsive Website Header – Part 2 – Core CSS (30:42)
  3. Creating a Responsive Website Header – Part 3 – Applying Media Queries (32:54)

Responsive Navigation - Creating a Hamburger Menu (recommended)

  1. Responsive Nav - Part 1: Introduction, HTML, and CSS (14:18)
  2. Responsive Nav - Part 2: Toggling the Menu with jQuery (20:21)
  3. Responsive Nav - Part 3: Adding Animation and the Hamburger Icon (18:19)

Links and Resources

CSS3 Animation

Scrolling and Animation

> Go to Top

Week 8 (3/12)

Topics + Learning Objectives

  • Project #1 Techniques and Finishing Touches
  • Navigatin Menu
  • Responsive Design
  • In Class Demo Files (starter3.zip)

Required Assignments + Tasks

VIDEOS + TUTORIALS

Exploring CSS Animation (continued)

  1. Animaton-Timeline and Scroll-Based CSS Animations (35:49)
  2. CSS Sprite Animation (16:03)
    Download Sample Sprite Sheet File Used: robotsprite.png
  3. CSS Animations : Triggering Animations When Scrolled Into View (20:28)
    Download JS File Used: animateIfInView.js

Project #1 Techniques

  1. Scrolling, Creating a Hamburger Menu Button, + More (39:29)
    This video reviews working with JavaScript and jQuery to animate the scrolling of the page (which can now also be done with scroll-behavior). At 5:30, the video reviews creating a Hamburger Menu Button that adds or removes a full screen navigation menu.

Links and Resources

CSS3 Animation

Scrolling and Animation

> Go to Top

Spring Break (3/19) - No Class This Week

NO CLASS THIS WEEK

  • Go the beach
  • Sleep
  • Catch up

> Go to Top

Week 9 (3/26)

Topics + Learning Objectives

  • Project #1 Review
  • Graphic, Web, and Media Design Principles
  • Introduction to WordPress
  • Introduction to Project #2
  • Working with Local for local WordPress installations
  • Figma Basics

Required Assignments + Tasks

ASSIGNMENT #4: Reverse Engineer + RE-ENGINEER a WordPress Theme PAGE (PART 1 due 4/9, PART 2 DUE 4/16)

In this assigment, you will take a Wordpress theme page, reverse engineer it to a wireframe, create a new design from that wireframe using Figma, and then re-engineer that new design using WordPress. In doing so, you will explore: new tools and workflows (including Local and Figma), varying WordPress themes, information architecture and creating wireframes, designing website prototypes in Figma, customizing WordPress themes, and installing and getting Wordpress running on a web server.

Part 1: Local, Themes, Wireframes, and Figma Design - Steps 1 -3 (due 4/9)

STEP 1: Using Local (by Flywheel), explore varying WordPress themes. The varying starter templates using the Astra theme are recommended for this exericse, but not required. Choose a theme to reverse engineer. Using Local, install the theme and visit/open the site to see it in a browser. Note: depending on the theme you choose (and any accompanying starter templates or content), you may need to install or create some demo/dummy content to properly see an example of the theme in action. Take a screenshot of the theme's homepage content.

STEP 2: Import your screenshot into Figma. Using Figma, create and reverse engineer a wireframe based on the design. Use the wireframe to get a sense of the content organization and structure, separated from visual design. Label the wireframe sections.

STEP 3: Using your wireframe as a guide, redesign the website page. Keep the same structure and layout, but replace the content with your own 'invented' content. Find images from Unsplash or elsewhere to replace the image content. Choose your own fonts (from Google Fonts) and replace the text content with your own copy. Choose your own color palette for the colors.

Turn in your Figma design by 'sharing' a link to it submitting this URL via Canvas.

Part 2: Local, WordPress, Customization, C-Panel, and Getting Your Site Online - Steps 4 - 6 (due 4/16)

STEP 4: Once you have a completed 'new' design in Figma, return to Local and WordPress and re-engineer the site page. Customize the theme/page by adding your images, font styles, colors, and text content to match your design in Figma.

STEP 5: Once you have your re-egineered page running using Local, export the site as a .zip file. Within Local, right-click on the site name and select "Export." Follow the prompts to save the website in a place that you can find it. The zip file that is created contains everything you need for the site, including Media, Plugins, Themes, and an export of the database.

STEP 6: Using the login credentials provided by the instructor, visit your C-Panel for your subdomain on the matmcc.org. Install WordPress from the C-Panel. Import your .zip file (from Local) to get your site running on this 'remote' host. Turn in your site via Canvas by submitting the URL.

VIDEOS + TUTORIALS

Graphic, Web, and Media Design Principles

  1. Graphic, Web, and Media Design Principles, Tips, and Good Habits
  2. Collected Design Principles (of people, organizations, software, hardware) from Jeremy Keith at Adactio
  3. Design Principles (articles at Smashing Magazine)

Introduction To Various WordPress Hosting & Installations

  1. Playlist (3 videos)

WordPress 101

  1. Chaper 1: Welcome
  2. Chapter 2: Introduction and Hosting

Figma for Beginners

  1. Beginner 1: Explore ideas
  2. Beginner 2: Create designs

Links and Resources

> Go to Top

Week 10 (4/2)

Topics + Learning Objectives

  • Project #1 Review
  • Graphic, Web, and Media Design Principles
  • Hosting (matmcc.org) and cPanel
  • Installing WordPress from cPanel (your login details will be provided in class and are in Canvas)
  • cPanel and WordPress Basics
  • Figma Basics
  • Design in Figma

Required Assignments + Tasks

VIDEOS + TUTORIALS

Installing WordPress Manually via CPanel

  1. Installing WordPress Playlist (3 videos)

WordPress 101

  1. Chapter 3: TheWordPress Backend (17 short videos)

Figma for Beginners

  1. Beginner 2: Create designs
  2. Beginner 3: Build prototypes

Links and Resources

> Go to Top

Week 11 (4/9)

Topics + Learning Objectives

  • Project #1 Review
  • Graphic, Web, and Media Design Principles
  • Design in Figma
  • Figma for Developers (Exporting Assets, Inspecting Code)
  • WordPress Basics
  • Using Theme 'Customizers'
  • The Block Editor in WordPress
  • Moving from Figma to WordPress

Required Assignments + Tasks

VIDEOS + TUTORIALS

WordPress Admin Backend and Theme Testing

  1. WordPress Admin Backend and Theme Testing Playlist (6 videos)

WordPress 101

  1. Chapter 4: Building Our Website (20+ short videos)

Figma for Beginners

  1. Beginner 4: Prepare for Handoff

Links and Resources

> Go to Top

Week 12 (4/16)

Our On-Campus Class is Cancelled for Tuesday 4/16

Topics + Learning Objectives

  • Project #2 Developerment
  • Content Strategy
  • Deeper into WordPress
  • Posts and Pages
  • Categories and Tags
  • Customization Options
  • Plugins

Required Assignments + Tasks

VIDEOS + TUTORIALS

WordPress Admin Backend and Creating Content

  1. WordPress Admin Backend and Creating Content Playlist (6 videos)

WordPress 101

  1. Chapter 5: WordPress Security (7 short videos)
  2. Chapter 6: WordPress SEO, Speed, and Performance (6 short videos)

Links and Resources

  • Login to your cPanel on matmcc.org (details in Canvas)

> Go to Top

Week 13 (4/23)

Topics + Learning Objectives

  • Information Architecture
  • Anatomy of Webpage
  • Design Conventions and Patterns
  • Style Tiles, Wireframes, and Design Comps
  • Assignment #5 and Project #3 Introduction
  • Review the Sample Client Survey
  • Project #2 Developerment
  • Content Strategy
  • Categories and Tags
  • Plugins

Required Assignments + Tasks

Assignment #5 - iPoint project creative development (Due by for before 5/9)

For Project #3, you will create a website for the fictional company, iPoint Advisors. You will begin this project with some creative development work created in Figma, XD, Photoshop, or Illustrator. This creative development work (Part 1 and Part 2 of the project) counts as Assignment #5, due by or before 5/9.

Start by reviewing the project details, watching the Introduction to the iPoint Project video, and participating in the Client Survey on Canvas.

PART 1 - Design a Logo Graphic + Create a Style Tile

Many designers conduct formal or informal creative investigations, "mood boards," or "style tiles" to explore colors, typography, imagery, layout possibilities and more around a united theme/idea/concept. These creative investigations are the birthplace and playground for design ideas that will ultimately inform your final design.

You are required to conduct your own creative investigations to explore color, typography, menu links or buttons (and optionally textures, photos, and more). Start by creating an appropriate and limited color palette for your project.

For your project, you should explore graphic development (creating imagery) in Photoshop, Illustrator, XD, or Figma for the following:

  1. A logo or banner for the company that will serve as the site identifer. Your logo/banner can be a simple logotype or word mark. Or, it can be a combination mark or emblem.
  2. Rollover buttons/links for the navigational menu and/or call to action buttons (ultimately, you will use pure CSS or CSS sprites for your menu graphics, but initially you can focus on the look and feel of these graphics).
  3. You are encouraged to also create page titles/header graphics (page identifiers) for each site section, background imagery, and/or branding-related graphics or photographs as a appropriate to your concept.

With consideration to the graphics required in the project, design a "Style Tile" that showcases your logo design, color palette, button/menu design, and typography choices (and optionally textures, branding graphics, background imagery, and more).

For ideas and inspiration about such style tiles and the related graphics you need to create, visit Style Tiles (a visual web design process) and the Elements of Design showcase on buttons, navigation menus, and typographic headers.

PART 2 - Refine Your Style Tile and Create a Layout Wireframe OR Create a Design Comp

There are different ways to approach web design. Traditionally, designers would create a design comp that would demonstrate the total look and feel of a given web page (usually a template page). The comp, usually designed in Photoshop, Illustrator, XD, Figma, or Sketch is an image that can be shared with the client to represent a pixel-perfect rendition of what the website would look like once produced in HTML and CSS. After the client approved the comp, production and programming would begin. However, in the era of responsive design, fixed-sized comps have less relevance for some designers, who prefer to 'design in the browser' or use a 'rapid-prototyping' methodology. These designers create a refined style tile or style guide to define the look and feel of a site, including such elements as logo graphics, image choices, texture or background graphics, buton graphics ( such as 'call to action' buttons or navigation menu graphics), typography, color, and more. However, unlike a comp, these elements aren't necessarily arranged to represent a given page design, but rather to represent the overall style of the site on any page (or size).

For part two of the iPoint project, choose a workflow that you think will work best for you and either create a 'design comp' or a 'refined style tile and wireframe' to define the visual look and feel and intended layout for your iPoint project. Use a column-grid to guide the design (such as 12-columns).

Document your reflined style tile or design comp by creating a JPEG, PNG, PDF, or Figma or XD-based document and post it to your "assignment5" folder in your Lastname_Firstname folder on the MAT server. Then, participate in the iPoint Creative Development Work in Process post in Canvas in order to get (and give) feedback on your style tile or comp (from me and the class).

Note that upon completion of part 2, you will have completed the requirements of Assignment #5 - iPoint Creative Development.

VIDEOS + TUTORIALS

Web Design Process, Information Architecture Development, Anatomy of a Webpage, Web Design Conventions

  1. Web Design Process (Google Slides)
  2. Understanding Information Architecture (Google slides)
  3. Anatomy of a Webpage + Design Conventions (Figma slides)
  4. Sample sitemaps + wireframes (review resources below)

Introduction to the iPoint Project (Project #3)

  1. Introduction to iPoint project guidelines and processes, including a discussion of possible workflows (style tiles v. comps) (23:06)
    Note: The video mentions this as a 'midterm' project, but this project is the final project in this class.

WordPress 101 : Final Chapters

  1. Chapter 7: RankMath Plugin and SEO (11 short videos)

Some Common/Popular WordPress Plugins to Explore

  1. Classic Editor
  2. Akismet - Antispam
  3. JetPack - Security, Speed, Tools
  4. Elementor - Page Builder/Customizer
  5. Contact Form 7 - Contact Forms
  6. Woo Commerce - E-Commerce
  7. Smart Slider - Slideshows Creator
  8. Yoast - SEO
  9. Rank Math - SEO
  10. Admin and Site Enhancements (ASE)
  11. All-in-one-wp-migration - Site Backup and Migration
  12. WP Migrate LIte - Site Backup and Migration
  13. Wordfence - Security
  14. Genesis Blocks - Premium Blocks, Sections, Layouts
  15. bbPress - Discussion Boards
  16. FakerPress - Dummy Content for Testing

Links and Resources

WordPress Resources

  • Login to your cPanel on matmcc.org (details in Canvas)

iPoint Project and Style Tile Resources

Information Architecture, Site Maps, Task Flows, and Wireframes

> Go to Top