Elements of web design - Speaker Deck

Slide 1

Slide 1 text

Elements of web design Get into the nitty gritty with Lateral Nord

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

[email protected] +358 40 7188776 @jerryjappinen Product design consultant Jerry Jäppinen

Slide 4

Slide 4 text

First things fi rst

Slide 5

Slide 5 text

What is the web?

Slide 6

Slide 6 text

The web is an open platform for everyone

Slide 7

Slide 7 text

Open platform Everything on the web... • is open and public (source code and assets) • can be manipulated by end-users • can be manipulated by browsers • can be manipulated by extensions • can be linked and embedded on other services

Slide 8

Slide 8 text

How designers see the user

Slide 9

Slide 9 text

How developers see the user

Slide 10

Slide 10 text

How users actually are

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

1. Device interaction 2. Layout model 3. Visuals 4. Elements 5. Auditing 6. Technical terminology

Slide 13

Slide 13 text

1. Device interaction 2. Layout model 3. Visuals 4. Elements 5. Auditing 6. Technical terminology

Slide 14

Slide 14 text

Devices • Phones • Tablets • Laptops • Desktops • Smart TVs • Smart watches • Screen readers • Outdoor displays • E-readers • Printers • Game consoles • Smart fridges

Slide 15

Slide 15 text

Screens • Matte vs glossy • High vs low-DPI • OLED vs LCD • E-ink • SDR vs HDR • Viewing angles • Color reproduction

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Browser chrome • Pages are (typically) continuous and dynamically sized • Elements within a page can scroll • Horizontal vs. vertical • Free scrolling vs. paginated vs. automatic

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Input devices • Cursor • Touch • Touch pad • Scroll wheels • Keyboard • Game pads Each have their own best practices and design considerations (hit area size, hover feedback, common errors etc.)

Slide 27

Slide 27 text

Operating systems • Dark vs light theme • Native input elements • Security controls and limitations • Platform conventions • Design and style

Slide 28

Slide 28 text

Interaction • Pointer movement • Clicks • Scrolls • Touches • Drags • Key presses

Slide 29

Slide 29 text

Viewport size • Screen and window sizes vary between devices • Viewport size on one device varies • User can change viewport size in one session • Mobile first?

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Scrolling • Pages are continuous and dynamically sized • Elements within a page can scroll • Horizontal vs. vertical • Free scrolling vs. paginated vs. automatic

Slide 32

Slide 32 text

1. Device interaction 2. Layout model 3. Visuals 4. Elements 5. Auditing 6. Technical terminology

Slide 33

Slide 33 text

Quick foreword

Slide 34

Slide 34 text

Native vs. non-native rendering

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Native rendering A browser renders graphics natively Every object can have properties Different objects support different properties

Slide 37

Slide 37 text

Non-native Every pixel is predefined No run-time manipulation with user interaction Native Browser has data on individual elements, composing the final rendering Design can be manipulated and tied to user interaction

Slide 38

Slide 38 text

It's a bit similar to bitmap vs. vector

Slide 39

Slide 39 text

Think of all the possibilities of this native rendering machine

Slide 40

Slide 40 text

What design tools do you use?

Slide 41

Slide 41 text

Try to forget about them!

Slide 42

Slide 42 text

Let's go through the building blocks

Slide 43

Slide 43 text

1. Device interaction 2. Layout model 3. Visuals 4. Elements 5. Auditing 6. Technical terminology

Slide 44

Slide 44 text

The box model This is a box It has properties Properties take up space framer.com/blog/posts/ box-model

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Layout model • Inline • Block • Flex • Grid • Absolute • Fixed • Canvas * • SVG * • Usually elements don't "float" • Columns and grids mean something different from print • Baseline grids don't exist • Everything is nested boxes • ...except inline elements • * Canvas/SVG

Slide 49

Slide 49 text

Layout with columns?

Slide 50

Slide 50 text

Layout with columns? • Traditional (e.g. 12-column) layout grids don't work well in web • No native column grids, only hacks • Web layouts are dynamic and responsive • Design tool for web: https://webflow.com/

Slide 51

Slide 51 text

Consider square grids for design

Slide 52

Slide 52 text

1. Device interaction 2. Layout model 3. Visuals 4. Elements 5. Auditing 6. Technical terminology

Slide 53

Slide 53 text

