Designing a wireframing kit
Client
Services
tools
DATE
October 2019

[ case study coming soon]

I built this project simply for me πŸ˜…. The reason is that over a long time of working with clients and brainstorming ideas, I always found myself repeatedly creating the same wireframe designs. So I wanted that process to be faster, where all I'll have to do after a flow is approved is quickly create a wireframe using already designed components, test out the ideas and iterate on a better solution and then move on to the juicy part, the design πŸ˜‹.

‍

No items found.
No items found.
No items found.
No items found.
No items found.
Product
This is some text inside of a div block.
Tools
This is some text inside of a div block.
Client
This is some text inside of a div block.
My Location
This is some text inside of a div block.
Date
October 2019
View Project
View Project
A swift wire-framing kit that contains well-designed mobile components that allow you to cook up ideas in a flash!
Old but gold
This project is tagged old but gold because it was done in the early stages of my design career and I made some rookie errors πŸ˜… Β but it still has valuable insights

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

[ case study coming soon]

I built this project simply for me πŸ˜…. The reason is that over a long time of working with clients and brainstorming ideas, I always found myself repeatedly creating the same wireframe designs. So I wanted that process to be faster, where all I'll have to do after a flow is approved is quickly create a wireframe using already designed components, test out the ideas and iterate on a better solution and then move on to the juicy part, the design πŸ˜‹.

‍

Goal 🎯

I built this project simply for me πŸ˜…. The reason because over a long time working with clients and brainstorming ideas I always found myself creating the same wireframe designs over and over again. I wanted that process to be faster, where all I have to do after a flow has been approved (a user map) is quickly create a wireframe, test out the ideas and iterate on a better solution and then move on to the juicy part, the design πŸ˜‹.

‍

Approach πŸ› 

I had one desire, to be faster πŸƒπŸ½β€β™‚οΈ and I already had multiple wireframe files I created for different projects, so all I did was to look through each project and highlight components that were constantly repeating. Then I created a simple list of those components and then I started to design.

‍

Solution 🎨

Wireframes are more concentrated on understanding that aesthetics. so I didn't want to go over the top with colours, font styles, etc because it can move from looking like a wire-framing kit to a simple UI kit. So, I stuck to a colour scheme that was simple and efficient and built the components out of it.

‍

This is just the version 1, I'm looking forward to including more components and improving the general look and feel.

‍

Click to view project

‍

‍

Well, till next time, see you as we keep building products for the next billion users.

‍

‍

‍

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

No items found.
Found this post a little interesting?
Sign up to get notified when I post new content
I'm not surprised you subscribed. Glad? Yes, but not surprised 😏
Probably my fault, but something went wrong, please try again
Designed and Built by yours truly ✌🏽
Last updated Oct. 2021