Designing a mobile application or website involves going through a set of steps to create an engaging web-based experience for a particular audience and content area in mind. Design typically involves:
- initial research on your audience and idea
- analysis of similar sites or applications
- settling on requirements / functionality
- mocking up through wireframes (schematics) or sketches
- iterative development (come up with a prototype, test, revisit design based on feedback)
Designing websites can make for exciting and challenging project-based learning since it involves synthesizing and integrating multimedia to bring content area to life. With project-based learning, individual or groups of students will work on a larger-scale initiative over the course of a semester, integrating course knowledge in an applied and real-world context. At the end of the semester, students have an artifact to demonstrate an integration of what they have learned, in addition to traditional assessment techniques.
The tools listed below can be accessed with an Internet connection.
There are several platforms that allow students to create actual websites easily. There are also programs to mock up mobile applications and more complex websites so that students can bring their ideas to life. Some uses include:
- Website that collects/synthesizes research conducted during the course
- Multimedia archive
- Mobile applications that translate complex, scholarly knowledge for non-specialists
Tools for Wireframing: creating sketches, schematics, or outlines of websites and apps AND
Tools for Mockups: illustrating how your website or app will look
|Google docs (free, NYU Home): provides ready-to-go templates for wireframing
Paper and pencil: easy and free way to indicate the basic parts of your site or app, and communicate the overall functionality. Optimal for first stages and quick drafting.
Color picker (free): assists in selecting web-friendly colors
|Powerpoint or Keynote or Google Presentation (desktop or cloud): since these presentation tools allow you to draw shapes, and insert text and images, you can create a mockup of a site or mobile app.
Balsamiq (free for classroom use): this wireframing software adds a nice hand drawn quality to sketches. Has a Google Drive add-on.
Mockingbird: this wireframing software is free for one project (with 10 pages; 2 users; no archived projects), and you can create wireframes very quickly by dragging and dropping.
Prototyping on Paper app (free, iPhone & Android): this mobile app allows you to prototype a mobile app and its functionality quickly by drawing frames by hand, taking a snapshot, and specifying touch points.
|Photoshop: if you are artistically inclined this application (available for free in NYU labs & in Virtual Computer Lab) allows you to mockup a website or mobile app in detail. Best for those with previous Photoshop experience.|
Tools for Websites: building a live website
|Google Sites (free): Easy, very portable, with robust permission options. Part of NYU’s Google Apps suite. Has a limited amount of templates
Weebly (free): has a nice array of templates and easy multimedia uploading
Wix (free): has a nice array of templates and easy multimedia uploading