Thu, Nov 02
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 8
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 08, 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
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.