Web User Interface Prototyping

Designing website UI is super fun. You could visualize the perfect look of your dream page, or even make some money doing it for someone. Vectr makes creating web user interfaces extremely simple. In this tutorial we are going to guide you through some tips and hints of creating UI projects with Vectr.

Check out this great video created by Julian Ohayon on how to create UI designs with Vectr:

1. Do The Research

Before starting your UI project in Vectr it’s always worth getting some inspiration. It’s going to give you a wider perspective of what you really want to create, and also save you time making you more confident. As the famous painter Pablo Picasso said: “Good artists copy, great artists steal”. There are great sources over there like Awwwards that showcase best web design trends and most good-looking websites around the Internet.

2. Set Up Vectr Working Canvas

Vectr let’s you use plenty of templates for your designs, and you can always customize them. You could use 640px by 640px size of your working canvas for such UI design project.

3. Choose Your Colors

Before you add any elements, be sure to choose wisely your color palette. You cannot mix up just any colors you like, so pick those that match together nicely. You could use external services like Coolors.co to help you create perfect color palettes.

4. Add Main Elements

Once you are all set with your working canvas, you can start adding first elements to your webpage design. A good idea would be to start with the logo and a menu bar. Make them consistent with each other, and then draw the sections of your future website as you like them to be. Before putting any content, write it down somewhere first and make sure it’s good before you add it to your UI project. It’s better to avoid any typos :)

5. Make It Complete

Next you can add all the content you like to your UI design project: images for different website parts, text, sections, sliders etc. There’s no point of perfection here: you can spend hours and hours making your page look magnificent, and it’s really fun!

6. Bring The Design Live

The second step after creating your UI website project is actually bringing your page live. Designs created in Vectr could serve a solid blueprint for any web-developer to build the page with HTML, CSS and some web coding language. You could find some freelance web developers able to do that on some large platforms like Upwork or Crew.co.

Hope you enjoyed the tutorial! Stay tuned for more Vectr tutorials coming up soon. We’d be happy seeing your web UI designs in our Vectr Community group on Facebook.

Share your creations with us on social media using #madewithvectr. We’re working on many more tutorials and suggestions are always welcome. Request a Tutorial Here 👈