Once you’ve created your sitemap and laid out your wireframes, you’re ready to select a template or begin designing a website mockup. If you have some experience with design and you have access to a developer who can help you convert a mockup into a template or theme for your content management system, you may be able to begin designing a website mockup on your own. This is the phase where you can let your creative energies flow, and you can introduce colors, fonts, and images to bring your wireframes to life. If you do not have access to a developer to help you convert a website mockup into a template, or you’re not comfortable working in Photoshop or similar program to create a page design, it may be a good idea to move directly to selecting a flexible template or theme that will allow you to layout your pages in a way that most closely resembles your wireframes.
Here are a few tips to keep in mind when converting your wireframes into beautiful page designs for your site.
1. Consider your color scheme.
Do you already have a logo? If so, you may already have a color pallet in mind. But if you need more options for accent colors or you’re starting from scratch without a logo, there are several free online tools that can help you decide on an appropriate color scheme for your site. For example, Pictaculous will allow you to upload a photo to get an idea of the best color pallet to pair with that image. This tool could be particularly helpful if you have a featured image that you’d like your design to revolve around. As long as the photo’s color scheme fits in with your overall identity and mission, this tool could help you select the right tones to use throughout your site. If you’re looking for some ideas on color meaning and what colors might be appropriate for your organization’s identity and mission, you can check out this post at Jen Reviews. Furthermore, sites like Adobe Color CC and Paletton can help you select complimentary colors based on a single color of your choosing.
2. Repurpose design elements for a seamless user experience.
When introducing design elements like button styling, headings, and image styles, consistency is key. Be sure to implement similar styles for features with similar functionality. For instance, if your donate button has a certain color and effect, it’s important to keep this consistent throughout all pages of your site. By making your donate button clearly recognizable on all pages, users will notice it with a glance, rather than having to search the page for the word “Donate.” Likewise, make sure headings with similar importance share the same font and weight throughout the site. Your users will recognize their importance based on these styling elements and they’ll be able to navigate your site with ease.
3. Use appropriate fonts.
Many themes and templates will offer a variety of web fonts for use throughout the site. Oftentimes you can choose a default font to use for your main headings across the board. If you’re designing a website mockup from scratch, be sure your font selections are from a web font library so they can easily be implemented on your site. Google has a popular web font library available here. If you’re not quite sure which font family to use, take a look at this infographic from DesignMantic.com for some ideas.
What stage are you at in your redesign? Let us know in the comments below.