Thu, Dec 07
Responsive design
Today's objectives
An introductory look at more advanced web technologies - JavaScript, server-side programming, and content management systems.
- Client-side scripting: JavaScript
- jQuery
- jQuery example
- JavaScript tools
- Server-side scripting: PHP
- Basics of PHP
- Includes
- Variables
- Storing data
- Content management systems
- CMS example
Reading
Presentations
Hamburger menu
Skeleton
Responsive design
Agenda
Assignment
Assignment 9: Final submission
Citizen science: Wireframe an App
Present your final wireframe for the invasive species app.
Your wireframe at this point should focus on demonstrating the flow of actions needed to accomplish the task, and what features the app needs. Treat any wireframes as explorations of flow, not detailed layouts. Detailed visual design is not needed for this assignment.
Make sure your wireframe is well-constructed, with buttons that work, etc. Function and flow is more important than detailed visual design. Make sure to test as you go. A major part of the wire-framing process is for the designer to understand and fix problems with the navigation and flow of the app. The intent of the app is to communicate the concept to non-designers.
You will need to make decisions about features, etc., as part of the process.
As this will be a phone app, choose a phone model/size an design to that. It does not need to be "responsive" in terms of working on different screen sizes or orientations. Figma's preview on device function is good for testing.
Your wireframe at this point should demonstrate your approach to the app - what it does, how it works, and what features you have chosen to include or exclude. A wireframe is a tool both for prototyping - testing an idea - and communicating your idea. Make sure every screen and UI element is identifiable. Detailed UI design - positioning, style, colours, etc - are not needed and should not be emphasized.
Due for in-class presentation Thu, Dec 14. Update your submission for assignment 11, and make 100% sure the link from your table of contents page points to your current version.
You don't need create any presentation materials - you will simply demonstrate your wireframe to the class, clearly and confidently.
Resources
1: Hamburger menu
See the Pen W3Schools Hamburger by Robert Currie (@rcurrie) on CodePen.
2: Skeleton basics review
See the Pen Untitled by Robert Currie (@rcurrie) on CodePen.
3: Skeleton responsive images review
See the Pen Responsive images test by Robert Currie (@rcurrie) on CodePen.
4: CSS "sketching" review
See the Pen CSS Sketching by Robert Currie (@rcurrie) on CodePen.
Samples
Need help?
Contact me - Slack is best.