Keep learning...
-
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
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.
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.
Toolkit
- Firefox — web browser, developer edition (Win/MacOS/Linux)
- Visual Studio Code — popular free code editor (Win/MacOS/Linux)
- Filezilla — open source FTP client (Win/MacOS/Linux)
- Adobe CC — you are provided with a subscription to Adobe CC
-
tutorials
-
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 David ツ
-
This handbook covers classic design principles and dives deeper into related topics such as typesetting, branding and design psychology. by Prisca ツ
-
LinkedIn Learning
Accessible via your university login, these links will lead you to our curated lists of video tutorials we would recommend you watch.
References & reading
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 ツ
-
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
-
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
-
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
-
Inclusive Design PrinciplesThese 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
-
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.
-
CSS Tricks
Primarily focused on CSS (Cascading Style Sheets) tutorials, tips, and techniques - expanded to cover broader front-end development topics.
-
&what;
AmpWhat is the place to explore the characters and icons ... Discover Unicode and Character Entities.
-
Can I use...?
... up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
-
@email
@email is a free e-mail hiding service that hides emails using short URLs redirecting senders to the mailto-url after clicking the link.
-
1ty.me - "One Time"
One Time Self Destructing Links For Sharing Sensitive Information.
- 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
-
-
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.
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
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.
- 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 ツ
- 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.
-
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. -
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.
-
... be punctual.
-
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
-
- watch: Video tutorials on YouTube How Tos and Tutorials, as well as simple tips and tricks HTML & CSS for Absolute Beginners
-
- watch: Learn Grid Layout Video Series Learn Grid Layout Video Series
-
- watch: Layout Land Tutorials for graphic design on the web — layout, CSS Grid, and more.
-
- watch: Webbed Briefs brief videos about the web, its technologies...
talks worth watching
-
- watch: The State Of The Web online presentation, 2021
-
- watch: How We Built the World Wide Web in Five Days Fronteers, Amsterdam, NL, 2019
-
- watch: The world-wide web work New Adventures, Nottingham, UK, 2019
-
- watch: Resilience Render, Oxford, UK, 2016
-
- watch: Designing for Crisis An Event Apart, Austin, USA, 2015
-

