Design for web

Chapter 8: Design presentations

Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating. Don Norman

Communication is key

As designers our job is essentially to communicate: Communicate with the client about the project in hand. Communicate with the people the design is for. Communicate with the web team to work on design and development. And ultimately deliver a design that will communicate its message well. Explaining and discussing the design process to all parties involved is vital to ensuring productive collaboration and an effective end result.

Our design proposals will present the results of our exploratory and preliminary work and put our suggestions forward. Without explicitly elaborating on the process and reasons behind the decisions, fruitful discussions are difficult to achieve. A well-written design rationale provides insight into the thought process and considerations that influenced the design decisions.

Typical topics included

  1. the objective
    A design rationale starts by clearly defining the website's goal and its target audience. It outlines what the final design aims to achieve and continues to express the reasoning behind the decisions made during the development of the presented design.

  2. the problem to solve
    As any design is about solving a problem - the rationale will elaborate and explain the nature of the problem. There will be different approaches and solutions. The rationale will state any explored paths and the reasons why not all were part of the development of the final result.

  3. the user-focused work process
    Regardless of who the rationale is speaking to, it will state in detail the specifics which will meet the intended audiences' needs and expectations. User-centred design processes begin and end with the people it is for. Discussing how to best achieve a good result for the target group will ensure the following:

    • It will keep the project team on track and focused on the outcome for the end user above all else.
    • It will help guide and shape any user testing activities and ask for appropriate and well defined feedback and input.
    • It will remind any client that the final design's priority does not lie with pleasing their own subjective preferences but with delivering for the target group.
  4. the visuals
    Importantly, the rationale will explain the thought process and decision making behind all aspects of design. For the visual aesthetics, it will describe why the proposed typefaces have been selected and how they fit the project in hand. It will elaborate on the choice of colours and explain why the proposed colour scheme is effective and supporting of the overall goal.

  5. the interaction
    As part of the user-centred approach the design process will involve an interface which requires a finely tuned user journey. Any interaction, whether it is merely links, complete interfaces or forms, will be planned, revised and tested thoroughly. The rationale will include specific explanations on each detail and why the design has taken the proposed direction.

  6. additional considerations
    Depending on the overall brief, the rationale might also cover other aspects of the website. For example, it might include competitor analysis and conclusions for the project in hand.

    practicalities
    Practicalities such as time or budget constraints and projected future update schedules might have been requested as part of the rationale. This might also apply to the scalability of the project and its maintenance long-term.

    inclusivity & sustainability
    As part of the user-centred approach, accessibility is an important aspect to include. This might be included as part of another section of the rationale or as a different topic on its own. It will state that the site's design is responsive, for example, and include the mention of any specific enhancements. As part of good design, stating the sustainable approach to preparing assets as well as performance enhancing methods for code and online delivery will be a good addition.

presenting designs

When we complete a design proposal, our aim will be to get our client to understand our process and hopefully accept the suggested design solution. As designers we will have to be able to 'sell' our work by explaining our design thinking and the decision making process that led to our proposal.

Depending on the project and process, the presentation of the proposal itself might take different forms. We might present in person, with slides to illustrate our points. We might be asked to send a written proposal and discuss details during a follow-up meeting, online or in person. In any case, a written proposal with the design rationale will serve as a reference of our design process and allow for further review after the proposal has been presented.

illustration showing figures, world map, chart lines and coloured dots with connecting lines.

Living with data was a 5 year research project exploring knowledge, experiences and perceptions of data practice. My part in this project was to design the branding of their material as well as the website.

design proposal

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

included

  1. concepts for logo design (type-only + visual)
  2. graphic concept for figure design
  3. sample illustrations

design iteration

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

included

  1. iterations of logo designs with icon previews for visual only
  2. iteration of figure design with sample illustration for comparison
  3. illustrations

illustrations

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

included

  1. 5 visuals

site design planning

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

included

  1. site planning for UX
  2. suggestions
  3. site design mockups (2 versions)

site design iteration 1

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

included

  1. iterations following feedback
  2. 3 versions
  3. change of colour use
  4. confirmed light content column

site design iteration 2

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

