April 21, 2019

Programmers: How do you design and prototype?

I'm wondering what are recommended ways for a typical engineer to design. I typically create basic interfaces and do it all through css/html playfully tweaking as I go. This might be a form of procrastination or maybe others do this too - I don't know! What are your thoughts? Is it beneficial to learning a design tool or outsource this?

  1. 2

    Hi Whoof, I'm a programmer with a design background. Creating interfaces in the browser is OK as long as you have it clear what you are aiming for. Being uncertain and already working in the browser is IMO a waste of time. If in doubt, write down all the functionality and information bits that need to be available on the screen and scribble the interface on a piece of paper first, trying out different layouts and making sure that all you need is there. Afterwards, in the browser, utility CSS frameworks (like Tailwind CSS) can speed up prototyping significantly. If you don't want to design your own components, I’d recommend using one of the popular frameworks (Bootstrap, Foundation, Bulma, UI Kit). Without a design background, you won't come up with anything more consistent and streamlined than the components those frameworks offer. By tweaking the colors, their border radius default and choosing a nice ui font they don't need to look like all the other sites built with them. Nothing wrong with using them – especially for Indi Hackers.

  2. 1

    First, if you're just aiming this at web developers, please rename your question.

    I mix stories and visual design. I always start my visual design with at least a throwaway scribble on paper. I've been doing paper prototypes since the early 90's.

    I'm a big fan of Bill Buxton's book "Sketching User Experiences" you can read about on his site https://www.billbuxton.com/

    I don't do formal use cases (didn't, even when they were popular in OO circles) but write stories about how a product will be used. Imagine you're scripting a 30 second ad that shows the product - what's the story of the ad used to sell the idea.

    Those stories are a source of ideas as to what needs to be presented in what order and grouping on the UI and what features are needed. A vital aspect is that the stories are how I can audit the UI - go back and compare what's been prototyped or even fully implemented and see if it matches the story.

    As a mobile developer, much of the time I'm using Sketch to do static screen layout then finishing rich prototyping and full code generation using Supernova Studio. In particular, this has allowed me to include animation (tastefully) in my interfaces.

  3. 1

    I'm a full stack engineer and aspiring designer. I used to just tweak CSS until it felt right and you know what, I found it's the most unproductive thing you can do. You spend ages getting margins/padding/font perfect on something only to realise it doesn't sit right with the rest of the page.

    I now use Sketch to do mock-ups up front and reckon it saves me hours of time. It all depends on how nice you want your page/app to look though. I'm a little OCD with look and feel

  4. 1

    Hi Whoof, I'm using Invision Studio. It's easy enough to use. The main things it allows me to build prototypes with animation pretty close to the real apps. I can show the idea to get some feedback on early stages and optimize workflows.

  5. 1

    Hi Whoof, I'm a backend developer but I work as full stack web developer, that means that create UI is not my favorite thing but is becoming more fluid for me with the time. What I normally do is sketching the main Idea first and after that go to the code. I start with a javascript framework (that helps a lot with the frontend structure) and after all the basic structural and functional base I start working on the css with a css framework too. This is just my way to work, share your thoughts ;)

  6. 1

    I like to use pencil and paper to sketch out wireframes. There's something about sketching it out away from the computer that I really like as I'm not constrained by code or thinking too hard about the engineering implications. This helps me make purely design based decisions. I try to iterate on the basic layout and then add more detail however hand-wavy it may be. Once I've tried out a few ideas, I'll pick my favorite and start putting together the skeleton code in html/css and then tweak colors, fonts, spacing, etc as I go.