Element properties • Dimensions • Position • Background color • Background image • Font family • Border • Transformation • Layout • Overflow and scrolling • Opacity • Text indentation • Shadows • Border radius • ... https://www.quackit.com/css/properties/

Slide 54

Slide 54 text

Colors • Hex • RGB(A) • HSL(A) • Keywords • Run-time variable support • Gradients

Slide 55

Slide 55 text

Units • px • vh • vw • vmin • vmax • pt • pc • cm • mm • in • % • em • rem • ex • ch https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573

Slide 56

Slide 56 text

Font sizing • Points or pixels are fixed units • em and rem are context-sensitive and can be scaled • vw and vh are dependent on viewport size

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Type

Slide 59

Slide 59 text

https://demofestival.com/

Slide 60

Slide 60 text

Typography • Text flow can't be totally manually controlled • Ahead of mobile platforms • Some great typographic controls, better than you think • Super/subscript • Text directions • See ruby annotations

Slide 61

Slide 61 text

Font sizing • You can use any unit to define font sizes • Why is a piece of text the size it is? • Is it relative to... • screen size? • parent element's font size? • our place in the universe?

Slide 62

Slide 62 text

Variable fonts • New! • Completely dynamic font properties • Can be smoothly adjusted run-time • → animation • → interaction • https://v-fonts.com/

Slide 63

Slide 63 text

Moving image • Native animations • Native transitions • Native & streaming video • JavaScript-powered anything • WebGL • https://easings.net/en

Slide 64

Slide 64 text

https://codepen.io/jjperezaguinaga/full/yuBdq

Slide 65

Slide 65 text

Bitmaps • Multiple bitmap formats supported • Can be adjusted with filters (blur, greyscale...) • Can be cropped and resized in client • Servers can most things clients can't (reduce file size, apply more filters...) • Can be analyzed with code • Find dominant colors, faces etc.

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

SVG • "Native" vector format • SVG is XML is HTML • Supports text • Supports CSS and JavaScript and animations • Many libraries build on top of SVG • Flexible, highly optimised

Slide 68

Slide 68 text

Filters Rendering of elements can be changed with filters • Blur • Hue • Saturation • Color inversion • Contrast • Brightness

Slide 69

Slide 69 text

Canvas A frame within a page that can be used for "raw" drawing and rendering Elements can be manipulated with code Supports 2D and real 3D

Slide 70

Slide 70 text

3D Web elements are 2D With stacking order (z-index) With transformations With perspective Better 3D support can be achieved with • JavaScript libraries • SVG • WebGL and shaders

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

https://blog.logrocket.com/the-noobs-guide-to-3d-transforms-with- css-7370aafd9edf/

Slide 73

Slide 73 text

https://zzz.dog/

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

1. Device interaction 2. Layout model 3. Visuals 4. Elements 5. Auditing 6. Technical terminology

Slide 76

Slide 76 text

Context matters • Web sites • Emails • Banners • Rich app components • Screen readers • RSS and web readers

Slide 77

Slide 77 text

Web site

Slide 78

Slide 78 text

Banners and embeds

Slide 79

Slide 79 text

E-readers

Slide 80

Slide 80 text

Rich app components

Slide 81

Slide 81 text

Read mode

Slide 82

Slide 82 text

Loading times • A web page is a collection of files • Each file must be delivered from server to browser • Sometimes loading some or all assets fail • Consider loading times in design decisions • Design solutions can hide loading times or make them more tolerable • Loading times impact conversion €€€

Slide 83

Slide 83 text

O ffl ine • Network conditions are never stable • Assets can be cached or explicitly stored for offline use • Does the design rely on constant connectivity? • What use cases work without a connection? • Is initial loading fast enough for an unstable connection?

Slide 84

Slide 84 text

Localisation • Can't directly control date and time formatting • Not all fonts support all languages • OS language • Text direction varies with language • Input devices are different across countries • User expectations and capabilities

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

Sitemaps and navigation • Usability • Overall scope of the site • Navigation interactions • Current location within site • Sitemap for search engines and other external services • Structured data • Layout structure within a page

Slide 89

Slide 89 text

Embedded documents

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

Embedded documents • A web page is called a document • A document can link to other documents • A document can embed another document • Mobile apps with web views • HTML banners • Streaming video players • Contact forms • Maps • Social plugins

Slide 92

Slide 92 text

