MA Web Design + Content Planning materials for applied art for the web • major project

The structure of the Major Project takes its lead from the Vitruvian principles of Commodity, Firmness and Delight, to which we add the non-Vitruvian principles of Business and Cultural Context.

The Vitruvian Principles

Vitruvius, in full Marcus Vitruvius Pollio, flourished 1st century bc, Roman architect, engineer, and author of the celebrated treatise De architectura (On Architecture), a handbook for Roman architects.

Utilitas (Utility)
It should be useful and function well for the people using it. We call this “Commodity”.
Firmatis (Durability)
It should stand up robustly and remain in good condition. We call this “Firmness”.
Venustatis (Beauty)
It should delight people and raise their spirits. We call this “Delight”.
David Watson

In addition to the details given on the websitearchitecture site, this page will collect extra notes to guide your work. These prompts and questions are intended to focus your thinking and planning on the theme-related aspects and help prepare your presentations.

The MP is your main project and deserves a worthy mission ~ we'll start with coming up with ideas and concepts, discuss possibilities and move onto finalising the core aspects. This session is informal ~ you can choose to present your ideas however you like. We will ask you to explain your idea, your motivation and any related detail and discuss as a group.

pointers

  • which topics could inspire good ideas? be open-minded and liberal in your thinking, don't dismiss any idea too early on. Sometimes a silly idea can lead to something entirely different. Other times ideas sit dormant only to become useful later on.
  • which tangents might lead to something? make note of ideas and add details to each; mindmaps are great tools to keep track of many little items of info and to establish connections between themes
  • what do others think? talk to anyone who is interested about your ideas and consider their thoughts and input. The more opinions and views you can have, the more your thinking is challenged. A critical view can do wonders to push your imagination.

question prompts

  • decision time: which of your ideas is the one? it is important to make a decision on your core idea at this stage so that you can begin the explorative work on your concept. This does not mean that your idea is fixed at all ~ rather that you decide on the concept which will then evolve as you work on research and content planning. The initial idea might result in something quite different in the end ;)
  • ask yourself: what problem does my project solve? consider your site’s mission, its aim and focus; how will it address the issue in hand?
  • ask yourself: who is my website for? who does my project help? consider your target group ~ and remember that ‘everyone’ is not a good approach. Ideally, of course, your site will benefit one and all and its accessibility and usability should be geared towards this in the final product. But to refine your approach for content planning, IA, content production and finally site design and build, you will need to have a clear focus. Narrow down your target group carefully and aim for variety and recognise commonalities.
  • ask yourself: how does my project fit into the cultural context? What is its place on the www? consider the rationale of why your website will be created and put online; what is the motivation behind your idea and how does it compare to other online publications within the same subject area?
  • ask yourself: what is my project’s purpose? you might choose a subject for purely personal reasons, something that you like and feel happy to spend the next year on - if your project serves you to learn the skills you want to learn, then that is a good rationale. However, your project still needs to deliver on its mission. or you might choose a subject as you recognise a social need In this case you’ll likely already have established a goal and it will be a matter of refining your site’s mission clearly.

question prompts

  • target group: who exactly is your website for? Before you can start with content planning, you will need to be clear about the people who are meant to benefit from your site. While you do not want to exclude anyone, it will be important to refine a specific group and to create fitting user personas. This will help with all upcoming aspects of your project work.
  • user persona: what kind of person are you planning this site for? Considering your target group ~ create specific user profiles. Narrow down personal details and make note of personalities/preferences. Making yourself aware of how your users might access the site will result in more thorough planning and help shape the final result.
  • user journeys: how will your site fit into real life scenarios? Coming up with user personas will allow you to imagine which scenarios might bring someone to your website. You'll be able to refine your content, IA and ultimately design with the help off these kinds of UX techniques.
  • content strategy: what kind of content will support the site's mission and benefit its users? Content planning and designing your IA will be a vital step before even considering the technical or visual aspects. Once you are clear about who the site is for, what its goal is ~ you can begin your content planning with that in mind. Consider what kind of media will be included, how access to content will be facilitated and what kind of functions might be added.

