Having recently collaborated with Microsoft in accelerating Windows 8 App development, I’ve came up with these design templates to serve as reference in designing Windows 8 Apps, providing more clarity in how to convert a conceptualised design from a Photoshop file into a full-fledged Windows 8 Apps with the use of Blend for Visual Studio.
Download link and more information on these design templates after the break.
What will you need to use this design template?
- Photoshop will be needed for the .psd files
- Blend for Visual Studio will be needed for the Metro Style App Project
What is in this design template?
Do note that this is a design template that only contains:
- Photoshop Source (.psd)
- Images (.png)
- Blend Project – HTML/CSS
Which means it does not contain any back-end coding, snazzy javascripting, complex business logic or more.
Mall App
(http://code.msdn.microsoft.com/windowsapps/Metro-Design-Template-Mall-7eec5358)
Introduction
I’ve always felt Metro apps would be a perfect fit for touchscreen based shopping centre directories, hence I’m coming up with a sample design template of a Mall app that will work like a kiosk, allowing shoppers to have a quick means to search, browse and find the information they want on the shops available.
Story
As a customer at a mall, I want a directory app that will allow me to search, browse and provide information on stores I’m interested in.
Movie App
(http://code.msdn.microsoft.com/windowsapps/Metro-Design-Template-0d0f39f7)
Introduction
As a big movie fan and cinema freak, I’ve always wanted a quick app that will allow me to browse the top movies in the box office, check out trailers, ratings and more. So when I was thinking of what kind of Metro Style Apps to create design templates for, I guess it was a natural choice to create a simplistic app to fulfill my movie craving needs, and hopefully yours as well.
Story
As a Windows 8 user, I want a quick and simple means to watch trailers of latest movies, check their ratings, and share it with my social network.
Reader App
(http://code.msdn.microsoft.com/windowsapps/Metro-Design-Template-d33d41a6)
Introduction
Having used many reader and aggregator services like Google Reader, pageflakes, Windows Live etc, I have always wanted a good feed reader app for my Windows Phone but until today I couldn’t find one. Even though Windows 8 already comes with a reader app, but its mainly used to read documents like .PDF and not really RSS feeds, so I’m creating this design template today to hopefully serve as a reference for you out there who is going to come up with a RSS Reader app for Windows 8 that i’ll definitely buy.
Story
As a Windows 8 user, I want a simple reader to allow me to read my feeds.
Feel free to use it as a reference or inspiration in crafting your very own Windows 8 Apps. Appreciate it if you can share in the comments if these design templates have been useful to you.
Hi, I am looking for a Win8 App for Comparision Site for community purpose. Please let me know if you are Interested ? please email me so that I can send you the specifications.
You can also reach me on +61 469 368 765.
Regards
Rama
I tried to make the Mall app but get this error
missing SDK Microsoft.Win.Js. 1.0.RC, Version=1.0
What do I do to fix this? Thanks.
Ed
Hi Ed, After downloading the sample and loading it to the VS2012, please remove the Reference Microsoft.WinJS.1.0.RC and add new reference Windows Library for JavaScript. Then in every HTML page, in WinJS Reference section remove RC part from the code. this will up your app.
Gee thanks for assisting with the solution Charith, much appreciated
Hi! Is there a way to convert PSD to HTML/CSS or you just write HTML from the beginning? I find an option of importing PSD files in the new blend menu, but it only generates PNG with the chosen layers. And all HTML tags are . Thank you!
Sorry! I would like to say that “All the HTML tags generated are \”.
IMAGE …
Luke,
you can generate HTML/ CSS from psd file, though for many good reason i prefer to handcode html and css, but here is a way for those who are not familiar with hand coding/html editor.
open .psd in photoshop
using slice tool, create slices of all the elements
choose- save for web & devices, which will open a popup screen, click on arrow next to preset drop down and choose “output settings” it will open another window to let you export ur images and html to a place of your choice.
and that’s it!
P.S. you may need to repeat these action based on your proficiency on photshop, but its not any difficult,
hope this will help!
cheers!
rams
Awesome templates, since i got no skills in design it was really a pain for me to try to design my app. Really thanks allot for the templates, i’ve been looking for something like this for quite a while!
Regards,
Alex
I don’t get this… when I load this into Visual Studio the ref is already WinJS.1.0 but when I test the app the buttons and pictures don’t do anything. How do you make the buttons actually clickable?
Template of the week: Movie App design template | MSDN Blogs
[...] week’s template is focused on design. This template was originally published on the RIA Blog by Kok Chiann, a user experience manager at Ezypay and MVP on Expression [...]