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

Images for the web

typography project

tye icon

This is your first main (+assessed) project - for which you are to create small website to present your chosen text. Check project briefs for details.

core criteria

  1. minimum of 3 pages + site navigation
  2. design specs: focus on type, colour and layout only
  3. NO images permitted: not as background or decorative nor content!

DEADLINE: 03/12/2021

tips & reminders

A few points to consider and warning of potentially tricky routes ;)

  • choice of text:
    don't be tempted to use your favourite song lyric as your selected text. This can be a much more difficult challenge than you are prepared for!
    It is incredibly difficult to create a layout for poems and lyrics for an audience which might not be familiar with the rhythm of reading such pieces of literature require. If it's a song you love, you will inadvertently be imagining the audio alongside it, which will mean you will read this text with the melody and flow in your mind. This won't be the case for your readers and your task is to make your chosen text read well and express its message (without additional media, such as music or visuals).
  • no images whatsoever!
    Your submission can only include images for the project/design planning - the website folder itself is not to include any images, nor link to any online visuals either.
  • no icon fonts!
    The same applies for icon fonts (which we will talk about soon for other aspects). In the past, some people have tried to out-smart the brief requirements by using font sets which include images - this is not acceptable! ;)
    You could use typographical symbols, such as elaborate ampersands, or reference marks if fitting. Any other visual representations should be avoided.

preparing / optimising visuals

Working with images will be core to your design work. While it'll be fairly easy to put together your ideas as static images for mockups and so on it will be vital to consider carefully how the visuals will be implemented online. This includes the correct size and dimension, the right file formats and an efficient implementation.

balloon over hills, colour tiling demo

preparing images for the web

Apart from video and audio, image files contribute a lot of weight to your page, slowing down the loading process. Slow loading times are detrimental to both user experience and search ranking. This tutorial focuses on image resizing, cropping and web-safe formats.

optimising your images further

... two techniques you could use to edit your photos in preparation for online presentation, followed by some great tools to take your optimisation even further.

view slides:
CSS background images

A quick recap of file formats, creating tiled backgrounds and saving our files for display on the web.

illustration of stacking order of multiple background images

video course

Pluralsight offers a good course on images/media and accessibility.
Accessibility: Exploring Images and Media

read tutorial:
Get to grips with CSS3 multiple background images

This is a step-by-step tutorial on how to implement the given images to create a given design for an error page. To apply multiple background images via CSS to the same element we'll have to understand the stacking order of our visuals.

illustration of stacking order of multiple background images
illustration of border image

Back in the day, 10 years ago, we did not have as many wonderful CSS rules as we have today. This is when I got all excited about the border-image property which was very new and not widely support yet. Nowadays, support is mainly sorted and you can have as much fun as you like :)

read notes

profile project

Quick reminder: the brief asks for a single page profile design. There is no need for a menu at all; though if your page is very content-heavy, in-page links will be fine, of course. Links to your other online pages/profiles etc can be added as part of the page content.

Double-check project briefs for details and examples from students in the previous years.

CHECK LIST #4

  1. work on any visuals included in your design / experiment with patterns for background
  2. produce the final single webpage
  3. prepare a pseudo-PechKucha presentation as recorded video (time limit: 1 min 36sec, saved as MP4)
  4. collect all files into a neatly organised project folder and submit via Slack or email
  5. encouraged but optional:
    post your presentation to Slack to get everyone's views and feedback. You've got to start somewhere ツ

19/11/2021 submit your files

speechbubble + hello

No more than 6 words on a slide. ever.

Seth Gothin

PechaKucha

Japanese for “chit chat”, PechaKucha is a presentation method with a simple rule: 20 slides with 20 seconds of commentary on each. Ideally visually focused, there'll be few if any words on our slides which will allow our audience to concentrate on our spoken words.

The time will come soon when you'll be asked to present your work to the group. Part of any web worker's job, it's important for us to learn how to present our ideas and convey underlying concepts and design decisions.

pseudo-PechaKucha

As part of this project—consider it a warm-up exercise—prepare a very short presentation of your final design and submit the video alongside the rest of your files. To make it easier and quicker, let's half the slides and set a time limit of 10 seconds per slide. This means 10 slides at 10 seconds (or a tad more as it's your first go at this) each ~ that makes it roughly only 1 minute and a half ~ easy :)

For your presentation, tell the story of your final design. Did your initial moodbard inspire you? Or did you dismiss it and move into a different direction? Did the design evolve as you'd expected? Or better than you'd hoped? Show us your sketches, drafts, scribbles and mockups. No need for text just visuals to underline your story. Keep it short and sweet and focus on the best bits :)

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

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.
This video was created early 2020 when Jitsi was still new and evolving. At that point, Chrome was the browser which it worked best in. By now, you can use your preferred browser :)