question prompts

  • statement of intent At this stage, the visual design proposals you present are a statement of intent, rather than a final and fixed decision. Naturally, your design ideas will likely evolve along with your progress with site development. So, consider this a first iteration of your site design.
  • branding: how will your brand express its mission? While you will not have had the time to complete the brand design, at this stage, it would be good to set the foundations. Decide on the tone of language for your text and look to complement this with the visual aspects. Plan for a fitting design across all.
  • visual design: which approach will your site take? Considering your project's goal and its target group ~ explore possible options for type, layout and colour and aim to decide on an overall direction. Experiment with different design concepts to refine your design. Reviewing of cognate websites will help you answer this question: Are you challenging convention with your design or conforming to the norm for similar websites?
  • presenting visual design The page layout on common devices is an important aspect of visual design as this will demonstrate your use of white space and visual hierarchy. Other considerations include your proposed use of images and icons (photographic and/or illustrations) and the style of other user interface elements (e.g. navigation). Demonstrate your use of colour, type and adaptive layout in this first instance.
    You should use whatever tools you need to convey your proposals. These could include (but are not limited to) mood boards, style tiles, wireframes, and static mock-ups.

question prompts

  • content considerations: is your site content or data driven? Once you have refined your site's mission and target group, your planning can begin for content and user engagement. This is the time to decide on the specifics of your site's content, to plan for research, content production/editing following your planned information architecture, as well as draft an initial schedule. Consider the following points:
    ?—does your site present primarily static content? or are dynamic media included?
    ?—how frequent are updates to content? how exactly will this work?
    ?—what kind of promotional tools will your project use? how will those be implemented?
  • technologies: what kind of technical underpinnings will your project require? Start by writing up a list of requirements while considering all aspects of your project. Do your research and aim to conclude which approach will serve your site and its audience best. This is all about selecting the right tools for the job, the most suitable delivery methods and to plan for future updates and prepare for promotional efforts.
    ?—what technologies will be the most effective for content delivery?
    ?—what kind of technical setup does your user group likely have? How does this affect the site's setup?
    ?—would your project benefit from a CMS? If so ~ which type?

PS: while ideally your final project mission and its target group should be the deciding factors here, there is also your learning journey to consider. It would not be a wise decision if your project seems to demand a set method which you do not feel you could confidently learn and apply within the given timeframe. Similarly, if the project's technical setup is nothing more than what you already know how to do ~ then this would lack the challenges this project should bring which would push your skills.

In the past, some of our students have chosen a certain approach in order to learn a certain framework/cms, knowing that there is plenty of work out there. If this is your thinking too, then do make sure that the method you want to learn still ties in with your project aims. You will then be able to show off your final MP as the glorious masterpiece during job/client talks :)

Prototype: Demonstration and Schedule of Works

Immediately before the summer break, you will present a prototype version of your website. It need not be feature or content complete but it should demonstrate the general design principles that you have identified as important in previous presentations, and it should contain some original sample content. You must also present a schedule of works so that tutors can be confident that you understand what is required in order to turn your prototype into a fully-functioning website and that you have the time and expertise to action this. You should include an estimated date for site launch.

Your prototype presentation should include the following:

  1. A brief description and rationale for your project (you could use your Twitter description, manifesto, or elevator pitch).
  2. A summary of prior crits: business case and cultural context, commodity, firmness and delight.
  3. A demonstration of your prototype. This may take various forms depending on the nature of your project, but the key point is that it must be rich enough for tutors to be able to clearly understand your vision for the completed site. For example, it could be done:
    • via transitioned slides to show flow of user journey.
    • as static prototype pages, HTML/CSS/JS only to show content/UI/layout.
    • using static mock-ups and partial webpages to demonstrate interaction.
  4. A schedule of works. Break your activities down into separate tasks (e.g. content creation, theme design, implementation etc.), the more detail the better, and then estimate how long each will take. Set deadlines for each element and then present as a Gantt chart so we can clearly understand your proposed schedule (gantt.com).

