Visual Design - From-Scratch Designs
The purpose here is to practice generating visual concepts from scratch, without worrying too much about larger user experience questions such as overall site structure. Visual design considerations such as accessibility and color theory are still on the table, though. Prompts come from from dailyui.co, though I am being slightly selective about which ones I do (for example, I’m skipping a credit card checkout screen for now).
The approach here is to start with individual pages in Sketch, progressively designing more elements and creating reusable components that could at some point be added to a larger design system. With that in mind, I’m planning to build on design language from one screen to the next, so the visual styles of each screen builds on the previous ones rather than making a brand new design language for each screen.
A Login Screen:
A mobile login screen
A desktop login screen
One of the first things I did was create a basic type system, with a handful of header styles and body text. For larger header styles, I wanted a typeface that had some personality while still being legible, so I chose Josefin Slab. Smaller headers and body text was a more straightforward choice, where I went with Open Sans as a fairly ubiquitous choice that’s considered to be very easy to read at most scales.
I haven’t settled on a name (branding is a new skill to me too!) but wanted to have a logo to work with, so I chose something straightforward that also felt like a reference to the “double diamond” approach to UX design.
Color choices aimed to meet accessibility standards, where the primary action color and white had high enough contrast ratios as measured by the Stark plugin for Sketch to meet WCAG accessibility standards, at least at a AA level. I also aimed to have that primary color have sufficient contrast from a solid black to be distinguishable from body paragraph text in the case of a link.
The desktop version I struggled with - to me it feels like the content is floating in space; it’s missing navigation/a header and footer that would make it feel more grounded, but I haven’t yet thought of a page map to make those look or feel meaningful.
I’ll continue to update this page as I get more practice and generate more designs.