Thu, Nov 04

Frameworks and grids

Today's objectives

Understand the basics of grid systems and frameworks. Introduction to the Skeleton framework.

  • Review wireframe assignment
  • XD next steps
  • Grids
  • Frameworks and grid systems
  • Skeleton Framework
    • Getting started
    • Skeleton grid
    • Responsive images
    • Other features
  • Other tools: Figma, Sketch
  • Other frameworks: Bootstrap

Tasks

Explore the basics of the Skeleton framework.

Presentations

Grids

grids

Intro to the Skeleton framework

Intro to the Skeleton framework

Agenda

Agenda

Assignment(s)

Assignment 07
Grid system

Using your Assignment 5 as a starting point, reimplement it using the Skeleton framework. You can maintain the existing design, or make small changes. This is not meant to be a redesign project.

Important: Frameworks can be challenge. If you get stuck, upload your file anyway, as we will be workshopping in class. Also, ask and answer questions in the Slack #code-questions channel. (hint: it's a great way to boost your class participation mark...)

Name the assignment folder "assignment-07" and add a link to it from your main index page.

Due Wed, Nov 17, 6:00 PM.


Assignment 10: Written assignment
Topics

Choose a single topic from the list, and send it to me in an email. As topics are chosen, they will be removed from the list, so act now.

The intent of this assignment is to go out, try something new, and then report back to your colleagues on what you learned. It's not to become expert in any of these types of technologies or tasks. Some of these tasks are more technical than others; I'm happy to steer you towards a topic that piques your interest.

Write a short (500 words or so) evaluation of the topic or technology, and prepare a short in-class presentation (3-4 min) to give in class.

Topics

Note - any topics that look like this (strikethrough) and initials RC are no longer available.

General
  • Accessibility: Perform an accessibility review based on the WCAG W3C Web Content Accessibility Guidelines (WCAG) 2.1 standard. Research the main types of accessibility concerns, and then evaluate a web site based on those criteria.
  • Choose a web prototyping tool, either Figma NS or Sketch. Re-do your Assignment 6 wireframe in it (as a test) and write a short (500 words or so) review of the application, comparing strengths and weaknesses as opposed to XD.
Web technologies
  • Write a short introduction to one of the following technologies from the point of view of someone just getting started in web development. You will need to create a small test project as part of your review - it is likely to be just a very simple "proof of concept."
    • Swift Playgrounds - build a simple iPad, iPhone or Mac app
    • Reveal.js - build and customize a presentation.
    • PHP - understand how PHP code is used to build websites. PY
    • D3.js - build a simple data visiualziation. JZ
    • Node.js - build a basic app (pretty technical).
    • SVG - integrate vector graphics. KG
    • CSS Animation - motion graphics with CSS. CS
    • WebGL - for things like games built in Unity.
Content management systems:

Choose a content management system, and install and test it. (note: this is a technically more advanced topic; you should be comfortable with the technical aspects of web development). I can help you if you need access to advanced features (like databases) on the server.

You can choose your own, or pick from this list:

  1. MODX
  2. WordPress
  3. ProcessWire
  4. Craft CMS

Software as a service web-building tools:
  • Squarespace - build a simple website but also customize it with some CSS code. ZM
  • GitHub pages - use the Liquid templating language to build and deploy a site.
  • Shopify - build a simple webstore but also customize it with HTML/CSS.PC
  • Webflow - build a simple website but also customize it with some CSS code. JS
  • Glitch - build a simple web application. MK
  • Wordpress.com (the hosted version) - build a simple site and customize it (if possible)

Topic due: Friday Nov. 5, 6:00 PM.

Rough draft due: Wed Nov 24, 6:00 PM.

Submission, final version of your report: Dec 8, 6:00 PM.

Presentation (5 min max):Dec 15, in class. Date change

Samples

Here you will find any sample files or code samples you need for class.

1: Skeleton basics

See the Pen Untitled by Robert Currie (@rcurrie) on CodePen.



2: Skeleton responsive images

See the Pen Responsive images test by Robert Currie (@rcurrie) on CodePen.



3: CSS "sketching"

See the Pen CSS Sketching by Robert Currie (@rcurrie) on CodePen.





Tutorials

Adobe XD

Adobe XD basics
https://www.adobe.com/ca/products/xd/learn/get-started-xd-design.html
Adobe XD prototyping
https://www.adobe.com/ca/products/xd/learn/get-started-xd-prototype.html
Adobe UI Kits
https://www.adobe.com/ca/products/xd/features/ui-kits.html

Download UI kits for big brands, quick sketches and everything in-between

Skeleton

Basics
https://youtu.be/NUe-ANDvIjg
Grids
https://youtu.be/Vh_DbHWM134

Resources

Planning and prototyping

Paper prototyping
https://uxplanet.org/the-magic-of-paper-prototyping-51693eac6bc3

A low-tech way to develop and test ideas

Wireframe Sketching
https://www.nngroup.com/articles/draw-wireframe-even-if-you-cant-draw/
Design process: the "double diamond"
https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-design-councils-evolved-double-diamond

A general approach for design of any kind.

CSS Grids and layouts

Basic CSS layouts
https://www.w3schools.com/css/css_templates.asp
Modern CSS Layout
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

Skeleton and other frameworks

Download Skeleton
http://getskeleton.com
Link to Skeleton via a CDN (Content Delivery Network)
https://cdnjs.com/libraries/skeleton
Bootstrap
https://getbootstrap.com

A popular, powerful but (somewhat) more complex framework.

Planning and prototyping

Site planning process
https://www.printmag.com/editors-picks/phases-of-the-web-design-process/

Tools

Adobe XD
Part of the CC suite.
Figma
A (very good) web-based prototyping tool
Sketch
The first prototyping tool to be widely adopted and still one of the most popular

Professional practice

Being familiar with a range of planning and prototyping tools is vital. Don't forget about paper, whiteboards and other low-tech tools. Nothing is as immediate as picking up a pen and sketching.

Need help?

Contact me - Slack is best.


Robert Currie
This page was last updated at 2021-12-16 08:06.