These principles will guide your project work. Over the coming weeks, you will present your progress in line with these themes. Make sure to read the guide notes which include advice and prompts to prepare your presentations for each crit. For details on assessed elements, check the websitearchitecture site.

Principled crit sessions :)

common advice for presenting well

One of the most frequently repeated pieces of advice is that you should over-prepare and be ready for failed tech of all sorts.

Don't count on your planned setup to work as expected. You might have brought your laptop and ALL the plugs, connectors and adapters you could get your hands on, only to find none are compatible.

For online presentation, you might consider your workflow solid as you've tested the presenter view and feel confident that this will work. And then it doesn't... ~ such is the nature of the beast.

duffy fighting the black

in short: prepare for disaster :D

If you cannot present for technical reasons - have your slides ready to share instead. Prepare a PDF as fallback ~ which can then be shared online, or emailed to everyone instead. You won't be able to prepare for every possible mishap, of course - but a minor setback will not freak you out as you're prepared :)

A good backup plan is to keep your slides online — be that as HTML presentation or mere download link to the file. Better safe than sorry.

it is all about what you say

In any case, remember that it is about what you say, how you deliver your point ~ not about a fancy slide presentation. If all fails, make sure you are able to present your ideas without visual aids, if possible. This will work for concept and planning discussions, less so for design conversations, of course.

Speakers and presenters who have had to cope with technical failures stress that preparation is key. Being ready to talk freely about the topic in hand, or even just survive a minute or two (while issue is being fixed) without visual aids helps us keep our nerves in check and remain calm, focused on the task in hand. (easier said than done, of course!)

present with confidence

strong start & finish

Get everyone's attention right from the start. For online presentations, be there ahead of time and ready for any early arrivers. Put up your opening slide while everyone gets there — and then start strong.

Make a statement. Ask a question.

End your talk with a bang - return to your initial point in conclusion or to prompt questions. Importantly, conclude clearly and offer up any relevant details on closing slide (such as your contact info / links / references).

connect with your audience

If you are presenting live (i.e. does not apply quite the same to pre-recorded presentations), it will be important to find a way to connect, to engage with your audience - in whichever way you feel comfortable.

You might dislike public speaking and opt for directly addressing your audience only at the very start and end of your talk. Or you might enjoy a more interactive approach and prompt questions throughout. Up to you :)

rule of 3

Many experienced speakers swear by this approach, stating positive feedback and fruitful post-talk questions as a result. The concept is simple: split your talk elements into 3 parts as fitting.

  • Three sections to your talk:
    intro / presentation / closing note
  • Three themes for your presentation
    possible splits by stage/phase, by argument, ...
  • Three items per slide only!
    proven to be ideal amount to be remembered/attained

DOs and DON'Ts

:-) DO...

  1. Do prepare.
    Prepare all aspects for final delivery: slides + presentation mode test / fallback (PDF) / links notes for easy sharing / talk time rehearsed
  2. Do stick to time limits.
    Regardless of the setting, make sure to stick to any time limit given. Better to have some minutes to spare than not to conclude your talk.
  3. Do use presenter mode.
    If you are using slides, aim to present these in presenter / full screen mode which hides the application's interface from view. This will avoid unnecessary distractions.
  4. Do be yourself.
    The expected tone and nature of delivery will depend, of course - but don't be afraid to be yourself and present in your own style.
  5. Do have fun.
    Injecting some variation, via anecdotes or slight tangents can be entertaining and engaging.

