If you have ever wondered to how to put some order to your design documents, this is the place for you. Learn practices that you can apply right away.
I'm a big fan (or should I say nerd?) of having an organised design file. Even when I'm working for myself on my own projects, I like to keep everything tidy. I always think that is better to invest some seconds arranging and naming things on the fly than moving fast, but, sooner or later, finding an unmanageable situation that will inevitably slow you down.
Contents provide visual examples on how to keep your file structured in a logical, predictable and scalable way. For now, it's keeping in mind the way Figma and Sketch work, but it's not focusing in either of them in particular —so perhaps you can extrapolate concepts to any design software.
I'm aware that there are so many ways of doing all this. What I am presenting here is just one of them. Maybe it's not better or worse than others, just different. When designing, you have to take an approach and have a consistent, but flexible and coherent way of doing things that you can sustain over projects. And this is mine.
You are of course welcome to share your point of view and enrich the contents of these guidelines that may evolve over time.
Design and development
Idea, design and development were done by me (hey, I'm Javier Cuello) on my free time while moving from one place to another in Europe.
This site is using Kirby as CMS. It's very flexible and I've been using it on my latest projects. From their website: "With Kirby, you build your own ideal interface. Combine forms, galleries, articles, spreadsheets and more into an amazing editing experience."
The fonts that I'm using are IBM Plex Sans for most of the texts, and IBM Plex Mono for the code blocks. I chose it because it provides great readability and it helps give the site the look that I was aiming for. You can download both for free from Google Fonts and other places.
If you liked the 3D shapes in the homepage and headers, those are part of Shape Fest, and amazing project by Joseph Angelo Todaro that contains a massive library of free 3D shapes. You can download some of them for free, but make sure of checking the other packages on the website.
The design was done mostly on Figma, but also complementing with Sketch from time to time.
How to contribute and contact
You are more than invited to help make this website better. I'm aware that content needs improvements, more graphics, different practices and examples to reflect the diversity of ways of designing in the real world. You can help by sending feedback, suggestions, your own examples and even contributing to the HTML markup.
For that and more, please find me on LinkedIn.
License
The content of this website are under Attribution-NonCommercial (CC BY-NC) license. More information.
Acknowledgements
I'd like to thank Bastian Allgeier for his support. Also, Florencia Rosenfeld and Emmanuel Borgarelli for their feedback.