-
programme schedule
-
A warm welcome to you all.
This is your first week and GREFest is our festival of skills to welcome you to the start of the university year. Whether you’re studying from home or staying with us on campus, you’ll be able to participate in our interactive sessions for GREFest 2023!
Check out the GREFest webpage for more info.
Explore all the workshops on offer and sign up to join any that interest you. Most sessions will be delivered in person at one of our campuses; all will be streamed live over Teams.
-
Programme welcome
Our first meeting will be online ~ we'll do introductions and discuss what's ahead. We will be using Teams and you will receive the link to our session ahead of time via email.
- David Watson
-
programme lead & your personal tutor
delivering: Design for Web Content • Content Management • Social Media & SEO • Major Project
landscape architect, building websites since 1996, runs CADTutor (community site for AutoCAD users), teaching this programme since 2003, web standards advocate & enthusiastic fellwalker
- Prisca Schmarsow
-
module lead: Applied Art for the Web
delivering: Applied Art for the Web • Content Management • Major Project
part web designer part web design teacher, building sites since 2000, teaching design since 2001, design tutor on this programme since 2011, firm believer in inclusive design.
- Fabiana Lassandro
-
workshop lead
module lead: Social Media and SEO
Front-End Developer at Ticketmaster, passionate about UX/UI, Accessibility and Web Sustainability; building inclusive experiences that align with the principle of universality at the core of the Web & and alumnus ツ
- Stephanie (Steph) Troeth
-
workshop lead
User Experience Design: research
product strategist and customer experience researcher, formerly head of research at Clearleft, specialist tutor on this programme since 2015, see her personal site for more.
- Chris How
-
workshop lead
User Experience Design: design
UX designer and strategist with a background in film production, head of experience design Clearleft, specialist tutor on this programme since 2018, see his personal site for more.
- online session
- 14:00-16:00 online via Teams
-
Workshop
The web design process, tools and hosting
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- social \_(ツ)_/ optional
- from 17:00 nearby venue
session location: 10 Stockwell St, London SE10 9BD
-
Workshop (am)
The art of postgraduate learning
Workshop (pm)
Introduction to WordPress publishing
- am session
- 10:00-13:00 11_2016
- pm session
- 14:00-17:00 11_2014
- social \_(ツ)_/ optional
- from 17:00 nearby venue
session location: 10 Stockwell St, London SE10 9BD
-
Design for Web Content
What is web design?
Design for Web Content
Web design, principles and philosophies
- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Design for Web Content
HTML - The structural layer
Design for Web Content
Getting organised - files and folders
- am session
- 10:00-13:00 online via Teams
- pm session
- 14:00-17:00 online via Teams
session change: due to strikes: rail, overground and underground services affected
-
Design for Web Content
CSS - The presentation layer
Applied Art for the Web
Principles of graphic design
- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Design for Web Content
Typography with CSS
Applied Art for the Web
Typography for the web
- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Design for Web Content
Images and colour with CSS
Applied Art for the Web
Colour
- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Design for Web Content
Advanced CSS selectors
Applied Art for the Web
Images for the web
- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Major Project
Concept
(full-day workshop)- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
✱ deadline: Nov 17th 2023 by 4pm
Three designed objects [Design for Web Content]Design for Web Content
emergency catchup session
Applied Art for the Web
emergency catchup session
- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Design for Web Content
Responsive web design
Applied Art for the Web
Adaptive design planning
- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
User Experience
Research
- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
✱ deadline: Dec 8th 2023 by 4pm
Typesetting Literature [Applied Art for the Web]Design for Web Content
MP project concepts
(informal presentations)feedback, quiz & recaps
- am session
- 10:00-13:00 online
- pm session
- 14:00-17:00 online
session moved online due to train strikes
-
User Experience
Design
- am session
- 10:00-13:00 11_2014
- pm session
- 15:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Winter break
-
✱ deadline: Jan 12th 2024
UX Design [User Experience Design]Self Study
-
Content Management
The behaviour layer - JavaScript 1
Applied Art for the Web
Vector graphics & icon design
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Major Project
Crit #1:
Business & Cultural Context
+ Commodity- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
✱ deadline: Feb 2nd 2023 by 4pm
Small Business website [Design for Web Content]Content Management
The behaviour layer - JavaScript 2
Applied Art for the Web
Brand Design
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Content Management
Content strategy
Applied Art for the Web
Interface design
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Content Management
The .htaccess file and other oddities
Applied Art for the Web
Design for UX and accessibility
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Content Management
PHP for site modularity
Content Management
Accessibility
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Major Project
Crit #2:
Delight- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
✱ deadline: Mar 8th 2024 by 4pm
Seminar/article [Content Management]Content Management
PHP and MySQL for dynamic content
Content Management
CMSs with PHP and MySQL
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Social Media and SEO
SEO, SEM and site promotion
Social Media and SEO
Social Media
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
✱ deadline: Mar 22nd 2024 by 4pm
Film Promotion [Applied Art for the Web]Social Media and SEO
Site analytics and revenue generation
Social Media and SEO
Sustainability
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Content Management
WordPress theme design
- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Major Project
Crit #3:
Firmness- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
Spring break
-
✱ deadline: Apr 19th 2024 by 4pm
Social Media & SEO [Social Media & SEO]Self Study
-
Major Project
Crit #4:
Prototype- am session
- 10:00-13:00 11_2014
- pm session
- 14:00-17:00 11_2014
- tutorial/booster session
- 17:00-18:00 11_2014
session location: 10 Stockwell St, London SE10 9BD
-
✱ deadline: May 10th 2024 by 4pm
Small business website (revisited) [Design for web content]Portfolio Workshop and Mock Interviews
- am session
- 10:00-13:00 11_2007
- pm session
- 14:00-17:00 11_2007 & 11_2004
session location: 10 Stockwell St, London SE10 9BD
-
Major Project
work on the Major Project continues to mid September
Summer sessions
Online via Teams, Wednesdays 2:30pm - 3:30pm (UK time), every 2 weeks.
deadlines
# Formative submissions: these come in the middle of projects. They are not graded, they are designed to guide your learning and to provide you with feedback on work in progress.
# Summative submissions: these come at the end of a project. They are graded and the marks go towards your final MA award.- November
-
- MP concept: workshop
- Design for Web Content: Three designed objects
- December
-
- Applied Art for the Web: Typesetting literature
- MP concept: informal presentation
- January
-
- User Experience Design: UX Design
- MP Crit #1: Business, Cultural Context, and Commodity
- February
-
- Design for Web Content: Small business website
- MP Crit #2: Delight
- March
-
- Content Management: Seminar/article
- Applied Art for the Web: Film Promotion
- April
-
- MP Crit #3: Firmness
- Social Media & SEO: Social Media & SEO
- May
-
- MP crit #4: Prototype
- Content Management: Small business website, revisited
-
-
our main sites
- websitearchitecture.co.uk
Our main website: the official documentation, including criteria and requirements for project work and submissions. You'll find the reading recommendations, official descriptions as well as supporting materials for sessions on most modules.
This site is David's - any feedback or issues, please email David. - designforweb.org
This site is a Handbook for aspiring webdesigners and will be the guide to the topics on the design and major project modules.
This site is Prisca's - any feedback or issues, please email Prisca.
coms & teamwork
- etiquette
All web work entails plenty of collaboration ~ let's outline a few rules and guidelines to make sure that our team work becomes both fun and productive.
- design4web - Slack
A popular coms tools for web teams, we've been using Slack for our day-to-day communication as well as important updates and team work for a number of years now. Members are current and former students, teachers and invited guests only.
This is our main communications channel (read our group agreement). If you have any questions, or need help with getting started, please let us know (email Prisca).
- design4web - Whimsical
This is a handy set of tools which we can use for notes, flowcharts, wireframes and more. We have an educational account with full access. If you'd like to join us, please let us know (email Prisca).
You'll get an invite to our shared workspace which has proven to be a very effective tool for collaboration, to give and receive feedback and discuss details.
- design4web - Miro
While Whimsical was more popular last year, Miro offers similar tools and again we have an educational account. We're including it here in case you know and want to use it, or if you'd just like to try it out. Do get in touch (email Prisca) to get an invite.
weekly learning cycle
Please click image to view larger size.
- websitearchitecture.co.uk
-
These links will lead to the university's intranet where you'll have to log in to gain access. This is only accessible to you as currently enrolled students ~ and yes, sadly you might have to log in more than once ¯\_(ツ)_/¯
- moodle our programme's main page on Moodle, inc. module overview.
- MS Teams online sessions, team work and 1-2-1 tutorials.
Module shortcuts
-
Coursework pages
As part of your course work, we will ask you to create an index page to feature links to your project work. The design and presentation are entirely up to you ~ the aim is to share the links to your ongoing work, submit your final sites and for you to have an online playground - a webpage design which you can keep updating over the course of the year.
-
- Angela
- angelatoxyg.uk
- Anish
- anisht.uk
- Assurance
- strawberryblue.uk
- Bukie
- bukie.co.uk
- Charlie
- charlotteblogs.uk
- Godwin ⋯ pt1
- mbadesign.blog
- Jay
- greenwich.jaymewada.me
- Jime
- jimenaortiz.co.uk
- Joseph
- talkpearce.uk
- Katrina
- kdesignco.uk
- Latifa
- mehndibytifa.com
- Long
- longvt.uk
- Meet
- meetshah.me
- Pavani
- pavanidabbeta.uk
- Sara
- sc2g.uk
- Shahraiz
- shahraiz.uk
- Shiva
- shivabhandekar.uk
- Tony ⋯ pt2
- ajm1961.uk
-
-
Get support.
The year ahead will be exciting and bring its challenges. Maybe all will go swimmingly and you'll happily immerse yourself in your studies. But maybe you're struggling with some aspects.
Help is at hand ~ please know that you're always welcome to talk to us. In fact, we'd very much encourage you to do so. We are your personal tutors as well as your academic tutors. However, we can only help if you come and talk to us — in person or online. We won't mind ツ
email David • email PriscaAdditionally, there are various ways you can get help through the university. We have a wide range of student services, so please use them if you need them.
General
- Digital Student Centre
- Student services
- International student advice service
- Extenuating circumstances
- Withdrawal and interruption of studies
Health and wellbeing
- Report and Support
- Spectrum.Life - 24/7 support
- Student support
- Wellbeing self-help guides
- Student wellbeing self-referral
Academic
- Academic skills hub
- Academic skills support
- Library guide: film, design and media
- Library account and search
- Book a study space in the library
- Writing with authority and avoiding plagiarism
- Guidance on the use of AI
Information technology
- IT booklet for students
- Microsoft 365 (Office)
- Adobe Creative Cloud
- LinkedIn Learning
- Loan a LapSafe laptop
Finance
Employment and careers
- Careers service
- Target Connect: employability portal
- Student Circus: visa sponsored jobs
- Services for current students
- Resources for career planning
- Infohub: book a 1-2-1 appointment
- Generator: entrepreneurial support
- If You Could: jobs in the creative industries
Independent advice and support
The links above will help direct you to some of the key services provided by the university. For other services and latest news, please login to the student portal.
-
Materials & communications
- Welcome meeting slides
- Learning to learn
- Website Architecture
- Our Slack group: design4web • our group agreement
Core tools you will need
- Firefox — web browser, developer edition (Win/MacOS/Linux)
- Visual Studio Code — popular free code editor (Win/MacOS/Linux)
- Brackets — open source code editor (Win/MacOS/Linux)
- Filezilla — open source FTP client (Win/MacOS/Linux)
- Adobe CC — you are provided with a subscription to Adobe CC
- LinkedIn Learning — you get free access to LinkedIn Learning
Helpers to get you started
- Web hosting details
- Redirecting domain requests to HTTPS
- Setting up your FTP account
- Connecting to the server using FileZilla
- Show file name extensions
- File and folder organisation
- Your coursework homepage
- Browsers and dev tools
- Installing WordPress on your domain
Online references you should use
- MDN Web Docs
- Codrops CSS Reference
- Mozilla Developer (YouTube channel)
- Kevin Powell (YouTube channel)
Polls
As part of today's induction, we are conducting a poll on browsers, search engines and social media. All intended to allow us to get to know each other, and for you to make yourself aware of your own habits at this point. Much will change over the coming weeks and months ツ
Browsing habits
Free e-books you should read
- Resilient Web Design by Jeremy Keith
- Designing for the Web by Mark Boulton
- The Shape of Design by Frank Chimero
- Web Style Guide by Patrick J. Lynch & Sarah Horton
Online magazines you should subscribe to
Conference talks you must watch
- Ethan Marcotte at New Adventures 2019
- Jeremy Keith at New Adventures 2019
-
-
A List Apart
A List Apart (ISSN: 1534-0295) explores the design, development, and meaning of web content, with a special focus on web standards and best practices. quoted from website
-
Practical Typography
This book is about making you a better typographer. [...] Typography matters because it helps conserve the most valuable resource you have as a writer—reader attention. quoted from website
-
Inclusive Design Principles
These Inclusive Design Principles are about putting people first. It's about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really. quoted from website
-
The shape of design Frank Chimero
Design gains value as it moves from hand to hand; context to context; need to need. If all of this movement harmonizes, the work gains a life of its own, and turns into a shared experience that enhances life and inches the world closer to its full potential. quoted from book introduction
-
Art direction for the web Andy Clarke
With Art Direction for the Web, Andy provides a framework for harnessing the web’s potential. With historical context and real-life examples, Andy inspires each of us to be more purposeful about the choices we make. Trent Walton, co-founder of Paravel Inc.
-
developer.mozilla.org
Resources for developers, by developers
formerly MDN, MDN Web Docs launched by Mozilla around 2005 -
Web Accessibility Initiative
Making the Web Accessible. Strategies, standards, and supporting resources to help you make the Web more accessible to people with disabilities.
-
codrops: CSS Reference
An extensive CSS reference with all the important properties and info to learn CSS from the basics.
-
PHP
Home to PHP documentation, references and source code.
-
MySQL
Developer Zone with official documentation, blogs and forums.
-
&what;
AmpWhat is the place to explore the characters and icons ... Discover Unicode and Character Entities.
- equality
- data
-
- gov.uk: data protection, UK
- gov.uk: Data Protection Act 2018
- ico.org.uk: Your data matters
- gdpr-info.eu: General Data Protection Regulation GDPR
- copyright
-
- gov.uk: How copyright protects your work
- gov.uk: Copyright Act 2021
-
"One time" - 1ty.me
A brilliant little tool for safely sending anything: "1ty.me is a simple idea, destroying a note after reading it." ~ right out of the spy movies. Seriously speaking though, it is an excellent way to share sensitive data, encrypted and deleted after the first access.
-
smallPDF - PDF tools
A brilliant set of tools for file conversions and optimisations ~ use is free with a daily limit. If your presentation slides are heavy and cumbersome, the compression tool will do an excellent job in lightening your file weight without the loss of quality. Highly recommended.
-
we transfer
Still one of the most popular services offering the transfer of very heavy files. So if your files are to heavy to email, this will be your best bet. Uploaded files are kept, available to download (as many time as needed) for about a week. Then the link will expire, the files deleted.
-
jitsi meet
An open source option to video conference calls. Jitsi is secure, open source and an excellent alternative. You can use it for impromptu chats, or to record your presentations for delivery or submissions.
-
- SVGOMG
- SVG optimisation tool • svg
- by Jake Archibald
- online
-
- imageOptim
- image optimisation tool • jpg / gif / png
- by Kornel Lesiński
- MAC
-
- JPEGmini
- image optimisation tool • jpg
- by Beamr
- PC / MAC
-
- RIOT
- image optimisation tool • jpg / gif / png
- by RIOT
- PC / MAC
-
- ImageAlpha
- image optimisation tool • png
- by Kornel Lesiński
- MAC
-
- Kraken
- Online Image Optimizer
- by Nekkra UG
- online
-
- cloudconvert
- online file converter
- by Lunaweb GmbH
- online
-
- compressor
- Fast and efficient image compression
- by compressor.io
- online
-
- imagify
- Image optimization for everyone
- by wp-media
- online
-
- squoosh
- image compression web app
- by GoogleChromeLabs
- online
-
Markup Validation
This validator checks the markup validity of Web documents
-
CSS Validation
The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets
-
caniuse.com
… up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
-
- Responsively
- "Develop responsive web apps 5x faster!"
- by Manoj Vivek
-
- Responsinator
- "... quickly get an indication of how their responsive site will look on the most popular devices."
- by Tama Pugsley and Andy Hovey
-
- Am I responsive
- "A time saving exercise by @justinavery for RWD Weekly Newsletter"
- by Justin Avery
-
Nibbler
Nibbler will score any website out of 10 for key areas, including accessibility, SEO, social media and technology
-
SEOptimer
SEO audit tool for checking any website. Analysis of On-page SEO, links, usability, performance and social media
-
Similar Web
This tool will give you visitor statistics, geographic targeting, user demographics, and competitor/similar sites
-
Domain Tools
Find out who owns a domain, when it was registered, and where it is hosted, providing it doesn't use domain privacy
- by David ツ These articles (explainers) are designed for students of web design. They show you how to plan for best practice designs and how to code them with Web Standards.
- by Prisca ツ This handbook covers classic design principles and dives deeper into related topics such as typesetting, branding and design psychology.
- LinkedIn Learning Accessible via your university login, these links will lead you to our curated lists of video tutorials we would recommend you watch.
There are so many amazingly talented, educated and generous people working on the web that we have our own little site to pay tribute, to introduce these brights minds to all students of the web. Let them inspire and teach you :)
visit 'people of the web' Some of them are included in the following list of 'must-see' talks ~ well worth your time!- watch: The State Of The Web Jeremy Keith online presentation, 2021
- watch: How We Built the World Wide Web in Five Days Jeremy Keith and Remy Sharp Fronteers, Amsterdam, NL, 2019
- watch: The world-wide web work Ethan Marcotte New Adventures, Nottingham, UK, 2019
- watch: Resilience Jeremy Keith Render, Oxford, UK, 2016
- watch: Designing for Crisis Eric Meyer An Event Apart, Austin, USA, 2015
-
A List Apart