DO NOT... !

  1. Don't read from your slides.
    This is a typical method for any beginners to presentation - a crutch to hold onto when nervous. Remember: your talk will cover the content on your slide already and your audience can read any slide text themselves :D
    Not that it is always bad to read the slide content. There are situations when you might choose to, of course.
  2. Don't over-crowd your slides.
    Stick to simple slides with little but focused content. Busy large visuals can distract. Too much text will be overwhelming. Hence finding a good balance is vital.
  3. Don't 'leave the room' unexpectedly.
    Avoid turning your back to your audience for in person sessions. If online and being shown on camera, avoid walking off-screen without reason. This can give an oddly jarring impression.
  4. Don't fuzz the end.
    Almost as important as a good opening to a talk is its end. Bring your presentation to a clear end, finish with a request for questions if time permits or a clear closing statement and slide.

in person

  • know your space Get there early and make yourself familiar with the room and equipment. Don't stress out over norms or expectations ~ follow your preference. If you prefer to remain still — test out which position is best for your audience. If you like pacing - test that out too to check for any trip hazards like cables etc.
  • avoid distractions Before you start, check your notification settings, on any device and mute your mobile. Will you have some water during your talk? ~ find a fitting/safe spot to keep it beforehand.
  • eye contact Nothing is less engaging than listening to a monologue. You are talking to an audience - it is advised to speak to them directly. However you're most comfortable, aim to look at people ~ via a sweeping glance across the group, or via looking at individuals.
  • pace yourself Don't be afraid of pauses and moments of silence — allow some breathing space for your audience to digest. If fitting, ask questions to break up the rhythm ~ or allow for a content-heavy slide to be viewed.

online

  • test your setup Take a moment to test your technical setup ahead of the presentation time to avoid delays. While technical glitches will happen, you'll want to avoid the stress of addressing these issues just as you are about to start.
  • avoid distractions Before you start, check your notification settings and close all unneeded applications for smoother performance of online functions. Keep you mobile out of sight to avoid the temptation to glance at it (unless you're using it as timer, of course).
  • mimicking eye contact There are different views and opinions on how to best present via a webcam. Some will advocate a very performer-like approach — look into your camera directly to mimic eye contact. Others will advocate the importance of the presenter feeling comfortable in speaking as they prefer, stating it will result in a more natural and effective presentation.
  • pace yourself On- or off-line, avoid rushing through your content and aim for variation of interaction. One part might be the core talk and in addition, consider how you can engage your audience and keep their attention.

Use Jitsi to record your presentation

The following video was done a little while back and shows how you can record the presentation video and then save the output to DropBox. I've just tested it and you can now save the file to your local drive :) Still in beta but works well, nice! It'll save as .webm file - which you can then covert easily to mp4, via a tool like convert.io, for example.


NOTE: this is a super-quick flyby demo – intended to be paused as needed for reading/viewing (hit SPACE bar or use controls). For the sake of a lighter file load, there is no audio included, all information included as text in the video.

colour

Jitsi is a set of open-source projects that allows you to easily build and deploy secure video conferencing solutions.

Why Jitsi?

In our remote world of communication there is an ever growing number of apps and services available for online meetings. While many are popular, not many are actively supporting online communication in a secure and private manner. The likes of Teams, Zoom or Skype all require accounts and their approach to privacy concerns and data handling can at times be concerning.

As you know me well enough by now, you'll not be surprised that I went on the hunt for a more ethical alternative, one with the best of people at heart - hence jitsi :)
There is complete anonymity, no need for an account at all ~ encryption by default. You could run your own instance and even customise it all as it's all open source.

Have a look at the Jitsi projects and try out jisi meet which allows you to start a video call by merely sharing a link and offering many of the usual functions too. Nothing is recorded, no data kept and you can opt to password protect your meeting ~ easy peasy :)

colour

Jitsi nicely integrates with Slack and you can easily start a new video conference and invite people. The link to the meeting will be added to the channel and will launch in the browser (or app if installed) where you can configure all settings as needed.

threaded reply screenshot of popup To start the meeting, go to the fitting channel, add /jitsi followed by an @mention for those invited.

