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

peace sign in Ukrainian colours, blue + yellow

Guide notes for major project

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

pointers

question prompts

question prompts

question prompts

question prompts

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

Present it well!

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.

This is a repeat from our session notes, included here as easy reference.

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 :)

In addition, if you have a DropBox account, you could use Jitsi so record a presentation, very handy. See the following quick video to show you how.

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.

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 sutble 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 :)