During this course you will learn how to produce Web sites that are technically sound, aesthetically cohesive and appropriately structured.

This includes:

• Conducting research (interviews, surveys and competitor analysis) to devise a content strategy
• Using code (HTML, CSS and a dash of JavaScript) creatively to communicate and advocate
• Building technically sound, aesthetically cohesive and appropriately structured websites
• Understanding the WWW technical components and how they work (browsers, servers, HTTP, DNS, IP etc)
• Structuring content with HTML
• Styling information and interfaces with CSS
• Hosting a website on GitHub Pages
• Organising projects with Git
• Project management basics: listing and prioritising tasks, tracking and evaluating progress, getting things done

Plan

Term 2

When	In class	Homework	Blog
Wednesday 06.01	Welcome Workshop: HTML & CSS recap Project: Sharing is caring	Video tutorials of your CSS trick	Sharing is caring
Wednesday 13.01	Workshop: GitHub recap Tutorials on Sharing is caring Flexbox!	Peer-learning research: How does the WWW work?	JavaScript for cats
Wednesday 20.01	Peer-learning: How does the WWW work? Workshop: scroll-magic Tutorials on Sharing is caring	Sharing is caring: storyboard and copy	How does the WWW work?
Wednesday 27.01	WWWTF quiz Workshop: wireframing Wireframes critique	Sharing is caring: wireframes to HTML & CSS	Visualising information for advocacy
Wednesday 03.02	Formative presentations Tutorials on Sharing is caring	Sharing is caring: collect your research	Infographic stories
Week 6
Wednesday 17.02	Content strategy Copy-writing	Sharing is caring: copy-writing Peer-learning research: Visualising information for advocacy	Copywriting is Interface Design
Friday 26.02	Peer learning: Visualising information for advocacy Tutorials on Sharing is caring	Sharing is caring: brain-catching mock ups	Infographics, good and bad
Friday 04.03	Tutorials on Sharing is caring with Tor Team project: Our space	Prep formative	Interviewing humans
Friday 11.03	Formative video-presentations	Form teams for Our space Install MAMP Install WP locally	Interviewing your target audience

Term 3

When	In class	Homework	Blog
Friday 15.04	Recap Competitor analysis User interviews planning	Qualitative research: interviews Quantitative research: questionnaire	Our space interviews insights
Friday 22.04	Personas Content strategy	Peer learning research: GoodUI	Our space personas
Friday 29.04	Peer learning on GoodUI Workshop: typesetting	Moodbard: collect inspirations Wireframes	10 common typography mistakes
Friday 06.05	Front-end frameworks Prototyping with HTML&CSS Tutorials on Our space	Keep prototyping Prep formative	Web design myths
Tuesday 17.05	Formative presentations Workshop: hacking a Bootstrap template and publishing your work to GitHub Pages	Keep prototyping
Friday 20.05	Group tutorials on Our space Individual tutorials on Sharing is caring	Our space branding guidelines	Destroy the Web
Friday 27.05	User-testing Group tutorials on Our space Individual tutorials on Sharing is caring	Face2face user-testing Work on Our space
Friday 03.06	Tutorials on Our space and Sharing is caring: debugging clinic	Work on Our space Prep summative
Friday 10.06	Summative presentations	Summative hand-in	What have I learned?

Projects

Sharing is caring

This project is about using code (HTML, CSS and a dash of JavaScript) creatively to communicate and advocate a cause you care about.

All the project material is here.

Our space

On this team project you will design and build a website for our Ravensbourne Web Media degree course.

Starting from research (interviews with staff & students, competitor analysis) you will devise a content strategy and then build a technically sound, aesthetically cohesive and appropriately structured website.

All the project material is here.

Learning goals

By the end of this course, you will be able to:

1. Conduct research (interviews, surveys and competitor analysis) to devise a content strategy

• Use code (HTML, CSS and a dash of JavaScript) creatively to communicate and advocate
• Build technically sound, aesthetically cohesive and appropriately structured websites
• Understand how the WWW works (browsers, servers, HTTP, DNS, IP etc).
• Visualise your ideas and explore design solutions through paper and digital wireframes.
• Use HTML to structure Web content appropriately and accessibly.
• Use CSS to style Web pages cohesively and coherently, being informed by contemporary trends.
• Document your design and development process, from the exploration of ideas to their practical implementation. Including successes and failures.
• Communicate your ideas both technically and in an engaging way.
• Use the Git version-control system (through GitHub) to collaborate with your team and back-up your project files.

Rules of the road

• Be present. If you happen to be late (even by 5 minutes) or absent, make sure you email me about it before a session starts. We'll deduct 2% from your grade for each uncommunicated tardiness or absence (aka the 2% Tardiness Tax).

• Participate in class debates and workshops. We'll make sure that your ideas have space to be heard and that nobody makes you feel uncomfortable about sharing them.

• Present your work during formative and summative assessments. If you can't make it those days then you'll record your presentation and upload it to YouTube (or similar).

• Be responsible for what happens in class. Organise with your peers to get class information and material that you may have missed.

• Meet the deadlines. If you submit your work after a deadline, your grade will be capped at D- (bare pass).

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License