Dev starter kits

Project overview

Starter.dev is a collection of starter kit projects and related tools to help get you up and running on your next project without spending days adding all the pieces and configurations to support whatever libraries or frameworks that you choose.

Tasks
  • Conduct research on existing services. Find out users' pain points, and based on the research come up with a clear UX.
  • Build an MVP option and define potential growth points and improvements for the next iterations.
  • Create wireframes to test out suggested concept options.
  • Prepare high-fidelity prototypes based on the research and approved concept.
  • Build Light and Dark themes, and prepare a responsive design.
  • Create a logotype, and consider its logomark for socials, favicon, etc.
  • Create detailed dev guidelines, and do visual checking to make sure the app fits the design.
Tools
Figma
Figma
Solutions
Outcome

Based on the research we did, wireframes we've built the product with the clear guidance for the end-users – developers that wants to kick start their projects with different technologies quickly. Close collaboration with the dev team and detailed design guidelines helped to make the handoff smoothe.

Solutions

Ideation & Wireframes

As the first stage of design we did a research of competitors and  user pain-points (in our case it was a developer that is looking for a quick dev setup for his new project), and roadmap the MVP scope of work.

Ideation & Wireframes - Initial wireframe sketches - To represent the early wireframes created as part of the ideation process
Ideation & Wireframes - Initial wireframe sketches - To represent the early wireframes created as part of the ideation process

Ideation & Wireframes

As the first stage of design we did a research of competitors and  user pain-points (in our case it was a developer that is looking for a quick dev setup for his new project), and roadmap the MVP scope of work.

Ideation & Wireframes

As the first stage of design we did a research of competitors and  user pain-points (in our case it was a developer that is looking for a quick dev setup for his new project), and roadmap the MVP scope of work.

Ideation & Wireframes - Initial wireframe sketches - To represent the early wireframes created as part of the ideation process
Ideation & Wireframes - Roadmap outlining MVP scope - To show the planned scope of work for the minimum viable product (MVP)

Ideation & Wireframes

As the first stage of design we did a research of competitors and  user pain-points (in our case it was a developer that is looking for a quick dev setup for his new project), and roadmap the MVP scope of work.

Ideation & Wireframes - Initial wireframe sketches - To represent the early wireframes created as part of the ideation processIdeation & Wireframes - Roadmap outlining MVP scope - To show the planned scope of work for the minimum viable product (MVP)

Ideation & Wireframes

As the first stage of design we did a research of competitors and  user pain-points (in our case it was a developer that is looking for a quick dev setup for his new project), and roadmap the MVP scope of work.

Ideation & Wireframes - Initial wireframe sketches - To represent the early wireframes created as part of the ideation processIdeation & Wireframes - Roadmap outlining MVP scope - To show the planned scope of work for the minimum viable product (MVP)

Design foundation

To make our UI consistent we've bootstrapped the project with UI foundations that was continually updated with new elements, components, and templates using the atomic approach.

Design Foundation - Component library interface - To highlight the collaborative effort in bootstrapping and updating the UI foundations using the atomic approach
Design Foundation - Component library interface - To highlight the collaborative effort in bootstrapping and updating the UI foundations using the atomic approach

Design foundation

To make our UI consistent we've bootstrapped the project with UI foundations that was continually updated with new elements, components, and templates using the atomic approach.

Design foundation

To make our UI consistent we've bootstrapped the project with UI foundations that was continually updated with new elements, components, and templates using the atomic approach.

Design Foundation - Component library interface - To highlight the collaborative effort in bootstrapping and updating the UI foundations using the atomic approach

Design foundation

To make our UI consistent we've bootstrapped the project with UI foundations that was continually updated with new elements, components, and templates using the atomic approach.

Design Foundation - Component library interface - To highlight the collaborative effort in bootstrapping and updating the UI foundations using the atomic approach

Design foundation

To make our UI consistent we've bootstrapped the project with UI foundations that was continually updated with new elements, components, and templates using the atomic approach.

Design Foundation - Component library interface - To highlight the collaborative effort in bootstrapping and updating the UI foundations using the atomic approach

Main Page

The home page has a short definition of the product and cards that lead straight to the tech stack documentation. We also considered white and dark themes to improve acccesabilty and fit developers needs.

Main Page - Product definition section on homepage - To highlight the user experience and accessibility considerations for different themes on the homepage.
Main Page - Product definition section on homepage - To highlight the user experience and accessibility considerations for different themes on the homepage.

Main Page

The home page has a short definition of the product and cards that lead straight to the tech stack documentation. We also considered white and dark themes to improve acccesabilty and fit developers needs.

Main Page

The home page has a short definition of the product and cards that lead straight to the tech stack documentation. We also considered white and dark themes to improve acccesabilty and fit developers needs.

Main Page - Product definition section on homepage - To highlight the user experience and accessibility considerations for different themes on the homepage.

Main Page

The home page has a short definition of the product and cards that lead straight to the tech stack documentation. We also considered white and dark themes to improve acccesabilty and fit developers needs.

Main Page - Product definition section on homepage - To highlight the user experience and accessibility considerations for different themes on the homepage.

