Web5 - Social Media and Personal Projects

case study

Case studies are an excellent tool for designers to show the depth of engagement in the design process, and for potential employers / universities to better appreciate the thinking that has gone into a design.

Here is a short example from Mihaela: CSU child logo

And here are some excellent resources on case studies:

Case Study evaluation

Your case studies should including the following:

  • project title
  • intro (design problem, project goal, challenges)
  • process (how you overcame the challenges ...or not)
  • outcome (client benefits & feedback)
  • images with captions?
  • plus:
    • infographics?
    • animations (screen captures?)
    • videos?

elements of case study

You will create:

  • a web case study You can choose from:
    • a web project you have already completed
    • the client web project from web 5
    • a new web project or something done outside of class

web case study suggested process

  • select project, brainstorm all ideas / thoughts / feelings & info
  • define your narrative, choose a an image (or 2) and write a sentence for the:
    • beginning (problem or challenge)
    • middle (process or how you solved the problem)
    • denouement (or the ultimate outcome, ideally with data or feedback)
  • publish your case study to get feedback
  • make improvements based on feedback

some selected case studies

SFTP Setup Info

Note: ######## = your student id

    "name": "micromedia",
    "host": "firstname##.micromediaweb.com",
    "protocol": "sftp",
    "port": 22,
    "username": "ftp########",
    "password": "password123",
    "remotePath": "/var/www/vhosts/firstname##.micromediaweb.com/httpdocs",
    "uploadOnSave": true,
    "ignore": [

In class Demo

Week 1 - Anatomy of a website

We will break down different parts of a website and this is our workflow this semester:

Week 2 - Structuring a page

We will look at how to break down requirements and structure a page by proper semantic tags and also responsive styling by thinking mobile first.

Week 3 - Clients

We will look at how to find clients, what to ask, how to ask it and practice structuring html with your portfolio template.


Week 1 - Introduction page & Social Media Posts

For next week, you will create a simple (single) landing page as an introduction about yourself (for Natalia's class) and three (3) social media posts on 3 different projects you worked on.

Do not overcomplicate things for your landing page. Keep it simple and responsive (mobile first). For the social media posts, you should gather some material and / or screenshots (You will need them for your personal portfolio later in the semester). Keep your resources as high resolution as possible, we will revisit resizing for web again later.

Remember, most important thing is to be creative about your presentation!

Week 2 - Portfolio template structure and ideas

For next week, bring ideas for your portfolio template: how do you want one of your portfolio template pages to look? Bring material and ideas for structuring a template in class.


Project 1 - Social Media Week 1-15

Project 2 - Personal Web Portfolio Week 2-12

Project 3 - Client Web Project Week 3-13

Project 4 - Case Study Week 12-15