Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Robert Brada
Robert Brada
4,004 Points

How to create design of dashboard

Hi, I got a job to create design of a material-designed dashboard. Here is an example. https://d13yacurqjgara.cloudfront.net/users/168866/screenshots/2287181/material_dashboard1.jpg

But I have no idea how to do it. I thought that my job is to create a HTML/CSS website, that will be somehow "connected" with JavaScript. But then I heard, that I have to create my website in a vector-graphic editor (e.g. Inkscape) and the JS programmer will then make the single-web page application according to my design vision.

The point is, that I have no idea how are these dashboards made. Can someone explain it to me, please? I see only finished dashboards everywhere, but I can't find any tutorial how to do it or something like that...

4 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

My honest advice to you, is to probably drop the job, let your client know about the miscommunication and find out if you can change your responsibilities for the project. This will save both you and the client time and money as you don't want to create a sub-par design that wasted your time and the clients money.

However, if you really still want to stick with this project and the task that you have been given, my best advice is to grab an editor like Illustrator/Inkscape to layout a design. If you have no experience with any of these software, team treehouse has a great series on Illustrator, but you will have to learn inkscape elsewhere. Honestly though, the idea of the design is up to you and your clients, and that transcends simple knowledge of the software itself, you need to be able to create a design based on a current trend known as material, Google may be able to assist you: https://www.google.com/design/spec/material-design/introduction.html

Best of luck to you, and again, if you truly have no experience with something like Illustrator or the design aspect of web-design, my advice is to drop the project.

Best of luck!

Vikas Lalwani
Vikas Lalwani
10,413 Points

To be honest, it's a complex process. A lot of thinking goes into it than what's visible on the surface. I am not sure if you are still looking for solution as your question is three weeks old. But if you are, then you will find below resources helpful:

Hope it helps!

Robert Brada
Robert Brada
4,004 Points

Thank you for your response. It's my job, we are doing an project with my friend, I won't get money for making it. It's something like an opportunity to do learn how to do it. I already have an experience with Inkscape. The main problem is, that I don't know how is the graphic of dashboard (e.g. charts) made. I don't know if it's made in CSS and HTML or made as vector images that change their shape/size according to javascript code and so on..

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

It's generally a mix of both, the overall design can be created using CSS, but icons and graphics are generally created in an editor and saved as an SVG for use and customization with CSS

Robert Brada
Robert Brada
4,004 Points

Thank You, your advice was very helpful.