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.
Appropriately-sized mockups
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
Know the basics of HTML, CSS and JavaScript. Here’s a quick overview: HTML is the structural markup of the code. It pretty much lays out where things are going to be. For example, there is going to be an image here, footer here, three columns here, etc. CSS is the style of all of that: this headline is red, there’s a blue background here, etc. JavaScript controls the interactivity of the site: are things moving? Does the background change after a user has scrolled 500 pixels down? It programs things to happen based on user events, click events, browser events, etc. The more you understand the languages and their capabilities, there more you’ll know what is possible. And remember, everything is possible in WordPress.
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.
“Know whats possible” this is a great point well made. There’s a lot we can do with the web but all coding languages have different limitations. If you can take the time to understand the basics of HTML, CSS, Javascript and PHP then your web developer will absolutely adore you.
I might also add ‘think about your customer’ some clients I work with fail to take in to consideration what their potential customers would prefer. Instead they opt for features or design choices based on their personal preference even though they are detrimental to the user experience.
Well said! Thinking about how visitors and customers will interact with your website and working hard to create positive user experiences is soooooo important.