programme hub MA Web Design + Content Planning

  1. programme schedule

    1. 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.

    2. talk icon

      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
    3. hub icon

      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

    4. module icon

      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

    5. module icon

      Design for Web Content

      What is web design?

      module icon

      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

    6. module icon

      Design for Web Content

      HTML - The structural layer

      module icon

      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

    7. module icon

      Design for Web Content

      CSS - The presentation layer

      module icon

      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

    8. module icon

      Design for Web Content

      Typography with CSS

      module icon

      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

    9. module icon

      Design for Web Content

      Images and colour with CSS

      module icon

      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

    10. module icon

      Design for Web Content

      Advanced CSS selectors

      module icon

      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

    11. module icon

      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

    12. deadline: Nov 17th 2023 by 4pm
      Three designed objects [Design for Web Content]

      module icon

      Design for Web Content

      emergency catchup session

      module icon

      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

    13. module icon

      Design for Web Content

      Responsive web design

      module icon

      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

    14. module icon

      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

    15. deadline: Dec 8th 2023 by 4pm
      Typesetting Literature [Applied Art for the Web]

      module icon

      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

    16. module icon

      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

    17. module icon

      Winter break

    18. deadline: Jan 12th 2024
      UX Design [User Experience Design]

      module icon

      Self Study

    19. module icon

      Content Management

      The behaviour layer - JavaScript 1

      module icon

      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

    20. module icon

      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

    21. deadline: Feb 2nd 2023 by 4pm
      Small Business website [Design for Web Content]

      module icon

      Content Management

      The behaviour layer - JavaScript 2

      module icon

      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

    22. module icon

      Content Management

      Content strategy

      module icon

      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

    23. module icon

      Content Management

      The .htaccess file and other oddities

      module icon

      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

    24. module icon

      Content Management

      PHP for site modularity

      module icon

      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

    25. module icon

      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

    26. deadline: Mar 8th 2024 by 4pm
      Seminar/article [Content Management]

      module icon

      Content Management

      PHP and MySQL for dynamic content

      module icon

      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

    27. module icon

      Social Media and SEO

      SEO, SEM and site promotion

      module icon

      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

    28. deadline: Mar 22nd 2024 by 4pm
      Film Promotion [Applied Art for the Web]

      module icon

      Social Media and SEO

      Site analytics and revenue generation

      module icon

      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

    29. module icon

      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

    30. module icon

      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

    31. module icon

      Spring break

    32. deadline: Apr 19th 2024 by 4pm
      Social Media & SEO [Social Media & SEO]

      module icon

      Self Study

    33. module icon

      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

    34. deadline: May 10th 2024 by 4pm
      Small business website (revisited) [Design for web content]

      module icon

      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

    35. module icon

      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
    1. MP concept: workshop
    2. Design for Web Content: Three designed objects
    December
    1. Applied Art for the Web: Typesetting literature
    2. MP concept: informal presentation
    January
    1. User Experience Design: UX Design
    2. MP Crit #1: Business, Cultural Context, and Commodity
    February
    1. Design for Web Content: Small business website
    2. MP Crit #2: Delight
    March
    1. Content Management: Seminar/article
    2. Applied Art for the Web: Film Promotion
    April
    1. MP Crit #3: Firmness
    2. Social Media & SEO: Social Media & SEO
    May
    1. MP crit #4: Prototype
    2. Content Management: Small business website, revisited
  2. our main sites

    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
      slack app icon

      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
      whismical screenshot

      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
      niro icon

      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.

    • 5 step overview of learning cycle
    • 5 step overview of learning cycle with details
  3. 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 ¯\_(ツ)_/¯

    Module shortcuts

    1. Design for Web Content
    2. Content Management
    3. Applied Art for the Web
    4. User Experience Design
    5. Social Media & SEO
    6. Major Project
  4. 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 Davidemail Prisca

    Additionally, 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

    Health and wellbeing

    Academic

    Information technology

    Finance

    Employment and careers

    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.

  5. Materials & communications

    1. Welcome meeting slides
    2. Learning to learn
    3. Website Architecture
    4. Our Slack group: design4webour group agreement

    Core tools you will need

    1. Firefox — web browser, developer edition (Win/MacOS/Linux)
    2. Visual Studio Code — popular free code editor (Win/MacOS/Linux)
    3. Brackets — open source code editor (Win/MacOS/Linux)
    4. Filezilla — open source FTP client (Win/MacOS/Linux)
    5. Adobe CC — you are provided with a subscription to Adobe CC
    6. LinkedIn Learning — you get free access to LinkedIn Learning

    Helpers to get you started

    1. Web hosting details
    2. Redirecting domain requests to HTTPS
    3. Setting up your FTP account
    4. Connecting to the server using FileZilla
    5. Show file name extensions
    6. File and folder organisation
    7. Your coursework homepage
    8. Browsers and dev tools
    9. Installing WordPress on your domain

    Online references you should use

    1. MDN Web Docs
    2. Codrops CSS Reference
    3. Mozilla Developer (YouTube channel)
    4. 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

    1. Resilient Web Design by Jeremy Keith
    2. Designing for the Web by Mark Boulton
    3. The Shape of Design by Frank Chimero
    4. Web Style Guide by Patrick J. Lynch & Sarah Horton

    Online magazines you should subscribe to

    1. A List Apart
    2. Smashing Magazine

    Conference talks you must watch

    1. Ethan Marcotte at New Adventures 2019
    2. Jeremy Keith at New Adventures 2019
  6. smiling field mouse peeking through flower, text: Happiness is connecting... people of the webThere 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!

    Jeremy Keith
    watch: The State Of The Web Jeremy Keith online presentation, 2021
    Jeremy Keith and Remy Sharp
    watch: How We Built the World Wide Web in Five Days Jeremy Keith and Remy Sharp Fronteers, Amsterdam, NL, 2019
    Ethan Marcotte
    watch: The world-wide web work Ethan Marcotte New Adventures, Nottingham, UK, 2019
    Jeremy Keith
    watch: Resilience Jeremy Keith Render, Oxford, UK, 2016
    Eric Meyer
    watch: Designing for Crisis Eric Meyer An Event Apart, Austin, USA, 2015