Thu, Oct 26
Forms and frameworks
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
Tasks
Explore the basics of the Skeleton framework.
Presentations
Planning and prototyping
Grids
Intro to the Skeleton framework
File paths
Agenda
Preparation
Remember the readings assigned last class.
Tutorials
Resources
Design interfaces with standard Apple User Interface elements
Design interfaces with Google's standard UI elements
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
Planning and prototyping
- Site planning process
- https://www.printmag.com/editors-picks/phases-of-the-web-design-process/
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.
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
Assignment 7
Responsive design
Using the Skeleton framework (or another framework such as Bootstrap) develop a simple responsive site based on the theme and content below. This is intended as a technical exercise so function and correctness is more important than visual design.
Expect to build 3-5 pages, and make sure you are using valid CSS and HTML. You must use all the text in the included file, and as many of the provided images as you feel are appropriate. Text, navigation and images should all be responsive. You can add content - text/headings/captions/etc. - if you choose. Any images you use should be public domain or creative commons licensed.
Download the assets for this assignment here.
Topic: Au revoir Minitel
Minitel was a French digital telecommunications system, launched in the 1970s and popular in the 1980s and 90s, and was shut down 10 years ago. The site you develop should give the user a good overview of the system and how it was used.
This site should be functional on both desktop-sized screens and on phones. Use your browser's mobile phone simulator to test the most challenging scenario - a small phone in vertical orientation.
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 #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 01, 6:00 PM.
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.