Rich components • Web is almost on par with mobile apps • Barring specialised use cases (machine learning, camera, connectivity) • Web experiences are not static • A web page is not just a "canvas for painting" • Live components with life cycle, behavior, interaction • Traditionally relied on native form elements • Now completely custom-build components are commonplace

Slide 93

Slide 93 text

Dynamic content • Most web services are maintained for a long time • CMSs manage updates and translations • Designers usually work with draft content • Content will be changed and added after release • Designers set the rules and framing for dynamic content • Structured content vs. layout management

Slide 94

Slide 94 text

Structured content People are managed in CMS. How they are presented is up to design. Publishing system "Pages are managed in CMS. What modules or components are available, is up to design."

Slide 95

Slide 95 text

Audio • Supported quite well on the web • Rarely used by convention • Useful for specific use cases and explicit need • Users might have audio channel reserved or disabled

Slide 96

Slide 96 text

https://ganharp.ctpt.co/

Slide 97

Slide 97 text

Progressive enhancement • Nothing works exactly the same everywhere • High backwards compatibility • Fallbacks for fancier features • Progressive enhancement vs. graceful degradation • Network quality (e.g. long loading times) • Device performance (e.g. slow effects) • Browser features and bugs (e.g. lazy loading) • OS features (e.g. video autoplay)

Slide 98

Slide 98 text

Progressive enhancement • What can I do right now? • https://caniuse.com/ • What can I expect in the near future? • https://webkit.org/status/#? status=under%20consideration,in%20development, supported%20in%20preview • E.g. real vertical grid control: https:// drafts.csswg.org/css-rhythm/

Slide 99

Slide 99 text

Connected services • Example • Web site shared on a social network • Web site saved to home screen • Web is connected: web site is not just a web site • Users and platforms have freedom • They determine how your web site is used • Browsers and other services scrape web sites continuously

Slide 100

Slide 100 text

Meta info • Web sites use meta tags and manifest files • Structure of content (web app, site, AMP, article...) • Machine-readable content (event dates, blog authors...) • How content should be presented (mobile status bar, dark mode...)

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

Accessibility • Web is an open, universal platform • Most of us have two eyes and 10 fingers • Most people. • Some rely on aids to use digital services • Some have impairments • Some are not familiar with the target platform or conventions • Some services are experienced in less traditional environments

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

URLs • URLs need to be user friendly • They should be canonical • They shouldn't be too long • They can encode information that's important

Slide 106

Slide 106 text

Persistence How can user's experience persist when they visit a web service multiple times? • URLs • Cookies • LocalStorage • Server-side storage

Slide 107

Slide 107 text

1. Device interaction 2. Layout model 3. Visuals 4. Elements 5. Auditing 6. Technical terminology

Slide 108

Slide 108 text

Auditing • Always audit your work! • For the user, end result matters - not the design on paper • Be ready to make changes when it doesn't work in practice

Slide 109

Slide 109 text

Tools • Content analysis: https://www.similarweb.com/ • Google's Lighthouse: https://developers.google.com/speed/ pagespeed/insights/ • Pingdom's speed test: https://tools.pingdom.com/ • Mobile test: https://search.google.com/test/mobile-friendly • https://www.thinkwithgoogle.com/feature/testmysite • https://gtmetrix.com/ • https://app.neilpatel.com/en/seo_analyzer/ • https://yellowlab.tools

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

1. Device interaction 2. Layout model 3. Visuals 4. Elements 5. Auditing 6. Technical terminology

Slide 114

Slide 114 text

HTML • HTML is structured content • CSS determines how HTML elements should be rendered by a browser • HTML and CSS are declarative languages • https://html.spec.whatwg.org/#toc-semantics

Slide 115

Slide 115 text

Server

Slide 116

Slide 116 text

Client

Slide 117

Slide 117 text

Window

Slide 118

Slide 118 text

Document

Slide 119

Slide 119 text

CSS

Slide 120

Slide 120 text

HTML

Slide 121

Slide 121 text

JavaScript

Slide 122

Slide 122 text

React

Slide 123

Slide 123 text

Vue

Slide 124

Slide 124 text

PHP

Slide 125

Slide 125 text

Amazon

Slide 126

Slide 126 text

Deployment

Slide 127

Slide 127 text

SEO

Slide 128

Slide 128 text

That's it!

Slide 129

Slide 129 text

[email protected] +358 40 7188776 @jerryjappinen Product design consultant Jerry Jäppinen

Slide 130

Slide 130 text

No content