Interface & Web Design: GRC 365 SECTION 1001 Fall Semester 2022 M/W 1:00-3:45PM

WELCOME TO: Interface & Web Design: GRC 365


My name is Adan Garcia and I am your instructor for the upcoming semester. Web Design and web development are related fields but not exactly the same thing. We will explore the difference between making something visually appealing versus making something visually sound. Whereas web design is invested in making the look and feel of a visual interface as pleasant as possible, web development is invested in making the architecture and functionality of a website simple and intuitive. Both the aesthetic and the navigational features of a website are what makes an user-experience EITHER delightful or painful: Easy vs difficult, seamless vs inconsistent. UX-UI is an acronym for “User Experience” and “User Interface” design.

UX/UI is a design field that concentrates to implement and improve visual interfaces and visual experiences for what we call “End-Users”. ends-users are everyone that participates and engages with a visual experience via an interface. But visual interfaces are not limited websites alone. You can find visual interfaces everywhere because computers and digital features are ubiquitous. Some examples of visual interfaces are hand-held device apps, ATM’s, automobile navigation screens, flat screen televisions, etc… In our journey as UX/UI designers our ultimate goal is to increase “End-User” delight while utilizing our visual systems, and at the same time recognizing and addressing “Pain-Points” (blindspots that we failed to see when creating a visual system)that produce friction, redundancy, or boredom, amongst other things. I look forward to working together this semester in both creating and understanding how to make beautiful and highly functional visual interfaces with you.

RESOURCES
ASSIGNMENTS
HOMEWORK
ACTIVITIES
  • Syllabus
  • assignment 1: Adds my first html and html_git
  • Chapter 1: Starbuzz
  • Activity 1: Hack a Website
  • W3 Schools: HTML
  • assignment 2: My Student Bio
  • Chapter 2: Head First Lounge
  • Activity 2: Modify your own site
  • W3 Schools: CSS
  • assignment 3: My Student Bio with CSS
  • Chapter 3: Tony's Journal
  • W3 Schools: CSS: Specificity
  • assignment 4: Understanding Relative Paths
  • Chapter 4: Starbuzz and Buzz
  • Activity 4: Reset CSS
  • W3 Schools: CSS Selectors
  • assignment 5: Buiding a Frame
  • Chapter 5: Head First Lounge, MyPod, test image, and trivia question
  • Activity 5: CSS Typography
  • Bash Terminal Commands Cheatshet
  • assignment 6: Float Layout Activity
  • Chapter 6: Head First Lounge and Head First Lounge
  • Activity 6: Bootstrap:Where is the CSS?
  • intro to console bash
  • assignment 7: CSS Positioning
  • Chapter 7: Head First Lounge and Head First Lounge
  • Assignment 6: Float Examples: Layout without FLOAT
  • assignment 8: Pseudo-Classes
  • Chapter 8: Tony's Journal
  • Assignment 6: Float Examples: Layout with FLOAT
  • assignment 9: Bootstrap Intro
  • Chapter 9: Head First Lounge and Head First Lounge
  • Slack: Community

  • assignment 10: Bootstrap Add-On
  • Chapter 10: Head First Lounge and Head First Lounge
  • Bootstrap

  • assignment 11: Bootstrap Quick Grid:Add-On
  • Chapter 11: Head First Lounge and Starbuzz
  • Google Fonts
  • assignment 12: Bootstrap Text-Layout
  • assignment 12: Bootstrap Form
  • Chapter 12: Starbuzz:
  • Main page
  • Blog page
  • assignment 13: Bootstrap Nav-Bar
  • assignment 13: Bootstrap Evolved
  • assignment 13: Sticky Footer
  • Chapter 13: Tony's Journal and Tony's Journal (Create one zip file)
  • assignment 14: Bootstrap Card-Layout
  • assignment 14: Bootstrap Card-Layout Evolved
  • Chapter 14: Contest form and Starbuzz: (Create one zip file)
  • Initial form
  • Styled form
  • Accessibility form
  • assignment 15: Media Queries
  • assignment 15: Media Queries Part 1
  • assignment 15: Media Queries Part 2
  • assignment 15: Media Queries Part 3
  • assignment 15: Media Queries Part 4
  • assignment 16: Basic Portfolio
  • assignment 16: Extra Credit: Responsive Portfolio