🚀 My First UI Design: Vuejs Colombia Community Site!

#MadeWithPenpot
,
1

a14cd3220668153.67c844fd81928
a14cd3220668153.67c844fd81928600×1067 150 KB

I’m thrilled to share my first UI design created in Penpot, a powerful open-source design tool. This project is a website design and user flow for the Vue.js Colombia Community, aimed at providing an intuitive and visually appealing experience for developers.

:sparkles: Highlights of the Design:
:white_check_mark: Modern and Clean Interface: Aligned with Vue.js branding.
:white_check_mark: User-Friendly Navigation: Designed to make information easy to find.
:white_check_mark: Interactive Prototypes: Showcasing the flow of key features.

:backhand_index_pointing_right: Check out the full project on Behance:
:link: VueJs Colombia Site Design & Flow

Huge thanks to the Penpot community for creating such an amazing tool that makes designing a joy. I’m excited to keep exploring and creating more with it!

5 Likes
2

:clap: this looks fantastic!

I’d love to know… did you use Flex or Grid layouts for any aspect of this design?

1 Like
3

Thank you so much for your reply! :heart_decoration:

I like to use flex boards in almost everything because they make it easier to convert designs into code.

I also prefer to name objects with HTML tags as prefixes, for example:

  • div_object-name
  • h1_section-title

This helps developers quickly understand the type of HTML tag to use.

Maybe next time, I’d like to experiment with grids. I really want to try them out!

1 Like
4

100%. And Flex makes so much sense for your layout here…

Oh I love this! I do something similar with typographies, naming them h1, paragraph etc.

1 Like
5

If you want to stay in touch, feel free to add me on LinkedIn:
:backhand_index_pointing_right: www.linkedin.com/in/hardstone

6

Awesome design! I love how the triangle :downwards_button: in the header aligns perfectly with the center line of the body—it looks absolutely fantastic! :fire:

1 Like
7

Very nice.

There are some text legibility and contrast issues that might be worth looking into. White thin text over a stripped background could be hard to read. The “unete a nuestra communidad!” text might also have bad contrast with that gray, worth checking if it’s WCAG compliant (not everything has to has to be WCAG compliant but it’s good practice IMO). Last the “vueJS Colombia” text in the footer under the main logo has insufficient contrast.

Love the navbar, and how it breaks up the box composition.

1 Like
8

I really appreciate your comment! I’ve taken note of your feedback about the text contrast and will fix the text in the footer.

1 Like