Dev Starter Kits Design

Starter.dev is an open-source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, and more to come.

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.

Tech-stack

Solutions

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 accessibility and fit developers needs.

Starter.dev main webpage

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.

Starter.dev logo design displaying final logo and alternative options

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.

Example of documentation provided based on tech stack chosen

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 of available frameworks and technologies with associated tech stacks

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.

Starter.dev 404 page where the numbers are created using technology and frameworks logos

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.

Starter.dev offerings including sections on starter kits, command line interface, community, and GitHub repositories

Shows a list of pre-configured tech stacks including Angular/Typescript, Next.js/React Query/Tailwind, Remix/GraphQL/Tailwind, and more available on Starter.dev

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 software user interface that displays a desktop with a variety of fonts and colors available

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 smoother.

Clients Success Stories

Explore Story

This Dot Client

Daily Polished, a members-only e-commerce platform focused on luxury beauty and wellness products

This Dot Labs took over architectural decision making and development for the e-commerce store and provided a seamless transition with timely deliver of the platform.

Explore Story

This Dot Client

Empowering Teams with Comprehensive Tech Stack Assessments

Teams often face challenges in evaluating their tech stacks and implementing new technologies efficiently. This Dot Labs provided an organization an extensive technical assessment, resulting in an 80+ page detailed report that provided in-depth analyses and actionable recommendations across maintainability, performance, security, and accessibility.

Explore Story

This Dot Client

Leveraging a RAG AI Chatbot for Efficient Search and Information Extraction from Video Archives

This Dot Labs developed an AI-powered solution to help the team quickly search through hundreds of hours of recorded video meetings, podcasts, and interviews.

Explore Story

This Dot Client

Driving Web3 Innovation: Collaborative Success in Showcasing Chainlink Functions

Chainlink, the company behind the Web3 services platform and blockchain oracle network of the same name, approached This Dot Labs to build a showcase application featuring Chainlink Functions.

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.