Many of my clients love design, but don’t really love (or have time to handle) the intricacies and ever-changing nature of web development. Being the web geek that I am—that’s exactly my specialty. And it’s why clients partner with me to handle development for them. You do what you love, I do what I love—everybody wins!
Clients ask me, “What are the best ways to prep my design for you?”—and it’s a great question! Here are 7 tips that will streamline the journey from design to development.
Check out current trends
I’ve talked about how the fold and sliders are dead. Which trends are alive? Well, photos in circles, for one! It’s important to know what’s happening right now in web design, and it’s easy to find out. CSS-tricks.com and Smashing Magazine are my favorite resources.
Go wild with web typography
In the world of web design, the font selection used to be limited to the handful already installed on computers. Today, the sky is the limit. You can use web fonts and there are millions to choose from! They are hosted, just like images, and if you’re using Google Fonts or Font Squirrel—they’re free. Just don’t use too many different fonts that can bog down your site.
I design mockups with Illustrator. I like how it allows me to quickly manipulate type, and how it’s already vector based. A lot of designers like Photoshop, and that’s cool, too. But no matter which software we’re using, we all need to be on the same page. How can we do that? When I’m setting up a web design project, I size a desktop version at around 1400 pixels wide. This means when you view a jpeg of my mockup at 100% – that’s the size it will be online. Why is this important? So sizing is always consistent. So we are always working in pixels (but not being pixel perfect). So a 500 pixel tall image is always 500 pixels tall. When we’re on the same page, we totally rule website land.
Design for every size screen
I’ve already talked about how every site should be responsive. But that also needs to be kept in mind during the design process. Currently, there is debate as to whether the design/development process should start at mobile size and build up—or start larger (for a computer screen). I don’t think it matters much—if we always keep every size screen in mind and ask ourselves, “What happens to this element when it gets smaller or larger?”
Pay attention to conventions
From perusing the internet, we have learned what certain icons mean. Buttons denote actions, colored text denotes a link, down arrows mean “download,” and pluses mean “expand.” My recommendation is: Use what works. Go crazy with design, but when it comes to user experience, keep what people are used to. Throwing a curveball can confuse the visitor, and when it comes to web design, a great user experience is paramount.
Grids are awesome
When you design in a grid of any kind, you foster more precise translation of your design for the web. So if we work together and you design in a grid, it will make me Friday-style excited, even if it’s Monday.
Know what’s possible
What do you think? Any tips I’m missing?
If you’re a designer who wants to work with a web development partner—let’s talk about the different ways we can work together.