Wink Family Eye Care

Wink Family Eye Care is a new business that opened in Chanhassen, MN in late 2014. In the kick-off meeting I discussed content and functionality, as well as the aesthetic she was looking for. My task was to create a web site that established her brand and carried enough appeal to bring in new clients.

visit site

Wink Family Eye Care Site

The start of any design project begins with sketches and wireframes and this project was no different. Because client approval would be needed before I entered the high-end mockup phase, I felt like digital wireframes were the best choice. I used Axure RP to create basic content wireframes and a site map.

This process helped to focus my designs around the content, rather than simply sticking the content into a design that may not necessarily fill any of the actual site needs.

Wink Site Map

Once I had all of the content, and the basic flow of the site was determined, I moved on to higher fidelity designs. For consistency, and to make the design process smoother, I created a basic style guide for the brand. Nothing too detailed, as this was still early on in the process. But being able to make quick decisions on things like color and typography is very important.

Wink Color Typography
Wink Site Color Scheme

At this point I had everything I needed to begin digging in to the design of the website. My tool of choice for this is Illustrator. While Photoshop is the industry standard I prefer Illustrator when not collaborating with others, as it's a much speedier option. And the real design happens in the browser anyways, so these mockups are just a guide, not a pixel-perfect preview.

After another meeting with the client, I was able to begin development of the site. I initially created the site in basic HTML, knowing that it would later need to be transferred into a CMS.

I used the Foundation framework, customized with SASS using Grunt, a JavaScript task runner. I also used a few other Grunt plugins for concatenating JavaScript files and adding browser prefixes to my CSS.

The next step was to bring the site into WordPress. Making it as easy as possible for the client to make changes on her site was hugely important. Using Advanced Custom Fields I was able to customize each page extensively.

Ultimately I was able to produce a beautiful website that was maintainable for the client.

More Projects