Website UI Kit Style Guide

Introducing the Tailormade Website Style Guide UI Kit PSD Template in Adobe Photoshop. Now you can take matters into your own hands whether you are designing a website or blog from scratch or adding elements to an existing Wordpress theme. This is not a turnkey website design solution, but rather a kit of UI design elements that you can use to jumpstart your creative process while saving you time and money. With this trendy premade style guide UI tool kit and mood board, you can fully edit, adapt, or mix and match for your website or blog before you get into the website design phase. The possibilities are unlimited with this meticulously organized, user-friendly template, and detailed user guide PDF. The design elements are meant to be multi-purpose and can be altered for any lifestyle, product, service, or industry type. The color palette, fonts, images, vector shapes and textures are completely editable, so you can easily make it your own. Because this file is based on a 1280px wide responsive grid system, you can easily take the style guide's finished UI elements right into your web design phase. --- WHY SHOULD I CREATE A WEBSITE STYLE GUIDE?: Typically, after you have produced wireframes, it is good to create a website style guide before you actually start designing out your final website or blog. A style guide template is intended to be a guide to help you define and focus in your user interface style and overall look and feel. Whether you are designing your website, or having someone else design it for you - the person looking at your website style guide expects to understand the following: - What are the visual UI elements that I should be adhering to in the design layout? - Where do I have room to expand on the existing visual style and structure? - What design elements and interactions should I pay attention to so that I can continue a cohesive experience in the website design phase of the project? - Are there any elements or blocks that I can move straight into the website design layout? - Are there UI elements in the style guide that the developer can refer back to to when producing pages within the site? --- WHAT'S INCLUDED: - 1X Website Style guide Template for Adobe Photoshop 1200 x 3120 pixels - Detailed User Guide PDF with links to free fonts ---- GRID USED: This Photoshop file is based on a responsive 1280px wide grid system. 1280px Desktop Grid: 1280px grid 12X 70px columns / 11X 40px gutters ---- 13 SECTIONS INSIDE THE .PSD FILE: - Grid Guides Layer folder - Headers with Hero Areas - Navigation with Dropdown - Typography - Color Palettes - Button Styles - Social Media Icon Styles - Texture/Pattern Styles - Content Box Layout Styles - Testimonial Style - Photography Styles - Blog and Social Media Post Styles - Call-to-Action Style --- NOT INCLUDED: - A complete website design mockup - A Wordpress theme ---- FEATURES: - Adobe Photoshop .PSD format CS4 - All fonts are free for both personal and commercial use and the download links are listed in the user guides. - Fully customizable, resizeable, and well organized you can edit the layer groups and layers, colors, fonts, vector shape artwork, and more. None of the artwork is raster. - The user guide is meant as a quick start guide to get you on your way as quickly as possible. --- WHY IS THIS STYLE GUIDE IN PHOTOSHOP?: Because I work with large agencies and development firms, it is still a major requirement to use Adobe Photoshop as part of the static style guide process even though Sketch and XD are becoming more popular . Why is that? Well, the main reasoning is because Photoshop UI elements can be more quickly be turned into a responsive website design, thus saving clients a lot of time and money. --- REQUIREMENTS: - The files are not intended to work with any other software. You can get free 30-day Adobe software trials here: - ALL CUSTOMIZATION is done by THE PURCHASER. - Purchaser will download and install fonts. - Every usage will have slightly different needs depending on the desktop and tablet grids you are using. Ask your developer for grid advice if necessary. --- Need help with customization? I'm here to help! If you have no idea where to start, I specialize and suggesting the most cost-effective solutions that will get you more traffic, more leads, and more money because who doesn't want that? We offer design customization services and custom brand consulting packages. Visit my website at www.happymondaycreative.com for more information about services and packages. Or email me at [email protected] for more information. --- ABOUT HAPPY MONDAY: As a Creative Director, I have 25 years of experience in branding, advertising, web, mobile, and interactive design services. I have owned my own design firm since 2010 and have worked with many high profile brands such as Chase Bank, New York State tourism, Cleveland tourism, Mitsubishi, Indiana University, Delta Faucet, Brunswick Boats, Humana Medicare, to name a few. I have also consu