This is of course merely a suggested alternative to MSTeams which you could use for the same purpose. Personally, I prefer to stay in one place (avoiding the endless login loops!) so this is nice :)

design your slides

Less, but better.

Dieter Rams: "Ten principles for good design"

keep it simple.

Presentation scripts and notes can lead to content-heavy and overloaded slides quite easily. Avoid adding too much detail — focus on the core point and present the information in your talk.

Avoid summarising all you're presenting via long lists — remember that your slides are merely complementary to your talk. Showing a summary will distract your audience who will try to read the text on your slides while you are addressing them.

keep it safe.

In your quest to engage your audience - you might be considering all sorts of external media, like polls and videos and the like. By all means do spice up your presentation :P — and don't forget to plan for alternatives if the tech gremlins are throwing a spanner in the works!

Be considerate and mindful of your audience in your use of motion and audio and moderate the time spent on such media. Short bursts can be great ice breakers, or liven up your talk. Prolonged periods however could be overload for some people's sensitivities and might not be time well spent.

Videos which relate directly to the presentation are of course a different matter. Again, preparation is king — make sure the video is online and keep the link handy. Be ready to summarise the video so you can carry on regardless if the video should fail to play.

choose your tools well.

Depending on the nature of the presentation, consider which approach would be most effective. In person, the choice is yours - find out in which format your audience would prefer to receive your file. If online, you might opt for an HTML presentation instead which will allow everyone to access it easily (i.e. fallback in place) and can also be shared more publicly.

HTML SLIDES

eye for detail

typography

Keep in mind that the slide might be in view / on screen for quite some time. Your audience will switch between looking at you and your slide. All details will be in focus such as your typesetting and overall layout.

Ensure consistency and clarity above all. Fine-tune text elements in context and focus on a clear hierarchy of the detail. Layout should include plenty of white space and present a calm and clear visual.

Keep your font colour in strong contrast and text size large — a minimum of 36pt is recommended. With beautiful typefaces, I think you can go much larger still. Keep text on slides succinct and only to a few words.

No more than 6 words on a slide. ever

Seth Gothin

layout / alignment

Slides are definitely one of those designs where perfection wins. If you have headings or lines within your layout - make sure those are consistent across your slides. It can be very distracting (to some at least) if a line or headings appears to visually jump between slides.

colour

There are so many different personal preferences that it would be impossible to find a perfect solution. Opt for what fits your presentation purpose and topic and aim for clear contrast between content and design elements (as you would for the web).

The same best practices you use for web design apply to slide design. Be subtle or bold but focus on clarity and legibility over mere visual flair. Bear in mind that in any case, be that via projector or via screen, light will be a factor in how your colours might appear. Err on the side of caution for formal presentations.

a quick note on my slides

As I usually mention during my talks, the slides I prepare for you and our sessions are not a very good example, design aside, of an effective presentation per se. Bear in mind that the purpose mine have is quite different to a presentation - they are specifically designed for teaching and—post-talk—to become a useful resource for you to review in your own time. My aim is to include plenty of information for recap and revision purposes. Hence there tends to be more information than I would include otherwise.

Here are a few examples of beautiful slide decks by some of my favourite speakers. Of course these slides are a mere glimpse into the topic but I hope their content and design will inspire you :)

Veerle Pieters

[view slide on speakerdeck]
A burst of colour showing the design journey from sketch to final.

Paul Lloyd & Andy Hume

[view slide on speakerdeck]
An excellent example of nicely set type and effective use of larger images.

Trent Walton

[view slide on speakerdeck]
Perfect alignment and bold type :)

Peter Gasston

[view slide on speakerdeck]
Type variations in context for technical detail

Andy Clarke

[view slide on speakerdeck]
A humongous slide deck for a full day's workshop - included here for inspiration :)

Our completing students' links

With the end of October, the deadline for submission for the student group from 21/22 is now over - and we can now all view their results of the long summer of project work. Well done everyone ;)
view final MPs & slides