Dev Starter Kits Design
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
FigmaSolutions
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.
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.
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.
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.
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.
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.
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.
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.
Let's see how This Dot can help you
Are you looking for a development consulting firm that can provide staff augmentation, architectural guidance, and consulting to your company? Look no further than This Dot Labs. Our team of experienced developers and managers can help you implement and teach modern web best practices, and deliver your projects on time and within budget. Contact us today to learn more about our services and how we can help you achieve your development goals.
You might also like
Portfolio
Our clients are building for the future. Explore This Dot Labs' portfolio, and see how we have helped them achieve their diverse technical goals.
Load Management Platform Design
topics covered in this case study:
Stanza is an app which manages the site’s ups and downs, improves scalability and performance while managing multi-tenant or spiky traffic.
Driving Web3 Innovation: Collaborative Success in Showcasing Chainlink Functions
topics covered in this case study:
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.
Daily Polished, a members-only e-commerce platform focused on luxury beauty and wellness products
topics covered in this case study:
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.
Developer Communities Platform Design
topics covered in this case study:
Developer Communities Platform
WebXR Performance Testing with React: Revolutionizing Mixed Reality Development
topics covered in this case study:
This collaborative endeavor demonstrated the potential of WebXR and showcased the power of leveraging community support and expertise in the open-source ecosystem.
Enhancing Sentry’s Suite of Debugging Tools with a Cutting Edge Replay Feature
topics covered in this case study:
Sentry’s Emerging Technologies team approached This Dot Labs to augment their team developing a new feature offering a visual replay of user interactions that would seamlessly fit in with Sentry’s portfolio of error and performance monitoring tools.
- See full portfolio