Step one: Meeting
The first step to every project is to meet about it and get an idea of what the client wants to accomplish. During meetings, it’s important to take good notes so you don’t forget your clients requests. There are tons of awesome tools out there for note taking, but I tend to stick to the basic “notes” app on my macbook or whiteboarding out requirements/sketching out ideas and then taking a photo. At the end of the day, the main thing is having a clear and organizational method of capturing and retaining details.
Step two: Wireframing
Wireframing can start to happen naturally during your client meeting. I tend to start sketching out ideas right away, but I revisit those sketches and start to create actual wireframes using Balsamiq. Wireframing is key to saving time. It’s easy to want to jump right into the thick of it and play with colors and fonts, but wireframing gives the client idea of the layout direction you want to take. Believe it or not, that’s a huge part of design! Having a complete layout change when you already have everything pixel perfect can be a real pain. Creating solid wireframes can really save your butt when it comes to time.
Step three: Style Tile
Style tiles, like wireframing, can save you all the time in the end. Style tiles are basically just small idea boards for your project. They include fonts, colors, iconography, and button styles. They are awesome to refer back to when you might be stumped on how to style a section of your website. I found it particularly helpful for headers and button styles.
Step three: Designing
Finally you can begin designing! I feel like this has got to be every designer’s favorite part (it’s not just me, right?). Some people design websites in Photoshop, however, we design our mockups in Sketch. Sketch is a fabulous tool for web design. It allows you to set font styles and symbols so you can make a change on one mockup, and the rest of those elements change on the other Artboards. Sounds repetitive, but this saves you so much time! We’re all about efficiency at Ashday. Sketch also gives you dimensions for computer screens and mobile screens, making it that much easier to design for both. It also allows you to export icons in different formats so you don’t need to convert them in Illustrator or Photoshop.
Ashday’s Sketch file
Step four: Presentation
Last but not least, the presentation. This part is always exciting since you get to show off all your hard work to your client. I found that the best tool to use for presenting a mockup to a client is Invision. You can upload your work and view it as if it were already up on the web. Clients can make comments right on your mockups, making feedback super easy. You can also sync up your Sketch to Invision. This allows developers to access your assets as well as get measurements and copy CSS when it comes time to make your work of art a living reality.
So there you have it, my friend: four easy steps that will make you a web design superhero, without breaking a sweat. And/or a gross oversimplification of what’s actually involved. But either way, hey … doesn’t this page look nice?