Define your site’s goals
Before you start any design or UX work, you should understand what your site needs to do and how its success will be measured. Is it a product marketing site? A campaign site? A corporate site? A resource? What actions and behaviors should it be driving? How will people use it? Once you’ve narrowed down your site’s purpose, you can set clearly defined goals that support it.
Target your audience
In order to reach the goals you’ve set, you’ll need to know your audience. Are they internal or external? How tech-savvy are they? Where do they live (on the map and online)? The more you can learn about the people who will use your site, the more you can tailor it to their needs.
Finalize your content strategy
Once you know what your site should do and who will be using it, develop a content strategy that will drive your audience toward the actions and behaviors defined by your goals. Establish a hierarchy that elevates the content they care about. Make it easy for them to find what they need. Plan a way to continually offer them fresh and timely content, while removing anything outdated or irrelevant.
Use the tools on Picchu
When design and UX work starts up, take advantage of the design and developer tools. They include AI and PS component templates, color swatches, icon vector art, CodePens, code snippits, and much more. This will not only save you time and effort, but also ensure that your site looks and feels like it belongs in the Microsoft network.
On this site you'll find guidance and template resource files for either Photoshop or Illustrator. If you're designing a page from scratch you'll want to begin with the Grid Standard first and download either the PSD or AI resource depending on which software you prefer to design in.
Once you have the three main grid files (desktop, tablet, and mobile - all found in the one download) then you can add the element you wish to include in your design. For example, if you're planning on having a big feature style image at the top of your page, head over to Components - Molecules - Feature and download the resource file. Drop the contents of that file into your grid and start modifying.
Head over to the Picchu Git repo and clone from there. Use this site as guidance as well as an index for your helper classes. As some components have multiple use cases, the documentation on this site can help you in deciding which is best for your specific scenario.
If you just want it all on your machine, download this ZIP package. Start from the index.html in the root and build upon it. Most of the references and meta you'll need will be prebuilt into that index and local to your machine. You'll want to FTP your site as a whole when you're ready to publish as to keep relative paths intact.
Picchu is platform agnostic. Use it with whatever platform, task runner, static site builder, or version control you like the best. We build with Jekyll and Grunt, manage with Git, and then push to Azure... but use what you've used in the past.
More guidance to come
This is just the beginning. We are actively working on adding additional guidance that goes beyond component guidelines. Things like how to do parallax the right way, creating content framework & messaging that reaches our customers, practical front-end techniques and patterns that stand the test of time, and more.