<commit_before>---
layout: post
title: Prototyping in code
description: "Prototyping in code"
page-name: "post"
---


I recently started a new job which I love, traditional design tools such as Photoshop, Illustrator and Sketch are no longer a part of my working day wich makes me very happy. Gone also are the ongoing debates around which prototyping tools we should be using and how best to share what we build with the rest of the team.

Sketching

Build with code

1 prototype fpr all screens

speed of changes and tweaks

open url to share aroud

Ability to produce usable soloutions and test code for accesability and performance - cant do this in prototypes

Keeps me working with CSS :) and semantic markup

Greater control over the final output

Problems - Can be time consuming - but only build after testing sketches - patten library is essential - let go of clean code!!!!!

Takes investment upfront to build a design language in code, longrt term bennefitd make this woth while<commit_msg>Update draft<commit_after>---
title: Saying goodbye to Photoshop (&amp; Sketch &amp; Illustrator)
author: <NAME>
layout: post
category: post
---

Wether it’s Sketch, Illustrator, Photoshop or Affinity the process of creating detailed screens as static images has always been slow, and has never been overly useful when describing how elements should react to varying screen sizes or changes in user input.

Traditional design tools such as these are no longer a part of my working day which makes me very happy.


## The good / bad old days

I started out as a website designer, my role included the design and build of small to medium sized company websites using Wordpress and Magento. Each project would start with a detailed Photoshop design of the home page, usually taking a full day to complete.

These designs were then built with a 'pixel perfect' approach and no consideration for changes in screen size, content or language.

I have since experienced a range of differing but equally frustrating processes and workflows, from 3 separate images to suit Desktop, Tablet and Mobile, to Online tools like Zeplin and ????.

All of these relied on flat images to convey how an app should be interacted with, and required a lot of work to be modified.






Sketching

Build with code

1 prototype for all screens

speed of changes and tweaks

url to share for test sessions

Ux includes code!!!

Ability to produce usable soloutions and test code for accesability and performance - cant do this in prototypes

Keeps me working with CSS :) and semantic markup

Greater control over the final output

Problems - Can be time consuming - but only build after testing sketches - patten library is essential - let go of clean code!!!!!

Takes investment upfront to build a design language in code, longrt term bennefitd make this woth while

Do the hard work to make it simple - Need pattern library to keep things quick, longer start up period.
{'fraction_non_alphanumeric': 0.034623217922606926, 'fraction_numerical': 0.0010183299389002036, 'mean_word_length': 4.234458259325044, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 4, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7142286', 'n_tokens_mistral': 751, 'n_tokens_neox': 700, 'n_words': 473}