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

Images for the web.

balloon over hills, colour tiling demo

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.

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.

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

recap:

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
illustration of border image

Back in the day, more than 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, go on ~ try it out :)

read notes

JPEGmini app icon
  • JPEGmini
  • image optimisation tool • jpg
  • by Beamr
  • PC / MAC
 RIOT app icon
  • RIOT
  • image optimisation tool • jpg / gif / png
  • by RIOT
  • PC / MAC
 imageOptim app icon
  • imageOptim
  • image optimisation tool • jpg / gif / png
  • by Kornel Lesiński
  • MAC
 ImageAlpha app icon
  • ImageAlpha
  • image optimisation tool • png
  • by Kornel Lesiński
  • MAC
 kraken icon
  • Kraken
  • Online Image Optimizer
  • by Nekkra UG
  • online
 cloudconvert icon
  • cloudconvert
  • online file converter
  • by Lunaweb GmbH
  • online
 cloudconvert icon
  • compressor
  • Fast & efficient image compression
  • by compressor.io
  • online
 imagify icon
  • imagify
  • Image optimization for everyone
  • by wp-media
  • online
 imagify icon
  • squoosh
  • image compression web app
  • by GoogleChromeLabs
  • online
 SVGOMG icon
  • SVGOMG
  • SVG optimisation tool • svg
  • by Jake Archibald
  • online
 XnConvert app icon
  • XnConvert
  • image converter
  • by XnSoft
  • PC / MAC / Linux

profile project

CHECK LIST #3

  1. work on experimenting with colour schemes
  2. post your ideas/progress to your Slack feedback thread - or share in Whimsical
  3. share feedback and comments with each other ;)
  4. apply your final colour scheme to your profile page

feedback threads on Slack

Carry on working in groups - this week, I'll leave the setup of the threads to you :)

Just remember that each week, there's a re-shuffle of teams to give everyone a chance to work with everyone else ~ well, in theory anyway ツ

speechbubble + hello

Feedback groups

To allow us all to view each other's work in progress - each group is to put together one image - a summary or collage of each person's work, to be shared via slack for quick discussion in class. I've used a random selector to pick one person per group, marked by an asterisk ✱, to be responsible for putting this up. This will change each week as the groups arrangements.

2/11/2022 work progress of checklist #2

Standardistas

Standardistas - I
  1. Andre ✱
  2. Armani
  3. Emil
  4. Ibrahim
  5. Lipi
Standardistas - II
  1. Muhammad ✱
  2. Paula
  3. Qu
  4. Vidhi
  5. Adi
Standardistas - III
  1. Anumeha
  2. Bukie
  3. Harideep
  4. Jessica
  5. Mona ✱
Standardistas - IV
  1. Natalie
  2. Sophie
  3. Peter ✱
  4. Ye-Seul

Codepoets

Codepoets - I
  1. Amrutha
  2. Devjan ✱
  3. Gopika
  4. Jaanvi
  5. Larmie
Codepoets - II
  1. Prachi
  2. Sabbu ✱
  3. Sushan
  4. Aleyna
Codepoets - III
  1. Brikena
  2. Eddy
  3. Jagatheesan ✱
  4. Jeena
Codepoets - IV
  1. Miri
  2. Rohith
  3. Sukhi ✱
  4. Zara

video courses

Here are some video tutorials which will help you get to grips with working on web images. The apps used are the Adobe CC but the principles apply to all.