✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to work with a UI Designer

Dash
#1

Hi, I’m a new Dash user and have really liked it so far. I don’t have much talent in web design and in general my UI designs look terrible. In the past, I’ve simply created a static html form and the response and then given it to a contractor for a few hours of work and told them told them “make it look good with CSS”. This also allows me to do the actual backend coding work in parallel with the UI design. It seems with Dash that the code is more embedded with the UI design.

So, has anyone successfully worked with a UI designer and what should I give the designer to work on? Does the UI designer need to know Dash and need access to my backend code?

#2

Since I’m not getting any response, let me try to add a little more clarity. I’m primarily a Python developer and I need some way to expose server functionality through a UI. I would like to contract out the UI design. I see 2 main options here:

  1. I could do the web design myself. I realize it is not terribly hard and it seems like Dash excels at making it easy for developers to create decent looking sites. However, I neither enjoy web design nor am I particularly good at it.

  2. My current plan is to just give the UI designer a hand-drawn mockup and tell them to make a fake Dash main.py file with the UI Form and the data presented nicely. Then I would modify their main.py file to use dynamic data. Will this work?

Has anyone else worked with a UI designer? How did you do it?

#3

I’ve worked with a designer before. The designer produced mock-ups which allowed me to export CSS for each of the components in the mock-up. I then translated this into dash through a combination of custom CSS classes and inline styles. The components in dash_html_components map directly onto HTML elements, and you can set className or style accordingly to achieve pretty much any look you like.

The main challenge we had was that some components outside of dash_html_components are a little harder to style consistently because they apply some styles themselves already which need to be reverse-engineered or overridden. Otherwise it was pretty easy process.