Thu, Nov 07
Frameworks and grids
Today's objectives!
Understand the basics of grid systems and frameworks. Introduction to the Skeleton framework.
- Review assignment
- Grids
- Frameworks and grid systems
- Skeleton Framework
- Getting started
- Skeleton grid
- Responsive images
- Other features
- Other tools: XD, Sketch
- Other frameworks: Bootstrap
Tasks
Explore the basics of the Skeleton framework.
Presentations
Assignment(s)
Assignment 08
Grid system
Using your Minitel assignment 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-08" and add a link to it from your main index page.
Due Wed, Nov 20, 6:00 PM.
Assignment 9
Citizen science app step 1: Create personas
Using Figma's Figjam, or an other tool, develop three proto-personas to inform the user experience of an application, as described below.
This application will be designed to let users find and report an aquatic invasive species, the European Green Crab (Carcinus maenas). Learn more here: Aquatic invasive species
You will design this app later. The first step is to create some "personas" or imagined users to help focus your design approach. Do some preliminary reading (links above and others you may find) but at this point no design/wireframe/code is necessary.
Create three "lightweight" or "proto" personas - imagined users of your app. These can be in a simple 1-3 page document or seperate FigmaJam doc you share with me. Find out more here: 3 Persona Types.
Keep your proto-personas simple. For each proto-persona, focus on their attitude to the task, their level of technical sophistication, the context in which they will be using the app, and other core attributes. "Goals" vs. "obstacles" is another useful approach. Details of their personality, hobbies, etc. are not needed.If you draw inspiration from a particular source, cite it.
Phase 1: Due Wed, Nov 20, 6:00 PM. Send me a link using the Figma "Share" option before class or provide any other notes/resources. We will review these on screen, in class.
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
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
- 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 low-tech way to develop and test ideas
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.
A good list of layout frameworks, from lightweight, minimal ones to do-everything monsters.
Planning and prototyping
- Site planning process
- https://www.printmag.com/editors-picks/phases-of-the-web-design-process/
Tools
- Figma
- A (very good) web-based prototyping tool
- Adobe XD
- Part of the CC suite.
- Sketch
- The first prototyping tool to be widely adopted and still one of the most popular
Tasks for next class
Make sure to prepare for each online lecture. If you have questions about code, have your (non-working) code ready to share in class.
For next class:
- Read and be ready to answer questions on the three articles in the UX Principles section. Watch Slack for questions.
- Test out Figma's "FigJam" app. It shares some characteristics with Figma but is its own app and has a distinct feature set.
- Review how to create a Google Form for collecting data for the experience diary assignment.
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.