DesCode

DesCode is a Unified platform that aims to bridge the gap between the UX/UI designers and developers (coders) in IT sector.

Comment

DesCode - Seamless UI/UX Design and Development Collaboration

Inspiration

I am a UX/UI design learning aspirant and usually what I see around me that the design field is alienated from the dev industry (i.e. coding and development) but I feel that the designers and developers are not different. In fact, they are connected with each other. To shorten this gap and to eradicate this mentality I have came up with the platform DesCode.

What we built

DesCode is a platform that allows the web developers to connect with the designers. The components of UI design that are created by designers, can directly serve to developers as an integral part of their coding/development workflow. Suppose you are a web developer and I am a designer in an organisation, now I have made UI design for the website, now how can you make use of these, so DesCode allows you to get the CSS components of the frame (design) which you can use directly while writing the code in DesCode's web editor. Yes, you heard right you can directly get preview of the designs and get the code out of them. Moreover, you can also make use of the variables that stores the values like color hexcodes(#FFFFFF white), Numbers(margin: 10px, padding: 32px), string(Lorem Ipsum...) created by designers while making designs which can reduce most of your time.

design handoffs import within github

Now it is essential for designers also to deliver the best of their works to developers so that the developers won't get any trouble while writing the code. In the development the concept of Responsive design is too much important and thing which connects it to the designers is the concept of Constraints, Auto-Layouts and variables. Hence, the DesCode offers the designers to get the hands-on experience on these design-concepts. The user will have concise tutorials on these concepts from beginner to advance.

2 3

DesCode also includes the service to connect the desingers with developers using the GitHub. Here, designers can push the assets (like svgs, pngs, jpegs etc.), variables, and layer CSS codes directly from their designs into the repository. Have a quick view over these. 5 6

How I built

I have made my project using the Design approach and on behalf of the UX/UI design principles. The tool that I have used to make DesCode is Figma in which I have created more than 90 iterations(interfaces) for this platform. Then I have connected all the interfaces using the live prototype option. While making the desings, I have also used the design of GitHub interface so that I can give out solution on the problem of connecting the designers to developers using Github.

Challenges we ran into

Well there are many challenges that came into my way, first one is to complete the project before the deadline itself. Secondly, as a solo participant it is way much difficult to design all the screens and interfaces (over 90+) in such a short period. Thirdly, the figma also provides the code (CSS) for the design handoffs so it is challenging for me that how can i build something that will connect the developers to this feature directly. Fourth, I faced a challenge where i need to think that how can i differentiate my platform DesCode from other design platforms like Figma and also from web editors like (Replilt, vs code). Fifth, this project involves the advance prototyping concepts of design and as a beginner I was not much proficient in this so that part is also challenging for me.

Accomplishments that we're proud of

I was very proud on myself as I have created whole project before the deadline and that too when i am participating as solo participant. This project enhanced my basics of UX/UI design principles and also enables me to bear the pressure.

What we learned

This project allowed me to learn UX/UI design fundamental concepts. Also, I have learned advanced concepts of design like variables, constraints, auto-layouts, component, instances and advanced prototyping. I have also learned about the version-control system Github and make use of it in my project.

How my project stands apart

Well each hackathon is based on CODE but my project is completely based on Design Approach and why I have opted for this approach? Because as an UX/UI designer I feel like design is considered something as a side thing but let me tell you without a good design and research about the product the working of product itself cannot do anything. So that's why I challenged myself for this competition.

What's next for DesCode

DesCode is totally build on the principles and approach of Design. Next, I am looking that how can DesCode collaborate with other big design tools like Figma, Framer, AdobeXD in terms of its unique feature.

Built With

Share this project:

Updates