Design For Emerging Interfaces Class Schedule
MART 4350/5350
M,W 4:00 -5:50
Zoom link for class will be emailed to enrolled students
Lauren Addario
New Mexico Highlands University | Spring 2021
Office Hours M, W 12:30-1:30; T 12:30-2:00 & by appointment
Office Location: Zoom link will be emailed to students separately
Email: lladdario@nmhu.edu
Phone: 505-454-3239
January 20 – Syllabus review, review of academic policies, Title IX, & Class schedule.
Open Brackets, How do you use the Internet? What are the responsibilities of web hosting services?
Homework: Read this & Define these vocabulary words. Don’t look them up. This is just an assessment to see what you already know. email your answers to me before the start of class on January 25th.
January 25– Vocabulary review Here’s the key
Lecture Overview of current stats, interface design principles, responsive design, Universal Design and accessibility, UI/UX design, visual hierarchy. & information architecture Organizing your content. Let’s look at the content organization from a recent project for the National Atomic Testing Museum.
Homework: read this for a better understanding of UX /UI principles.
https://www.webdesignerdepot.com/2012/06/ui-vs-ux-whats-the-difference/
Assignment 1, Find 5 examples of good and 5 examples of bad interface design. Based on the lecture, you must be able to articulate why the designs are good/bad based on the criteria above.
*hint* Check responsive capabilities, visual hierarchy, accessibility, UX and information architecture, balance, Unity and be prepared to talk about at least three of the principles of good web design on Wednesday, 1/27. Post your sites in the chat at the start of next class.
January 27-Let’s see what you found. Discussion about interface design
Feb 1-Here are some examples of interface/web design – Yokai site,NMMoA site, NMHM site, Show examples of bad interface design.
Then, let’s take a look at web page history with the wayback machine
Introduce html, the basics. https://www.w3schools.com/html/default.asp
Review elements, attributes, headings, paragraphs, styles in class. html exercises until the end of class.
Homework– Take this content and turn it into a web page using the html lessons from today’s class.
February 3 – Homework review. Introduction to css HTML Style Element / Internal CSS, exercises in class.
properties list: https://www.w3schools.com/cssref/
other selectors: https://www.w3schools.com/cssref/css_selectors.asp
CSS Link Styling https://www.w3schools.com/css/css_link.asp
- a:link – a normal, unvisited link
- a:visited – a link the user has visited
- a:hover – a link when the user mouses over it
- a:active – a link the moment it is clicked
Homework: Style your html document using an external css style sheet & remove all the internal styling from your html document.
February 8- Deeper dive into accessibility standards
In class exercise (20 minutes): In your cupcakes file, change background-color, text color, font size, font type, use the contrast checker to ensure accessibility. Then, do these exercises on html accessibility.
Lecture Image prep for the web Exercise: prep these images for the web.
In class exercise #1 batch resizing and image prep.
Homework: Using your existing content, add two additional pages to your cupcakes site. Batch resize images linked above.
February 10 – Understanding lists in html so you can Insert Navigation and create additional html pages.
To add additional html pages to your site, simply open your folder in brackets>file>new>nameyourpage.html
Review HTML and CSS More tools for you!, IDs, Classes, HTML/CSS layout, using the css float property.
Available Google Fonts are located here
Insert Google Fonts with the Google fonts api.
Homework: here is your content: https://en.wikipedia.org/wiki/Joy_Harjo
Build a site dedicated to Joy Harjo. Include a header, main navigation with at least two links to additional pages that have content and link back to the home page.
Also Read this https://css-tricks.com/the-difference-between-id-and-class/ and this http://www.htmldog.com/guides/css/intermediate/classid/
February 15–Cupcake files Due. Let’s review them. Your Cupcakes file should have an index page, two additional .html pages with content, a linked css stylesheet, resized images with alt text, and the site should be accessible using the proper tags, H1-H6 and paragraph tags for text, color contrast should be sufficient to meet WCAG guidelines.
Review html, css, IDs, classes. Get help from me with your poetry sites. A template is linked here . This should get you started. A recording of today’s class is linked here
NAVIGATION RESOURCES: buttons: https://www.w3schools.com/css/css3_buttons.asp
vertical/horizontal nav bar: https://www.w3schools.com/css/css_navbar.asp
dropdown nav: https://www.w3schools.com/css/css_dropdowns.asp
fixed nav: https://www.w3schools.com/howto/howto_css_fixed_menu.asp
Navigation Design Patterns vertical, horizontal, continuous scrolling, cards, and tabs are just some of the navigation design patterns used in web pages. Think about websites that you visit. What patterns are they using? Review the links below to see examples of navigation patterns:
https://www.awwwards.com/4-creative-navigation-ui-patterns-for-great-ux.html
http://ui-patterns.com/patterns/navigation/list
February 17—Critique Poetry sites.
February 22 —lecture on SVGs. Introduction to svg files Remainder of class: Create one .svg file and insert into an .html page. Homework: Create a comic to tell a story using at least 3 svg images. Due Wednesday at the start of class. Here’s a template file for you to get started. If you would like to experiment with manipulating inline SVGs use this example.
February 24—Review homework. Introduce audio/video with youtube, mp4, mp3
Responsive design using css and columns Review of margins and padding, the css box layout
Homework 4: Create a web site for a band (use wikipedia/band site for content). Homework must include: A home page and at least two interior pages, an .svg file, a video or song, all the required head elements in the head tag, alt text for images, accessible color contrast.
March 1-Critique band websites. Work on band site after today’s critique. Get help from me on any other sites you want to resubmit before midterms.
Your midterm project is linked here. Midterm project is due (email your zipped folder) before the start of class on Wednesday, March 10 for critique.
March 3 – Critique Band websites and SVG comic strips. Work on your Band websites and you SVGs applying the changes we discussed in critique. Have them completed and emailed to me before the start of class on Monday, March 8.
Here’s your midterm exam. Complete and email to me by the start of class on Wednesday, March 10th.
March 8 –One more time! SVGs and Bands Sites fixed and ready to show.
March 10 – In class midterm critique & written exam due before the start of class
March 15- SPRING BREAK
March 17- SPRING BREAK
March 22 ——Picking a CMS (Wix vs Squarespace vs WordPress, etc). Lecture & Guest speaker, Chris Romero. Chris will present his most recent web and interface projects: Music from Angel Fire, MoIFA, NMHM, OnCell app, Ole website, and discuss what it means to design UI and UX for a client. Designing for mobile, tablet, and desktop on the web, accessibility, working with a client to meet their needs yet not compromising design. He will also walk you through setting up your WordPress sites.
Homework: Use assignments and content you have from your classes to create a portfolio site using a free WordPress Template.
Student example/portfolio site
https://gabriellasmithportfolio.wordpress.com/
March 24– Workday on WordPress sites.
Navigation must include: Home Page, About Page, Contact Page, Link to Resume, a link to your area(s) of specialty (photography, graphic design , fine art, projects).
March 29 – Critique WordPress portfolio sites
March 31- Introduction to Site Map and Wireframing. Lecture, Designing for user experience
April 5 – Wireframing Basics
Wireframing tool
Sample homepage for wireframe
Homework, create a home page and an interior page wireframe for your portfolio site.
April 7-Critique wireframes. Lecture Introduce UI/UX
Homework: You have been asked to redesign the interface for this website https://www.lasvegasnm.com/ Create 3 distinct style tiles for your website redesign. The style tiles should include Header text h1 -h6, paragraph text, color palette applied, link color, hover color, active color and any other design elements (a splash photo) or a grid of photos. Homework: Create 3 different style tiles to show in class on Monday.
April 12 – Critique Day for style tiles. The class will vote on the best style tile for your UI/UX design. You will take that style tile and develop it in Photoshop for mobile, tablet, and desktop. Let’s look at our column layouts and grid layouts get a basic structure down. Create a home page and one interior page for each layout. You should have 6 layouts to show on Wednesday.
April 14–critique layout designs. Homework- complete style tiles and mock up of home page and an interior page in Photoshop. Remember, you will need to design for desktop, mobile, and tablet.
April 19- Introduction to Adobe XD.Take your designs from Photoshop and create a functional prototype. Homework: Create a functional prototype of a home page and an interior page. Remember, you will need to design for desktop, mobile, and tablet.
April 21-Critique and feedback on your prototype. Discussion and demo, handing a prototype off to a developer. Accessibility and awareness take this quiz not for a grade, just to increase your accessibility awareness.
April 26— FINAL PROJECT- Lecture 3D interfaces, WEB VR, intro to A-Frame. Discussion about VR, AR, physical computing, Design a VR user experience using A-Frame. Look at these examples
April 28- More tools in A-Frame. Work on final VR projects during today’s Zoom. I’ll be available for help, Take home final exam is linked here
May 3- Let’s look at your projects so far. & we’ll learn how to screen capture your work.
May 5 – Get feedback on your project before the final next Wednesday!
Final Critique Wednesday, May 12 11:00-2:00 pm