A beautiful Sketch design that you could build to make your portfolio stand out
If you are a software developer applying to get your first job, having an outstanding portfolio should be one of your main priorities.
Even though your résumé is absolutely important and will be the first thing that employers will look at, your portfolio will be your secret weapon to stand out and show the complexity of the projects you have worked on.
However, even if you have built some really complex projects, if you can’t show them in a way that will get the employer’s attention, all your efforts will be in vain.
To put it in simple words, if your portfolio doesn’t look good, you won’t look good in the eyes of the employer.
I know this because I help people from all around the world become web developers and get their first remote job. Every day, I see the huge impact that having a strong portfolio has on their chances of landing their first job.
This is especially important if you want to get a job as a front-end or full-stack web developer. Your HTML & CSS skills are important, but you are ultimately supposed to build great UI/UX.
In a real job, there will most likely be a designer in your team that will take care of designing the UI/UX. However, you need to show that you can build beautiful products based on the specs of the designer.
How do you do that if you don’t have a designer to help you with your portfolio?
Here is the not-so-secret-anymore 😉 hack that we ask our students to use.
The Hack: Build a few fully-spec’ed projects using someone else’s designs
If you want your portfolio to stand out, build a few beautiful-looking frontend projects that communicate your attention to detail and love for great UI/UX.
You could just copy any website that you like (such as Pinterest). However, it will cause a much better impression if you build something beautiful that not many people know about.
One approach is to visit dribbble.com and find a few concept websites that you can build. Many designers take the time to reimagine how certain websites would look like if they were built from scratch. However, those designs often don’t get implemented. Here is where you come in: just pick one and build it from scratch. Here are a few examples — and remember to link to the original designer if you follow this idea.
A few concept websites found on Dribbble
However, the problem with this approach is that most of those designs will have visual assets (for example, background images) that you can’t export to include in your implementation. Also, as a junior developer you are probably not great yet at paying attention to all the little details that the designer thought about (such as margins, paddings, font sizes, and so on).
Here is an alternative approach that will make your portfolio projects look as amazing as the original designs. Find free Sketch templates, export them to Zeplin, and build them based on detailed specs.
Let’s analyze this approach step by step:
Step #1: Download a free Sketch template
Sketch is one of the most popular design tools used by product designers nowadays. Just go to Google and search for *free sketch templates website. *Open a few of those results and find a website design that you want to build. Here is a great one I just found using this approach.
Another Sketch template that you can use to build an incredibly well-designed project for your portfolio
Now download and install Sketch (there is a free 30 day trial) and open the Sketch template you downloaded in the previous step with it.
Make sure the design is complete and that it’s something that you want to build. Once you find a design that you like, move on to the next step.
Step #2: Export the design to Zeplin
Zeplin is another amazing tool built to help designers and developers collaborate more effectively with each other.
Designers upload their designs to Zeplin, and Zeplin shows all the font sizes, margins, and paddings so that developers can easily get those details without having any design knowledge. Zeplin even generates the CSS code for many of those components for you. Finally, it also lets you export all the images from the original Sketch file so you can easily use them when building the website.
Go ahead and sign up for Zeplin. You can use their free account that is valid for 1 project (that’s all you need). Now restart Sketch and go to the Plugins menu. If you see an option there called Zeplin, you are good to go. If you don’t see the option, follow these instructions to manually install the plugin.
Once the Zeplin plugin is installed in Sketch, go to Plugins > Zeplin and click on Export Selected Artboards. The Sketch design you have downloaded might have multiple artboards, each one corresponding to a different view of the app/website.
How to use Sketch export the design to Zeplin
Follow the instructions and upload all the artboards you want to implement to Zeplin.
Step #3: Build the design based on its detailed specs
Open your recently uploaded designs in Zeplin and notice how many details you get when you hover on each element of the design. Since the design has been organized using layers in Sketch, Zeplin can differentiate each element and show you specs such as font sizes and spaces between elements.
A Sketch design exported to Zeplin, where you can see all the specs and even the generated CSS code
If you want to export an image, click on the image in Zeplin and look for the option to download the PNG image on the right menu.
How to download visual assets from Zeplin
If you don’t see that option, go back to Sketch, click on the image you want to make exportable, and click on the option that says Make Exportable*. *After that, just re-upload the artboards to Zeplin and try again.
Option in Sketch to make images exportable in Zeplin
Finally, just use all these detailed specs and high-quality assets to build the website. And remember that great UIs are made out of hundreds of tiny details. Even though you might not appreciate those details individually, implement each one of them carefully using the specs from Zeplin and you will see how the final result looks more beautiful than anything you have ever built before.
Adding the finishing touches
Following this approach won’t just help you have a great portfolio that catches the attention of potential employers. It will also help you appreciate the great effort behind the work of designers, and **it will make you much better at working with designers on your team. **This, by itself, is also a great learning experience that employers will value.
You can follow this same approach to find existing portfolio designs to build your actual portfolio page. You don’t need the design your portfolio from scratch for it to be unique, you just need the content within it to authentic.
Remember to add all your previous projects to your portfolio, even the back-end ones. For those, try to use cards that show the title of the project with some cool font over a solid color or just a little piece of the UI of the project. That will make the design of your portfolio consistent.
Every project should list the technologies used and even a small description. More importantly, you should link to the live version of those projects (that’s where your new front-end projects will shine) and to the GitHub repos containing the code of your projects.
Finally, don’t forget to include your contact information, a link to your GitHub profile, and a list of other things that will make your portfolio unique (for example, open source contributions, articles you have written and anything else unique about you).
Wrapping up
Building an eye-catching portfolio is a really powerful hack, but don’t forget that you will ultimately have to pass technical and behavioral interviews in order to show that you can get the work done and get the job.
At Microverse, we ask our students to dedicate almost 180 hours of our training program to coding structures and algorithms and to prepare for the interviews. Make sure to prepare yourself for that next step, too.
If you have questions about the portfolio approach explained in this article or about getting a job in general, feel free to follow me on Twitter and ask me any question you have.
Top comments (0)