At Just Magic Design, we enjoy working with professional graphic artists when it is appropriate for our clients. Though Jen and I are reasonably talented designers, we are both primarily developers and theming Ninjas, so we appreciate the skills of a graphic artist.
Graphic design for the web isn't always taught in design courses, and the requirements of the web change often, so we thought we would make a list of considerations that we'd like designers to keep in mind when creating mockups for us. We know most of this is elementary, but we include it here for completeness. If you think of other things we've missed, please add them in the comments!
Please use whatever graphics application you are most comfortable with to produce designs. We own all the Adobe products (InDesign, Photoshop, Illustrator...) so any of those are fine. When you deliver a design, we would appreciate:
- A PDF version that we can send to the client for feedback and approval (once we're ready for that).
- A directory fully packaged with the fonts and graphics used so it looks the same for us as it did for you.
- Layers so we can isolate elements of the design that we'll need to use as individual graphics (logos, backgrounds, etc.). Please name your layers so we can easily tell what they contain.
Make sure the fonts you use are available for the web. Just because it is in your application's Fonts menu does not mean it can legally be used on-line (perhaps not at all and perhaps only for a significant cost). Here are some sources of free or inexpensive fonts (in order of ease-of-use for us) but a quick Google search will find dozens more:
We will be developing a responsive design. When the website is being displayed on a large screen we prefer to keep the maximum width of the page to 960px (which will be centered on the screen with a background filling the rest of the viewport). Please make the main design you produce reflect this when viewed at 100%.
- We implement with a flexible grid system, at least at full width, so it is helpful if you design to one as well. For instance, you can divide the 960 px full width into 16 or 12 columns with gutter evenly distributed between left and right of each column (of whatever width you think looks aesthetically pleasing). (We can provide a Photoshop guide layer if that is helpful.) If you make your layout elements align with that grid, it will be easier for us to implement. Don't worry about this too much, we can usually adust well, but keep in mind our implementation won't 100% match your design and it may effect the size of images we need from you.
To handle tablets and smartphones, the design elements have to adjust to different layouts at specific breakpoints, essentially flowing to the best layout for the current width of the window or the device. In general, we handle that automatically (for instance, switching from a main/sidebar two-column layout to a single column layout with the sidebar contents below the main content), but there are some things you might want to give us a design for at the smaller size. For instance:
- You might want to illustrate how you want the elements to stack (in the header or footer, for instance) for the small sizes, and/or which design elements (anywhere on the page) you think should be removed.
- See the next section about navigation at the smaller sizes.
Many people land on an interior page of a website as a result of a Google search, so we are sticklers for clear navigation design that helps orient the visitor to where they are. In your design, show active states and "you are here" indicators in navigation. Also:
We like to switch to a "hamburger menu" at smartphone size which collapses the main horizontal or vertical menu into a three-line icon with the word Menu next to it. How would you like that styled?
- If the site is going to have two levels of hierarchy in the sitemap, we like to implement drop-down menus. How should those be styled when the drop-down is active?
- If there are three levels of depth to the menu tree, we generally like to use a breadcrumb menu. How should that be styled?
- If you use vertical menus in the sidebars, how should they behave (do they expand/collapse accordian tyle, do they pull right, etc.)?
- Make sure you have rights to use any images, including icons, that you use in the design! Keep track of where you got the image and keep price in mind if you are using stock services.
- When you incorporate an image into a design, particularly in InDesign, please create an image file that is just the way you want it to appear, with a transparent background if necessary (keep in mind the re-flowing of the design as it is responsive to different widths). For instance, you may have masked out parts or changed the color with InDesign but the image in the Links folder will be the original. Please create the image with Photoshop to get a version that we can use from CSS.
In summary, we really value what graphic artists bring to our projects and we love taking beautiful designs and turning them into flexible, easy to navigate websites. We don't need or expect you to become experts in the code. If you have any technical questions about the design requirements to make that possible, please ask us!