Published on | Prototyping: From UX to Front End — Medium Erika Kehrwald Schematic App (v1) vs. Schematic Toolkit (v2)

Schematic App

In the first version of Schematic I wanted to build a web-based drawing tool, a wireframe generator that would allow visual and user experience designers to push past the mundane but practical arrangement of content. I wanted users to pick between vague representations of the content they might have on their app (button, text, image, video, and icon) so that they could visualize it quickly and also so the tool could challenge the design conventions (in terms of form and shape) that have seem to become industry standard. Unfortunately, the drawing tool failed to reach expectations as it was disguised as a prototyping tool, but was merely a draggable layout generator. It was a nice exercise in seeing the 320×1024 canvas in a different way, but you could also say I was just lazy and wanted to find a way to program content that could arrange itself.

I thought that if I designed with subconscious rules in the back of my head, I could create design rules for automation. However, the problem wasn’t that simple. I couldn’t reduce good design to a system of rules or functions that could work across all screen types, use cases, and apps.

Schematic: Version 1

Schematic Toolkit was a more practical application of some of the ideas from Schematic. I wanted it to be code-based and generative, making sketch files that the user could download and modify. I even contacted the team at Sketch to see if there was anyway to convert HTML and CSS files to a sketch file format. This was their reply.

It was the response I had expected, but it was worth a shot. Regardless, I was determined to have downloadable sketch files so I knew I’d have to fake the automation and do it manually.

My original 2 minute sketch of what the website might look like

So I started the long, tedious process. I decided on design rules that all the screens would follow. I originally wanted color palettes of ranging from 3–10 colors, 15 font variations, 5 screen types and 3 platforms to choose from (web, iOS and android). However this would have led to an exorbitant amount of possible permutations. After taking my idealistic aspirations down a notch, I decided on a modular and open-source design system that all the screens would abide by and that would be manageable to create in 4–6 weeks time. The final system has 5 color palettes, 5 font variations, 4 screen types, 2 versions per screen type and 2 platforms to choose from (iOS and android).

And four weeks later I had designed 1,830 individual sketch files and started making the website. Schematic Toolkit had taken form.

Schematic Toolkit

Schematic Toolkit is a resource for mobile screen templates. Screen types including calendar, payment, login, settings, and profile screens.

“Schematic Toolkit is a tool for non-designers to start thinking about design in a systematic and modular way. “

I believe because the screens are medium fidelity and adhere to rules that are easily interchangeable, it helps make the process behind which designers make decisions of color palette, font, or material or flat design transparent. I don’t want to hide the design rules from non-designers or people who don’t believe they are creative. Rules like form, contrast, color, scale should be obvious in design decisions and presented as patterns in good design work. I want to give people tools that make them more interested in learning and building their own understanding of aesthetics and beauty.

Creative confidence means screens > flows

Schematic Toolkit lets people download individual screen types within a system of rules and accessibility (using only free google fonts) rather than take on a finished or high-fidelity app. Starting the design process with high-fidelity prototypes and flows can discourage creativity and encourage plagiarism and regurgitation of design conventions seen all too frequently.

Submitting Screen Types

I know the site is fairly limited right now, but as part of my goal to foster creative confidence in all people, I created a place on the website for users to submit any new screen types that are consistent with my color and typography rules to be featured on the site so the library can continue to expand!

Schematic Toolkit 2.0

In the future I would love to be able to convert HTML and CSS to sketch files so I wouldn’t have to do it all manually (trust me, creating a little under 2,000 screens takes a long time… over 200 hours!)

As well, it would be fantastic to have the original Schematic app live up to the drawing/ prototyping tool I wanted it to be: where users would upload content and I could automate layout according to the design rules I demonstrated in Schematic Toolkit so that the user would only have to change scale, rotation, position, or opacity to customize styling but I’ll leave that on the back burner for now.

Schematic: from drawing tool to toolkit was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Schematic: from drawing tool to toolkit

Cool stuff, every week

More Articles