programme hub MA Web Design + Content Planning

Keep learning...

  1. For future reference, the following are notes and links from our induction sessions. Importantly, if you need to revisit the setup of your domain and site, you can find the link to the 'getting ready' tutorial here.

    welcome meeting slides

    Download the PDF file

    It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

    Weekly learning cycle

    As you begin your journey on this MA programme, there are a few aspects of your learning that you should keep in mind to get the most out of your studies. The illustrations of your weekly learning cycle are intended to help you plan your time and course work.

    Please click image to view larger size.

    • 5 step overview of learning cycle
    • 5 step overview of learning cycle with details

    Getting started

    We will hit the ground running and our first task will be to get the technical setup in place. During our induction workshop, we will go through the ten steps to get you ready.

    Read the Getting started tutorial to get set up with domain, hosting and server configurations.

    illustration of domain and server setup

    Toolkit

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

    References & reading

    reference icon

    To grow your skills, we recommend that you make reading part of your studies. There are some excellent publications online to help you along. Then there are references you need to be aware of and use for your project work. The followings lists includes links we recommend ~ and please do share your findings. We'd be more than happy to update this list with your suggestions ツ

    1. book cover 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
    2. website screenshot 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
    3. website screenshot 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
    4. website screenshot On Web Typography
      Typography is your design’s voice and the most powerful tool you have to communicate with your readers. Learn how to wield type with care and wit: how to evaluate typefaces, consider technical constraints, create flexible typographic systems, and put together your own collection of favorite faces. quoted from website
    5. website screenshot 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
    6. book cover 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.
  3. Etiquette

    We look forward to our year together, to all the conversation and discussions, the collaborations and sharing of ideas. This page is intended to set some ground rules to ensure that everyone will feel comfortable, safe, and included. Let's consider this a guide to our teamwork — may it be productive and enjoyable ツ

    Let's all agree to...

    • ... be punctual.

      Our sessions together will be quite intensive because there's a lot of ground to cover. We'll start promptly, so please aim to arrive early to give yourself time to get comfortable.

      Let's agree to be on time for all our sessions. Punctuality is really a matter of common courtesy, respecting everyone's time. Late arrivals are distracting for both your lecturers and fellow students.

      If you are delayed, try to let us (David or Prisca) know via a DM in Slack and join the session discretely as soon as you can. Be prepared to catch up on anything you missed by asking your fellow students and using the online materials after the session has ended.

    • ... be kind & respectful.

      We see our programme as one learning team, one big group of creative thinkers who will flourish through collaboration. Respect and understanding are therefore part of our philosophy to foster a positive spirit for us all.

      Our programme is likely a little different than you might expect - we will aim for lots of discussion and collaboration. This is the nature of working on the web and our approach will help you develop good employability skills. This means we will all be open to all views, open to different opinions and keen to share ideas. Inclusivity is paramount. Let's embrace our differences, be accepting and supportive of each other.

    • ... be considerate.

      Let's bear in mind how our ways of listening, note taking, and learning will differ and aim to keep the room quiet. Let's ensure that our digital devices remain muted during our sessions and let's remain focused on our current discussions and relevant topics.

      Our sessions will be most productive if we can all focus on the subject and activity in hand. This means listening to whoever is talking and being ready to share our views when prompted. Distractions caused by electronic messaging or chatting will be disruptive and hinder this process.

    • ... be open-minded.

      One of the most wonderful aspects of design work, especially for the web, lies in collaboration and feedback cycles. This means that input from anyone should be welcomed because it will help to positively shape our work.

      If you are used to this process already, brilliant! And if not, aim to adapt an open-minded attitude and take on board all opinions and views. It is important to bear in mind that design never succeeds in isolation. After all, any design has a clear objective and is produced with people in mind. Our subjective views are only ever starting points.

      Only if we listen to how people perceive and interpret our designs can we be sure that our intended outcome is achieved. Whether someone has lots of experience in design, or none, all views count and will contribute to the evolution of our work.

      Commitment to teamwork means that we will give everyone the same attention and care. We will rely on each other for honest feedback, constructive criticism as well as hands-on help with all project work. By supporting each other in this way we will learn from each other; we will learn both by giving and receiving help.

    teamwork & communications

    As newly formed team, we'll best get to know each other by frequent communication. This can take any form we like, let's talk about options. For starters, we'd like to invite you to our Slack team.

    illustration for teamwork

    Slack is essentially a messenger tool - and is very popular with web teams as it is flexible and perfect for both live chats and asynchronous conversations. Ideal for sharing code snippets, links and more - we can all help each other with various design or code problems quite easily.

    We have our team, called design4web and you will be invited to join. Members of this team are exclusively students of the MA and your tutors. There are topical channels for specific subjects and you can use direct messages for more private matters. We hope you will love it as much as we do :)

    Slack's workings

    As we are on the free plan, there is a time limit of 90 days. This means that messages will be available for this set period only and then archived. This should not affect our weekly dealings much but is something worth keeping in mind.

    If there is anything useful that you'd like to keep, make sure to copy/paste or download accordingly. There will be no way to get back to the content of the archived messages.

    Threads for easy workflow

    key chain with labels

    Threaded replies are replies attached one specific message. The are hidden from the main channel and can be viewed separately from the main stream. This allows for focused conversations and impromptu chats between only a few people without cluttering up the channel for everyone. We will make use of this for our team work in groups for various projects as it will make it easy to collect messages and give/receive feedback .

    For more details, please read Tips on how best to use threaded messages

    Slack design4web agreement

    Let’s agree to the following points to get into a nice flow with Slack.

    1. teamwork via public channels

      In the spirit of teamwork, let’s agree to favour the public channels over private messages (DMs). This will allow us all to get involved in conversations – you might not be the only one wondering about something, or asking this question :) This will be especially important for feedback on design and help with code – keep it public and we can all chip in ツ

      And if you do ask us anything via DMs we feel would benefit everyone, we might just post your question and our replies to the public channel as fitting. This will ensure everyone can learn ~ and we will stay sane :D not having to repeat ourselves too much ツ

    2. consensus on new channels

      The current channels are intended to focus our conversations on certain topics and we can expand upon this. Let’s agree to vote on any new channel to avoid overload. If you have a suggestion for a new topic – please use the #general channel to propose it. We can then put this to a vote.

    3. uploading / removing files

      Feel free to upload as many files as you like, be that course related or just for a smile – we can have fun on Slack :)
      Due to the limit of space for us – let’s agree to do some housekeeping every once in a while (maybe during the holidays?). After a few months, let’s all check on our files and delete those heavy ones which are no longer needed to lighten our collective load.

    4. no guarantees

      We all understand that files uploaded to Slack, or text/code pasted, is not a secure backup option. We are at the whim of Slack and its workings and while we’ve not found any issues – we have to be clear that this is merely our comms tool, not official file storage.
      (and you are keeping backups of all your stuff anyway? right?!? :D)

      One limitation we have, being on the free plan only, is that messages, including files, will only be visible for about 3 months. After that, they will be archived but will be inaccessible. This has not been a major issue but something to be aware of. So if there's anything important, do copy/paste or screenshot it to make a backup for yourself.

  4. smiling field mouse peeking through flower, text: Happiness is connecting... people of the web

    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'

    videos to learn from

    Kevin Powell
    watch: Video tutorials on YouTube How Tos and Tutorials, as well as simple tips and tricks HTML & CSS for Absolute Beginners
    Rachel Andrew
    watch: Learn Grid Layout Video Series Learn Grid Layout Video Series
    Jen Simmons
    watch: Layout Land Tutorials for graphic design on the web — layout, CSS Grid, and more.
    Heydon Pickering
    watch: Webbed Briefs brief videos about the web, its technologies...

    talks worth watching

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