Where the design community meets.
Founder and CEO of Flawless App. Designer + Developer Joined over 1 year ago
Now about my design process:
1) Content As you can imagine the biggest problem of putting this together was the amount of content we had. 4 years of research turned out to be quite a lot of information to fit into one website. We've tried different approaches and ended up on structuring content with 2 layers navigation.
There are 8 main topics (like "Free Design Resources" or "Managing community efforts"). For each of these topics, available information is grouped by the tool of interest (Sketch, Figma InVision Studio etc.). So as a first step, the user selects the tool. Once we know the tool we show the sub-categories related to a specific topic (like "Free Design Resources") along with visual examples.
In the end, the design consisted of 64 separate pages of content + empty states and other utility information.
2) Visual Style This time I've tried to stand back from the regular website style we use in our other products (like Flawless Feedback or Design Tools Weekly). Instead, I've decided to go with vibrant, high-contrast gradients and dark background.
It turned out to be rewarding to drop everything I used before and just sit with a pen and paper to come up with something new and fresh.
3) Branding This part was particularly tricky. The website itself has no standard logo. But still, we had to come up with the proper representation of the project. After numerous variations and tries the main association chain was developed:
‣ The project is about community ‣ Community is about people ‣ The community must be grown ‣ Building community means growing it ‣ Trees and leaves could be a representation of growth in nature ‣ The leaf has its own lifetime and growth cycle as well as community ‣ Leaf requires care to be grown as well as community ‣ Care about growth means love ‣ Love represented by the heart ‣ Community is always diverse and should be accessible for anyone to participate ‣ Community is never static and constantly changing
As a result of such thinking I've come up with the logo, which is: ‣ Tree leaf which has a form of heart ‣ It has vibrant color as a representation of diversity. Leafs could be different, not just green. ‣ The leaf has holes here and there as a representation of the dynamic nature of communities.
I really hope you enjoy reading the research and hopefully, you can find something useful for building your own community!
I'd love to explain a bit about branding we use for this project.
Since we started working in design & development industry we started taking notes on how other companies grow their communities. The website itself is full of real-life examples and interactive elements. We put a lot of effort to make sure it stands out, considering the amount of content we have there.
I do hope, that everything is perfect ;)
Good news! Probably we can expect more innovation from Sketch team ;)
Haiku is cool!
does it exist inside InVision Studio or as a separate tool? I haven't tried it yet.
We work in Figma. Our marketing can open it and leave comments there. Yeah, I need to import Sketch files to Figma, but that's the fasters feedback loop for us so far.
InVision works as well.
I use free UI kits, especially when I need to mock something very fast.
Boring typography. It feels that their new logo doesn't have any space...
thanks for the correction.
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.