Main Page

The home page has a short definition of the product and cards that lead straight to the tech stack documentation. We also considered white and dark themes to improve acccesabilty and fit developers needs.

Main Page - Product definition section on homepage - To highlight the user experience and accessibility considerations for different themes on the homepage.

Catalogue

To represent all the available frameworks and technologies, we've designed the catalog page that helps to find a specific framework and all tech stacks with this technology.

Catalogue - Overview of catalog page layout - To illustrate the functionality that helps users find specific frameworks and tech stacks
Catalogue - Overview of catalog page layout - To illustrate the functionality that helps users find specific frameworks and tech stacks

Catalogue

To represent all the available frameworks and technologies, we've designed the catalog page that helps to find a specific framework and all tech stacks with this technology.

Catalogue

To represent all the available frameworks and technologies, we've designed the catalog page that helps to find a specific framework and all tech stacks with this technology.

Catalogue - Overview of catalog page layout - To illustrate the functionality that helps users find specific frameworks and tech stacks

Catalogue

To represent all the available frameworks and technologies, we've designed the catalog page that helps to find a specific framework and all tech stacks with this technology.

Catalogue - Overview of catalog page layout - To illustrate the functionality that helps users find specific frameworks and tech stacks

Catalogue

To represent all the available frameworks and technologies, we've designed the catalog page that helps to find a specific framework and all tech stacks with this technology.

Catalogue - Overview of catalog page layout - To illustrate the functionality that helps users find specific frameworks and tech stacks

Documentation

To guide a developer we've designed the documentation page with step by step information about how to use tech stack for user’s project.

Documentation - Step-by-step guide section - To illustrate the detailed step-by-step instructions for using the tech stack
Documentation - Step-by-step guide section - To illustrate the detailed step-by-step instructions for using the tech stack

Documentation

To guide a developer we've designed the documentation page with step by step information about how to use tech stack for user’s project.

Documentation

To guide a developer we've designed the documentation page with step by step information about how to use tech stack for user’s project.

Documentation - Step-by-step guide section - To illustrate the detailed step-by-step instructions for using the tech stack

Documentation

To guide a developer we've designed the documentation page with step by step information about how to use tech stack for user’s project.

Documentation - Step-by-step guide section - To illustrate the detailed step-by-step instructions for using the tech stack

Documentation

To guide a developer we've designed the documentation page with step by step information about how to use tech stack for user’s project.

Documentation - Step-by-step guide section - To illustrate the detailed step-by-step instructions for using the tech stack

Logo design

After we created the product design we’ve focused on the logo. After several iterations with the client and dev team we picked one and created a logomark for socials, favicon, forums, etc.

Logo Design - Comparison of logo iterations - To highlight the evolution and refinement of the logo design through multiple iterations
Logo Design - Comparison of logo iterations - To highlight the evolution and refinement of the logo design through multiple iterations

Logo design

After we created the product design we’ve focused on the logo. After several iterations with the client and dev team we picked one and created a logomark for socials, favicon, forums, etc.

Logo design

After we created the product design we’ve focused on the logo. After several iterations with the client and dev team we picked one and created a logomark for socials, favicon, forums, etc.

Logo Design - Comparison of logo iterations - To highlight the evolution and refinement of the logo design through multiple iterations

Logo design

After we created the product design we’ve focused on the logo. After several iterations with the client and dev team we picked one and created a logomark for socials, favicon, forums, etc.

Logo Design - Comparison of logo iterations - To highlight the evolution and refinement of the logo design through multiple iterations

Logo design

After we created the product design we’ve focused on the logo. After several iterations with the client and dev team we picked one and created a logomark for socials, favicon, forums, etc.

Logo Design - Comparison of logo iterations - To highlight the evolution and refinement of the logo design through multiple iterations

404 page

As this product is for developers, the customer asked us to create some creative 404 page, and the result you can see below.

404 Page - Creative error message design - To showcase the unique error message tailored for developers.
404 Page - Creative error message design - To showcase the unique error message tailored for developers.

404 page

As this product is for developers, the customer asked us to create some creative 404 page, and the result you can see below.

404 page

As this product is for developers, the customer asked us to create some creative 404 page, and the result you can see below.

404 Page - Creative error message design - To showcase the unique error message tailored for developers.

404 page

As this product is for developers, the customer asked us to create some creative 404 page, and the result you can see below.

404 Page - Creative error message design - To showcase the unique error message tailored for developers.

404 page

As this product is for developers, the customer asked us to create some creative 404 page, and the result you can see below.

404 Page - Creative error message design - To showcase the unique error message tailored for developers.
No items found.

Outcome

Based on the research we did, wireframes we've built the product with the clear guidance for the end-users – developers that wants to kick start their projects with different technologies quickly. Close collaboration with the dev team and detailed design guidelines helped to make the handoff smoothe.

Linkedin

I've worked with WebFolks for years and their work always exceeds my expectations! I highly recommend them for everything from UI/UX to illustration and concepts.

Linkedin
Tracy Lee
CEO at This Dot Labs

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline