web design

Page contents


What?

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)
  • evaluation

 Why?

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.

 


 Where?

The tools listed below can be accessed with an Internet connection.


 How?

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?

Tools for Wireframing: creating sketches, schematics, or outlines of websites and apps AND

Tools for Mockups:  illustrating how your website or app will look

Basic Intermediate Advanced
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

Basic Intermediate Advanced
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

WordPress (free hosting through NYU Web Publishing): WordPress offers flexible templates and is optimal for sites with multiple contributors who want to leverage the blogging functionality.  Part of the NYU Web publishing service (training offered).  Has a higher learning curve for set up and maintenance, but allows for customization with for rich library of plugins and coding. Custom site development (requires own server space, at cost and development time): this route requires coding knowledge (ex. HTML, CSS, Javascript).  Allows for maximum customization.