Published on <a href="https://blog.prototypr.io/how-do-you-craft-a-good-product-and-make-a-bearable-first-impression-b0f554d37305?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Piotr Bender 
The tricky part about releasing your first product is that you have no idea if you are making the right moves.
But let us start with a quick introduction to who are we in the first place.
For over past few months I have been working on this project with my friend with whom I share a few years of business friendship, yet no ventures so far.
He is an experienced full-stack developer with some really high expectations as to the quality of his work. Although what I appreciate him for most is the “work smart, not hard” agenda that he pushes in almost every single aspect of the creation process. I believe that this mindset already saved us loads of time, and will save even more in the future.
I am a marketer with a few years experience in IT industry, and that is where I feel most confident.
At the moment we are both aspiring to learn about the UX since we believe that:
<ul>
<li>It defines the quality of the product like nothing else.</li>
<li>It is what pushes you above the competition.</li>
<li>It is simply about creating with the users at the top of your strategy.</li>
</ul>
We decided to join all of those skills and knowledge and create a single product that will be sort of verification if what we think is good will also be what wins the market for us.
The first idea that came to our mind was creating a UI kit. Why?
<ul>
<li>It is possible to create and manage the product, distribution and customer care in a small team.</li>
<li>It does not require any production resources, apart from the developers time.</li>
<li>The users (developers) share loads of feedback and want to participate in open-source projects.</li>
</ul>
<h3>What is a UI kit?</h3>
It is nothing more but a set of pre-made components and elements that are characterized by a specific design, packed in a single file.
Its job is to cut the work time you need to build a user interface for either an application or the web page.
The kits can be used by both designers and developers since they either come in a form of Sketch/Photoshop file for design purpose or a software for creating the actual UI.
<h4>What is great about kits?</h4>
<ul>
<li>Time savers You can drastically decrease the time you need to create a UI template, taking most of the styling off your back.</li>
<li>Bad design repellent They help devs not skilled with CSS or without a good taste, by forcing them to use a consistent design system, leaving less space for mistakes that the end user will suffer from.</li>
<li>Open sourced They are usually open sourced and community-driven, meaning that all the biggest nuisance and issues usually get solved fast.</li>
</ul>
<h4>What is not that great?</h4>
<ul>
<li>Lack of customization It is sometimes hard or even impossible to customize the kit to your standards, meaning that you might get stuck with a single component that just does not play its role so well.</li>
<li>Weight The more you pack the kit with components, features, and JavaScript, the heavier it gets. Each time someone new visits the page, the kit has to be downloaded, slowing down the page speed and heavily damaging the overall UX.</li>
<li>Design The reason why developers are reaching for the kits might as well be a reason why they should not be used so extensively. The same patterns, repeated over and over again on every single website developed with the kit might lead to a web bloated with bland sites, with absolutely no creativity involved.</li>
</ul>
<h3>Solution</h3>
There is an obvious need for a new type of tools. Tools that serve, rather than cause harm.
The subjectively new strategy to developing products is listening to what people have to say.
And that is simply what we did.
We have asked a single question on two popular platforms — <a href="https://www.reddit.com/r/Frontend/comments/7jd49n/what_will_you_really_need_from_a_ui_kit_in_2018/">Reddit</a> and <a href="https://news.ycombinator.com/item?id=16264969">Hacker News </a>— “What do you really need from a UI kit in 2018?”.
We have personally talked to developers and asked about their pains.
The feedback we have gathered was more than enough to give us a clear picture of a product we should create:
<ul>
<li>Lightweight In opposition to software that is growing in size, we should focus on crafting something light. Something, that will not affect the site performance, but at the same time will have all the crucial functionalities.</li>
<li>Customizable There are few products that allow you to customize themselves. “Do you need that yellow button? Fine, but prepare for downloading each and every component we have created, in every single coloristic version possible”. Enough with that. Developers need the freedom to construct their own tools, the way they need them.</li>
<li>Fresh in design Material and Flat design are now all over the place. You have most probably seen pixel-perfect designs, as well as the crippled ones, but the point here is that you have seen them all. To bring a refreshing breeze, we are using something that has not been seen before.</li>
<li>Free Some of the kits you might stumble upon across the web will come at some cost. It is, of course, fine to receive a material profit from the work and effort you put into something, but we believe that all the basic components and elements should be always available for free.</li>
<li>Easy to use The documentation should be simple and comprehensive. It should not be filled with useless content junk and should not serve a role of a marketing platform. The work itself should be close to copy/paste model, but easily customizable at the same time.</li>
</ul>
<h3>Effect — <a href="https://nespero.com/">Fluent Kit</a></h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IeP6h_tw3HGbcloY-iXuoA.jpeg">
We have built Fluent UI kit upon one of the most popular kits, Bootstrap 4, to make sure that most developers will be familiar with the concept right from the beginning.
It had to be something new and fresh, so we have got inspired by the Fluent Design visual language introduced by Microsoft.
The kit essentials are, and always will be free, providing you with all the necessary components used in modern web development.
The documentation is clutter free and easy to browse.
Soon, we will give our users the possibility to build their own instance of Nespero with a simple package builder.
We are going to craft the first UI kit that will be built upon the user feedback, fixing and fighting off all the issues they are struggling with.
And we really need your help in a form of that first, fundamental feedback.
If you find the kit worth trying out, let us know if we are on the right path.
You can find all the contact details on our contact page, or you can write your thoughts down in the comments.
Thank you for reading through and hope to hear from you soon!
Some useful links:
<ul>
<li><a href="http://nespero.com/">F</a><a href="https://nespero.com/">luent Kit</a></li>
<li><a href="https://nespero.com/">Fluent Kit demo</a></li>
<li><a href="https://github.com/nespero/fluent-kit">GitHub project</a></li>
<li><a href="https://fluent.microsoft.com">Fluent Design</a></li>
<li><a href="http://getbootstrap.com">Bootstrap</a></li>
</ul>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b0f554d37305" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-do-you-craft-a-good-product-and-make-a-bearable-first-impression-b0f554d37305">How do you craft a good product and make a bearable first impression?</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How do you craft a good product and make a bearable first impression?

Top Stories