Sticky Post: Pixel Perfect Designs
Mar 31, 2016 / by sean / In Design / Tags: mobile-first, Pixel Perfect, Web Design, wireframe / Leave a comment
No matter what kind of designer you are, some of the most difficult tasks in designing for web and mobile are sizing and resizing elements. You’ve got to make sure everything is pixel perfect.
A lot of designers start with wireframes and site page mockups before they begin to design. Sometimes, due to a lack of time or amount of content, 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 web designer and graphic designer about how big images, icons, logos etc. should be.
Here are a few tips 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 mockups, 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 starts 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. The provided assets should allow pixel perfect aspect ratio, leaving you with a high-quality product.
- A quick tip: Photoshop, Illustrator, Axure are all good software to use when starting off in the initial design phase.
Download Our Free Ebook For More Great Website Design Advice!