included

  1. edits to logo/menu of v3a
  2. incorporating node links from v3b
  3. 2 variations on colour use

site design iteration 3

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

included

  1. exploratory iterations of details

designing effective slides

If we are giving a presentation of our design proposal - be that online or in person, our slides will need to part of our design work and deliver well. Effective slides should consist of few words and primarily show prompts and reinforce what we talk about.

typography

light with font file icon inside, arrows and plus icon.

Keep in mind that the slide might be in view / on screen for quite some time. Our audience will switch between looking at us and our slide. All details will be in focus such as our 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 font colour in strong contrast and text size large — a minimum of 36pt is recommended. With beautiful typefaces, I think we can go much larger still. Keep text on slides succinct and only to a few words.

layout / alignment

light with font file icon inside, arrows and plus icon.

Slides are definitely one of those designs where perfection wins. If we have headings or lines within our layout that span all our slides - we have to make sure those are consistent, placed exactly the same across all. It can be very distracting (to some at least) if a line or heading appears to visually jump between slides.

Using guidelines or grids in the app we can ensure that the horizontal and vertical coordinates of repeated elements are the same across the entire slide deck. Setting a generous outer margin will ensure that everyone can view the content easily, whether we present in person via a project or online via screensharing.

colour

light with font file icon inside, arrows and plus icon.

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

The same best practices we 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 own slides

As I usually mention during my talks, the slides I prepare for my teaching 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, my students, 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 in the slides than I would include otherwise.

The following examples are from talks of some brilliant people ~ and you will see that without the talk itself, much is lost. However, the slides still present their topics well and can still inspire ツ

Design for the web

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

the speaker

view profile on 'people of the web'
Peter Gasston

talk summary

  1. HTML Forms
  2. 3 Good Reasons
  3. Advice

Unravelling the mysteries of inspiration

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

the speaker

view profile on 'people of the web'
Veerle Pieters

talk summary

  1. what is inspiration?
  2. logo design of fab
  3. logo design of personal site
  4. gallery of inspiration
  5. tools & links

Break everything

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

the speaker

view profile on 'people of the web'
Trent Walton

talk summary

  1. work approaches
  2. know limitations
  3. develop an understanding
  4. make things better
  5. pushing web typography
  6. camaraderie is everything

about slide content

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

In your quest to engage your audience - you might be considering to throw in some provactive content, something to stir emotions and reactions. Depending on context, this can be perfectly fitting and appropriate.

For an effective presentation however, it is important to be sensitive to your audience, to avoid words, topics and visuals that might cause unintended offence.

No more than 6 words on a slide. Ever. Seth Gothin

keep it safe.

One way to reach your audience is to consider 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.

presenting with confidence

Some of us find presenting in front of people easy. Some of us do not and find the sheer thought of public speaking terrifying. Either way, presenting our work, speaking in front people, clients or colleagues, is part of any web project’s work. This is another skill that can be learnt with practice and by taking on board feedback and advice.

Presentation styles vary as much as people’s personalities and there is no one perfect way to deliver a good presentation. We all have to find our own way to present well. Our journey there will involve trialling different methods, practicing our timing and elocution and getting used to addressing an audience.

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

popular tips

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.

Daffy Duck fighting the black © Warner Bros.

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

DOs and DON’Ts

DO...

  • Do prepare.
    Prepare all aspects for final delivery: slides + presentation mode test / fallback (PDF) / links notes for easy sharing / talk time rehearsed
  • 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.
  • 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.
  • 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.
  • Do have fun.
    Injecting some variation, via anecdotes or slight tangents can be entertaining and engaging.

DO NOT...

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

presenting off-/on-line

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.

choosing our tools well.

Depending on the nature of the presentation, consider which approach would be most effective. In person, the choice is ours - we might want to find out in which format our audience would prefer. If online, we 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

sharing our slide decks

If we are using slides and want to give people access to the file, or offer the downloads, it is important not to make assumptions about access to common/popular platforms. For example, many people will use GoogleDrive, or OneDrive ~ however, many will not. A shared link will then block access and frustratingly ask for a 'request access permission' instead. Ideally, we'll host our slide files ourselves and offer a direct link which will give everyone easy access and the option to download is guaranteed to work ツ