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

About presentations.

Presentations

Hamburger menu

Hamburger menu

Skeleton

skeleton

Responsive design

responsive design

Agenda

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.



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.


Robert Currie
This page was last updated at 2023-12-12 12:46.