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

Tools of the trade

Nothing will ever beat pen and paper :) No matter how good or bad your drawing skills are right now – continue or start using your sketchbook for notes, doodles and design drafts. You will find that the best approach is to capture your idea immediately and without distraction on paper. It is quicker and easier than any other tool :)

graphic/design apps

• Krita
• painting program • bitmap
• open source
• PC / MAC / Linux

• Affinity Designer
• graphic design software • vector
• by Serif
• PC / MAC

• Affinity Photo
• graphic design software • bitmap
• by Serif
• PC / MAC

• Sketch
• digital design toolkit • vector
• by Bohemian B.V.
• MAC

• Figma
• collaborative interface design tool
• by Figma
• PC / MAC

• Inkscape
• graphics editor • vector
• open source
• PC / MAC / LINUX

• gimp
• GNU Image Manipulation Program • bitmap
• open source
• PC / MAC / LINUX

image optimisation

• XnConvert
• image converter
• by XnSoft
• PC / MAC / Linux

• SVGOMG
• SVG optimisation tool • svg
• by Jake Archibald
• online

• JPEGmini
• image optimisation tool • jpg
• by Beamr
• PC / MAC

• RIOT
• image optimisation tool • jpg / gif / png
• by RIOT
• PC / MAC

• imageOptim
• image optimisation tool • jpg / gif / png
• by Kornel Lesiński
• MAC

• ImageAlpha
• image optimisation tool • png
• by Kornel Lesiński
• MAC

• Kraken
• Online Image Optimizer
• by Nekkra UG
• online

• cloudconvert
• online file converter
• by Lunaweb GmbH
• online

• compressor
• Fast & efficient image compression
• by compressor.io
• online

• imagify
• Image optimization for everyone
• by wp-media
• online

• squoosh
• image compression web app
• by GoogleChromeLabs
• online

code editors

• Espresso
• "More productive than caffeine"
• by Kangacode Pty Ltd
• MAC

• Nova
• "The beautiful, fast, flexible, native Mac code editor."
• by Panic Inc
• MAC

• Atom
• "A hackable text editor for the 21st Century"
• open source (via GitHub)
• PC / MAC / LINUX

• Sublime Text
• "A sophisticated text editor for code, markup and prose"
• by Sublime HQ Pty
• PC / MAC / LINUX

• Visual Studio Code
• "Code editing. Redefined."
• open source (via Microsoft)
• PC / MAC / LINUX

• Notepad++
• "free source code editor"
• by Don Ho
• PC

• BBEdit
• "It doesn’t suck.®"
• by Bare Bones Software, Inc.
• MAC

• GEdit
• "GNOME text editor."
• a GNOME Project
• PC / MAC

dev apps

• Cyberduck
• FTP :: "Connecting to every server."
• by iterate GmbH
• PC / MAC

• FileZilla
• FTP :: "FileZilla®, the free FTP solution."
• open source
• PC / MAC / LINUX

• Transmit
• FTP :: "Upload, download, and manage files on tons of servers with an easy, familiar, and powerful UI."
• by Panic Inc
• MAC

• MAMP
• local server :: "Your local development solution."
• by MAMP Gmbh
• PC / MAC

• GitHub Desktop
• Version control :: "... a unified cross-platform experience that’s completely open source and ready to customize."
• open source (via GitHub)
• PC / MAC / LINUX

• Tower
• Version control :: "Version control with Git - made easy. In a beautiful, efficient & powerful app."
• by fournova
• PC / MAC

• Sourcetree
• Version control :: "Simplicity and power in a beautiful Git GUI"
• by Atlassian
• PC / MAC

• Dash
• "Dash is an API Documentation Browser and Code Snippet Manager."
• by Kapeli Apps SRL
• MAC iOS

browsers

• Firefox Developer
• "The browser made for developers."
• by Mozilla
• PC / MAC / LINUX / android / iOS

• Firefox
• "Fast for good. Powerfully private."
• by Mozilla
• PC / MAC / LINUX / android / iOS

• Waterfox
• "Free, open and private."
• by Alex Kontos
• PC / MAC / android

• Brave
• "Secure, fast & private web browser with adblock."
• by Brave Software Inc.
• PC / MAC / LINUX

• Edge
• "The faster, safer way to get things done on the web."
• by Microsoft
• PC

• Edge Chromium
• "It’s time to expect more..."
• by Microsoft
• PC / MAC / LINUX / android / iOS

• Chrome
• "Now more simple, secure, and faster than ever - with Google’s smarts built-in."
• by Google
• PC / MAC / LINUX / android / iOS

• Tor
• "Anonymity Online"
• open source
• PC / MAC / LINUX / android / iOS

• maxthon
• "Fast, secure and ad-free."
• by Maxthone
• PC / MAC / LINUX / android / iOS

