Wednesday, March 3, 2021

Graphics for web

Responsive UI is one of the first things on the board when creating a website today.Optimizing graphics is one of the most effecient way to keep a site low in file size and high in response.Web based applications

Using applications like Figma and Adobe XD allows you to get the most out of the graphics as you can export them as the file type you prefer and it is already optimized for use on web platforms easily accessible with id and classes embedded in to the file to access through CSS.

This is really good for creating simple graphics and testing it out in a web environment but has some limitations in regards to more detailed graphics.

Image- and graphics based applications

The more classic applications for graphics and image editing Adobe Illustrator and Adobe Photoshop grants you no limitation in creation but the export settings for web can't really match the web based applications even if they focus on web for each update.

Combined

Utilizing both is quite easy and only takes a step or two more by importing the images or graphics created in Illustrator or Photoshop into Figma or Adobe XD and then finalizing by using the effects web has to offer you can optimize the file before exporting it and then you have optimal file for your website.

In conclusion

Always keep optimization in mind when designing graphics or editing images to help your workflow and the result will be smoother. You can use any tools you like but learning the best practices and settings for the tools and applications you use for web will take you far.

Back to articles