No matter what kind of designer you are, you know that when it comes to designing for web and mobile some of the most difficult tasks are sizing and resizing elements to make sure everything is pixel perfect.
A lot of designers tend to start with wireframes and website page mockups before they begin to design. Sometimes, due to a lack of time or the amount of content that needs to go on the website, we leave sizing until the last minute (e.g. when the site is in production). This usually ends with a lot of back and forth between website designer and graphic designer about how big images, icons, logs etc. should be.
Here are a few tips on what to do throughout the design process to achieve pixel perfect designs:
- Start with a basic wireframe mockup, sketch out the layout first. When translating this to digital, begin marking out widths and heights of elements to give to your graphic designer
- As you approach the high-res mock ups, your graphic designer should be well underway with asset aggregation. Implement these assets within your design, using specific industry tools that allow precision
- When it comes to the digital build stage, it is very important that any web designer start off with a mobile-first approach. We have to design for the ‘on-the-go’ user.
- As you continue with the website build, the transition between device sizes will be easier and the assets that were provided will allow pixel perfect aspect ratio, leaving you with a high quality product.
- A quick tip: Photoshop, Illustrator, Axure are good softwares to use when starting off in the initial design phase.