Intro to Web Design & Visual Hierarchy

Program Introduction

Courses

DSGN 270: Web Design

CPNT 201: Web Development Tools

CPNT 260: HTML and CSS

CPNT 262: Javascript

CPNT 200: Databases and CMS Systems

CPNT 264: Business

Communication

• Slack Invite Link (click here)
  • We will use the winter-2024 channel

Instructors

• Ashlyn (Ash) Knox: ashlyn.knox@sait.ca
  • DSGN-270, CPNT-262, CPNT-200, CPNT-265
• Temitope (Temi) Elodimuor : temitope.elodimuor@sait.ca
  • CPNT-201, CPNT-260, CPNT-265
• Dasa Chadwick: dasa.chadwick@sait.ca
  • CPNT-264
• Terry O’Dwyer: terry.odwyer@sait.ca
  • CPLN 240

Scrum Teams

Scrum is a style of workflow that is commonly used in software development. In it, projects are organized into “sprints” (usually 2 weeks) where the team spents a bit of time every day checking in with one another and coordinated efforts.

Regardless of course or other group assignments, you’ll have one scrum team for the first half of the semester, and then another scrum team for the second. Every monday, we’ll do a quick walk through of the week. Then every morning, you’ll have a check in with your scrum group to discuss:

1. What did you work on yesterday? (outside of lecture time)
2. What are you working on today?
3. Are there any blocks? (challenges either with content or external that are stopping you from moving forward)

This system is intended to help you identity potential challenges earlier and come up with ways to mitigate difficulties and obstacles.

Scrum Team Breakout Session

• Meet with your scrum team
• Intro Discussion:
  • what brought you to web development?
  • what do you see as potential strengths from other areas of your life/professional history?
  • what do you anticipate being major challenges?
  • what are you most excited for?
• Tool Discussion:
  • what tools do you use to organize your tasks? (if you don’t have one, what do you intend to try)
  • what do you use to document notes?
  • have you used development tools before? (if so what?)
  • have you used design tools before? (if so what?)

Course Overview

DSGN-270 focuses on visual concepts used to make websites easy to navigate and use. We will practice skills used for User Interface (UI) design as well as User Experience (UX) research and design. This course will teach you to structure information effectively and to apply industry standard design principles to web content.

As design is partially a subjective discipline, grading won’t focus on stylistic choices beyond their relevance to the design concepts and principles learned in class.

Assessments

Assessments are broken up into smaller graded activities and assignments. Everything is open book and there are no in class tests.

All submissions are done through d2l

Sprint Activities 40%

• Visual Hierarchy Review 10%
• SVG Logo Design 10%
• Card Component Design 10%
• Conduct a User Test 10%

Assignments 60%

• Assignment 1: Design Moodboard 20%
• Assignment 2: Website Wireframe 20%
• Assignment 3: Website Mockup 20%

Tools & Software

• Figma: Vector Design Tool
• Figjam: Whiteboarding Tool
• SVGOMG: SVG Optimization Tool
• Pen and Paper
• Sticky Notes
• Colored Markers

Readings & Resources

• Don’t Make Me Think (Book) by Steve Krug
• Nielsen Norman Group (Website)
• Smashing Magazine (Website)
• Figma Learn (Documentation)

Overview of Web Design

• Link to Slide Deck
  • Web design is generally broken up into UI and UX design.
  • It can help a developer to be able to at least speak in design terms for better team communication.
  • Depending on your team, you may have to do some design work. However in a lot of cases, there is a dedicated design team or designer that you would collaborate with.

In Class Activity: Design Treasure Hunt

1. (30 minutes) In your scrum groups, go around campus and take pictures of effective design (more is better)

• locations:
  • go to tech support (in the basement)
  • go to a student center (check out Senator Burns)
  • the 4 nines (campus restaurant in the John Ware building)
  • Stan grad
  • Heritage hall
• look for just about anything
  • well made posters, easy to follow instructions, beautiful architecture…
  • pay special attention to anything that requires interaction from a “user”
• make sure you can use your computer to access the images when you get back to class

2. Create a collage in figjam of your favourite images
3. Make a few notes, mentally or written down about why the images where examples of effective design and/or why they visually attracted you
4. Discuss some of your images in your scrum groups

Tool Introduction: Figjam

• Figjam is used alongside Figma as a whiteboarding space
• Create an account with figma
• Use figjam to plan, mindmap, brainstorm, and collaborate
• Figjam Guide