When it comes to Front-End Web Development, how the code functions, and the overall user experience are the top priorities. However, there's nothing wrong with wanting to add unique elements purely for aesthetic, or stylistic value. This can be especially useful if you are looking to spice up your portfolio.
As a graphic designer turned (aspiring!) web developer, I have a few resources that are free to use that could help your portfolio stand out to potential employers and clients.
1. Pexels.com
This free to use photo library has amazing visual content provided by freelance photographers through their social media accounts. All you have to do for this site is sign up with a viable email address and begin downloading your desired content!
2. Google Fonts
Google fonts is a free to use collection of fonts, and even suggests possible font pairings the you have a font selected. Its easy to use and allows for downloads of all the relevant information you need to include in your next dev project.
3. Envato Elements
This site offers thousands of resources for devs and designers including fonts, mockups, color themes, and design inspiration. The one downside to this site is that you only receive a one-week trial before it requires a paid subscription. However, I always take advantage of free trials when I can!
4. Figma
Figma is so much more than just a prototyping tool. I have utilized Figma as a guide when beginning a new project to help me better understand the coding requirements and formatting of the site's pages. When a project is completed I like to compare the prototype to the finished product and then create a mockup utilizing resources from the Figma community. The Figma community has created so many useful resources for devs and designers alike, including a new responsive prototyping tool, and mobile phone and laptop mockups to showcase your finished product in a professional manner.
I have used all of these resources to create product mockups and short animations utilizing my prototype designs from Adobe XD, Figma, and After Effects. For the web developer looking to explore their creativity and liven their projects, these resources are a must. I hope this information is helpful, feel free to add any tips and other free resources below!
Artwork by Jenna Moffitt
Top comments (5)
It looks classic 😍
I will try to make something similar 👍 thanks for sharing ☺️💐
I appreciate your suggestions. The article on hero image website design provides valuable guidelines for crafting impactful hero images, along with various examples demonstrating their diverse usage across web pages.
Thanks for the recommendations. The article hero image website design has some good guidelines for creating the right and effective hero image with examples of different types of using hero images on web pages.
I do all my design work in Figma now.
How do I choose a hero image for my website? how to know if someone has done blackmagic on you