6 Ways Web Developers Are Using Envato Elements

As a freelancer or a web developer working at a small studio, you need to be able to cover a lot of aspects of creating a website.

Since time is precious, that time is usually put into coding which means that sometimes the design falls short. So how do you get good design without being a good designer?

Here’s where Envato Elements comes in handy. Elements is an online library that gives you instant access to templates and assets for scene generators, icons, logos, mockups, backgrounds, fonts and more. All the items have been developed by Envatos community of independent designers which help several creatives pursue their dream career (not to mention making it easier for developers who have no design skills).

We’ve put together a list of the best resources for web developers so that you never have to spend time on searching for something that works for your projects again.

Scene Generators are one of the most popular tools on Elements for web developers. They offer a great way of creating unique header or landing page images by allowing objects (i.e products) to be placed in an already designed scene. The carefully crafted surrounding makes the scene significantly different than an ordinary product mockup. Use the scene generator to add life to a plain page or to sell a website concept.

The latest version of the Kitchen Ready Mockups can be used for restaurants, cafés, food stores or for anyone who want to make their website visitors hungry. It can easily be personalised by selecting colours and individual background images. However, it’s a PSD template so if you aren’t familiar with Photoshop, maybe it’s time to learn.

If the website you’re building is for creatives or traders, this scene generator has everything you need for their hero or header images. It comes with five attractive scenes, high quality images and all the objects displayed in the image above. Some templates are in a PSD format but it does contain JPEGs and PDFs as well. The designer has been kind enough to include help files and instructions to make it easier for non-designers to use.

Icons save space by visualising the message.As a developer, it’s often hard to transform the text content supplied by the client into something beautiful (what’s beauty anyway?). If the text is really heavy, introducing icons would break it up and solve the problem. A descriptive symbol can highlight an essential part of the website and help the user understand the information better. If the icons describe the content well, it may not even be necessary to have additional text included.

The Magicons is described as ‘a must have icon set for every designer and developer’, which speaks for itself, really. The icon pack includes 160 icons for web and mobile in 12 different formats (the SVG files even come with optimised code). Arrows, like icons, hamburger menu icons, player controls or share icons – this pack has got it all.

At some stage in your developer career, you will build a website for a firm, company or organisation of some kind. The Business icon set will then come in handy. Although the template only contains 16 items, it’s more than enough to communicate the client’s message.

Let’s face it, sometimes our clients commission us for a website with the expectation of a fully designed brand identity. Even though hiring a designer to take care of that part would solve the problem, it isn’t very cost effective (especially if you’re a freelancer). Luckily, there are many high quality, customisable options available on Envato Elements.

With thousands of assets, items, fonts and logos in PSD, AI and EPS formats included, the Extensive Logo Creator has all you need to customise a logo for your client. Since the package comes with help files, it’s impossible to mess up the design. It’s practically bullet-proof!

Presenting the website design in a mocked up scene helps your clients understand how the site will work responsively but also how it will work in context to the relevant usage. For example, if your client wants an online shop built with the customer target group being home buyers that care about design, the mockup would show the website design displayed in an iPad format with a mocked-up, thoughtfully designed apartment in the background. This also shows that you’ve put in extra effort to include their values and interests.

The easiest way to create a professional-looking mockup is on Placeit. You can simply upload a screenshot of your site and watch it being transformed into a mockup ready for you to download. Try it out with this Multi Device Mockup, featuring a large Apple Cinema Display alongside a smaller iPad screen to show off your site’s responsive design.

The Responsive Design Mock-ups package has thought about every single device scenario possible. If you’re after an iPhone, Macbook Pro or iPad mockup, you’ll get it here. With real high resolution photography and everyday elements included, it’ll give your website presentation that real-life feeling that you’re after.

This package lets you customise an app presentation in Photoshop for both portrait and landscape mode. It includes 24 mobile, tablet, desktop and even Apple Watch designs.

Sometimes a full-scale background image will break the rest of the website design by making it look too busy or by not being adaptable for different devices. Using a subtle background pattern will always work on all screens and won’t interfere with the use of images for other purposes (i.e showcasing products or posts). Also, they can be used on all pages without taking up too much space (like a background image or a header image would do).

For those of you who think that using a background pattern would be too boring, I’m here to tell you that you’re wrong. If you’re the kind of developer that wants to experiment with templates even though you don’t have much design experience, there are a few options available for patterns as well. If the website that you’re building has a lot of different components or colours, it could be a good idea to use a background pattern that only consists of linework to create a good balance. But if the website is low in content, playing with the transparency and symmetrical aspects of a pattern would be a good way of integrating it into the rest of the layout.

Since the world of patterns is huge, we’ll let you choose one that fits the style of the specific website that you’re building. However, we do have one recommendation that would work for both experimental and safe use. The Geometric Seamless Patterns Bundle offers patterns with a minimal design in chevron, dots, triangles and hexagons shapes to suit most website layouts. If you want to zing it up a bit, you can edit the vector patterns colours, transparency, position and customise them for your own use. Although we recommend keeping the background pattern as simple as possible since it’s there to complete the rest of the website design, not to overtake it. It’s a background, after all.

We all know that a custom font will make a website look unique and in most cases your clients will have a say in the font chosen for the website. So to make it simple for you, send them a few font options and let them know if a serif, sans-serif, decorative, script or handwritten font works best for what they are wanting to achieve. If you’re not sure, read this blog post on the top trends in typography in 2017. After they’ve chosen a few, test them out on the website and show them the one that works best with your newly added logo, background pattern, icons and header image.