• Vivaldi
• "Your browser matters. Take control…"
• by Vivaldi Technologies™
• PC / MAC / LINUX

• Safari
• "The best way to see the sites."
• by Apple
• PC / MAC / LINUX / android / iOS

• Opera
• "Fast, secure, easy-to-use browser"
• by Opera Software
• PC / MAC / LINUX / android / iOS

• Yandex
• "…the browser that's fast and secure"
• by Yandex
• PC / MAC / LINUX / android / iOS

• Avast
• "Secure, fast, and private."
• by Avast Software
• PC / MAC

browser add-ons

• Design
• bookmarklet : utilities for grid layout, measurement and alignment.
• by SpryMedia
• any browser

• What font
• "The easiest way to inspect fonts on webpages."
• by Chengyin Liu
• any browser

• Awesome Screenshot
• "Capture, Annotate and Share"
• by Diigo Inc.
• Firefox/Chrome

• Full Page Screen Capture
• "... a simple way to turn a full web page into an image."
• byFull Page, LLC
• Firefox/Chrome

• Web Developer Toolbar
• "The Web Developer extension adds various web developer tools to a browser."
• by Chris Pederick
• Firefox / Chrome / Opera

• Web Developer Checklist
• "Analyses any web page for violations of best practices"
• by Mads Kristensen
• Firefox / Chrome / Edge

• Empty Cache Button
• "Cache clearing made easy. One click."
• by mvm
• Firefox

• Clear Cache
• "Clear cookies, history and cache with a single click."
• by Armin Sebastian
• Chrome

search engines

• DuckDuckGo
• "The search engine that doesn't track you."
• by DuckDuckGo

• ecosia
• "The search engine that plants trees."
• 501(c)(3) non-profit

• Qwant
• "The search engine that respects your privacy."
• by QWANT.

• swisscows
• "Privacy safe WEB-search."
• by Swisscows AG

• Internet Archive
• "Our mission is to provide Universal Access to All Knowledge."
• by Ecosia GmbH

• Wikimedia
• "…a global movement whose mission is to bring free educational content to the world."
• by Wikimedia Foundation

• Wolfram Alpha
• "Compute expert-level answers using Wolfram's breakthrough algorithms, knowledgebase and AI technology"
• by Wolfram Alpha LLC

• creative commons
• "Find your inspiration."
• Flickr by Yahoo

• webopedia
• "Online Tech Dictionary for Students, Educators and IT Professionals"
• by QuinStreet Inc.

• Yahoo!
• "...helps you find exactly what you're looking for."
• Yahoo / Verizon Media

• Bing
• "more than simple search"
• by Microsoft

• Google Search
• "Our mission is to organise the world’s information and make it universally accessible and useful."
• by Google

testing tools

• contrast ratio
• tool to check colour contrast against WCAG guidelines
• by Lea Verou

• Color Contrast Analyser
• easily determine the contrast ratio of two colours
• by TPGi

• WAVE
• Web Accessibility Evaluation Tool
• by WebAIM

• TAW
• Web accessibility test
• by CTIC

• AChecker
• Web Accessibility Checker
• by ATRC

• Responsively
• "Develop responsive web apps 5x faster!"
• by Manoj Vivek

• Responsinator
• "... quickly get an indication of how their responsive site will look on the most popular devices."
• by Tama Pugsley and Andy Hovey

• Am I responsive
• "A time saving exercise by @justinavery for RWD Weekly Newsletter"
• by Justin Avery

• W3C Markup Validation Service
• "Check the markup (HTML, XHTML, …) of Web documents"
• open source (via W3C)

• Nibbler
• Insights into key areas, including accessibility, SEO, social media and technology
• by Silktide

• GTmetrix
• "… gives you insight on how well your site loads and provides actionable recommendations on how to optimize it."
• by GT.net

• web page test
• "… test from multiple locations around the globe using real browsers and at real consumer connection speeds."
• open source (via Google)

• Site 24x7
• "Free Network and Site Reliability Engineer Tools"
• by Zoho Corp.

• MX Toolbox
• "... free, fast and accurate network diagnostic and lookup tools."
• by MXToolBox, Inc.

• PageSpeed Insights
• "... analyzes the content of a web page, then generates suggestions to make that page faster."
• by Google

• Resizer
• "An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet."
• by Google

ethical alternatives

Laura Kalbag gave an excellent talk titled 'Defying the mainstream: building technology that respects our rights' at New Adventures Conference 2020. This really gave me a boost to continue my mission to promote small tech and alternatives. I'd highly recommend having a look at Laura's slides and watch the video of the talk - and check out the list of resources!
Thank you, Laura :)

switching.software is an ongoing and brilliant project to follow! You'll find lists of alternatives to well-known software ~ worth considering and trying out!