Official WP7 UI design template (28 PSDs) from Microsoft

Search This thread

Livven

Senior Member
Aug 23, 2009
935
13
26
Wiesbaden
livven.me
Microsoft has released - well hidden in its documentation - a design template for Photoshop which consists of 28 PSD files and therefore includes most of the design elements used in Windows Phone 7. Though this is primarily intended for designers who need to mock up the interface for an application (in which case you should also check out the UI Design and Interaction Guide), it's also a very useful resource for creating custom themes and skins based on the Metro design of Microsoft's upcoming mobile operating system. To quote the MSDN page:

A collection of 28 layered Photoshop template files that can be used to create pixel-perfect application layouts, to help guide UI development, or to pitch an idea. These design templates showcase many controls that are a part of the Windows Phone Developer Tools Beta. They also include examples of controls that are a part of Windows Phone, but are not available as a part of the Windows Phone Developer Tools. These additional templates are included to help designers and developers maintain a consistent look and feel across applications for system controls that developers wish to mimic. Templates in the download: Application Bar & Application Menu, Buttons, Check Box, Context Menu, Date Picker, Dialog Boxes, Edit Control, Hardware, Icons, Keyboard & Input, List Picker, List View, Panorama, Panorama Backgrounds, Picker Box, Pivot, Progress Indicators, Quick Jump Grid, Radio Button, Reminders, Slider, Start & App List, Start Tiles, Status Bar, Theme, Time Picker, Toast Notifications, Toggle Switch

Download it here, in case you missed the inline link above (beware, though, it's an 88 MB zipped-up archive)

Thanks to Long Zheng for the find

I also attached all the fonts these PSDs need to render correctly.
 
Last edited:
  • Like
Reactions: BillSplate

daniel-t

Senior Member
Mar 17, 2010
120
28
Does anyone know if the latest rom contains the Zegoe UI fonts?

These templates use a mix of Segoe UI, Zegoe UI, and Segoe WP with Segoe WP N

And the dump of the first rom, did not include the Zegoe fonts...
 

Livven

Senior Member
Aug 23, 2009
935
13
26
Wiesbaden
livven.me
Nope it doesn't, but I just attached them (and all the other Segeo WP fonts) in the first post for you to download :).

Though it should be noted that Zegoe UI is identical with Segoe WP N, which only difference to the regular Segoe WP is that it's numbers are more traditionally styled, similar to Segoe UI.
 

daniel-t

Senior Member
Mar 17, 2010
120
28
Zegoe features serifs on many of the letters, and has a unique uppercase font. I have all the fonts you put into the first post, but Zeoge UI Semilight is missing, and it features in the templates, so I am wondering if someone could dump the latest July rom, or tell me how to dump it, to see if they feature the complete Zegoe font family?
 

Livven

Senior Member
Aug 23, 2009
935
13
26
Wiesbaden
livven.me
Hmm, from my observations Zegoe UI has no differences to Segoe WP N apart from the Zegoe Caps font you mentioned, though I may be mistaken. Are you sure there's a Zegoe UI SemiLight? I currently don't have Photoshop installed so I can't try it out myself, besides, I have never seen that variant. I'll look around and see what I can find.
 
Last edited:

daniel-t

Senior Member
Mar 17, 2010
120
28
Now this is interesting...

I am comparing the fonts in the July Beta ROM, to the ones in the original March one.

The Segoe WP N fonts are no more, they have been removed.
The Segoe WP fonts, have been changed and are now copyrighted as 2010 not 2008.

Fonts like Segoe WP Black now have numbers and letter shapes which are consistent with the other WP fonts.

The Segoe UI Bold and Regular fonts, contain serifs on the uppercase I, which is interesting as this was one of the differences between Segoe UI and Zegoe UI.

There are no Zegoe fonts, there are no Segoe UI italic fonts (I assume these if used on webpages map to the Segoe WP italic fonts, if they ever get included)
 

~Johnny

Senior Member
Apr 8, 2009
66
2
I don't think the Zegoe UI Semilight font is in the ROM, but it is included in the Zune PC software in the ZuneShellResources.dll.
 

Attachments

  • ZegoeUI_SL.zip
    22.5 KB · Views: 452

daniel-t

Senior Member
Mar 17, 2010
120
28
I don't think the Zegoe UI Semilight font is in the ROM, but it is included in the Zune PC software in the ZuneShellResources.dll.

Brilliant, thank you! BTW, what resource editor/extractor do you use?

I have been looking through that file using Restorator 2009, and I find the Bold Zegoe Caps font as TTF, and two versions of the light font as TTC files.

Segoe UI Z Light, with Uppercase and Lowercase versions all in one TTC File

Cegoe UI Light, with Uppercase and Lowercase versions (some letters like the I and Q are different) all in one TTC File

And that's all I can find...
 
Last edited:

Windcape

Senior Member
Jun 22, 2010
377
4
Stockholm
Quite nice. Now we'll probably get the Pivot and Panorama controls soon.

Btw. This should be in the software development section, not hardware :p
 

Muo

Senior Member
Aug 22, 2009
280
2
IL
Very cool indeed. Wonderful find and thank you for sharing. These will come in handy :p
 

Top Liked Posts

  • There are no posts matching your filters.
  • 1
    Microsoft has released - well hidden in its documentation - a design template for Photoshop which consists of 28 PSD files and therefore includes most of the design elements used in Windows Phone 7. Though this is primarily intended for designers who need to mock up the interface for an application (in which case you should also check out the UI Design and Interaction Guide), it's also a very useful resource for creating custom themes and skins based on the Metro design of Microsoft's upcoming mobile operating system. To quote the MSDN page:

    A collection of 28 layered Photoshop template files that can be used to create pixel-perfect application layouts, to help guide UI development, or to pitch an idea. These design templates showcase many controls that are a part of the Windows Phone Developer Tools Beta. They also include examples of controls that are a part of Windows Phone, but are not available as a part of the Windows Phone Developer Tools. These additional templates are included to help designers and developers maintain a consistent look and feel across applications for system controls that developers wish to mimic. Templates in the download: Application Bar & Application Menu, Buttons, Check Box, Context Menu, Date Picker, Dialog Boxes, Edit Control, Hardware, Icons, Keyboard & Input, List Picker, List View, Panorama, Panorama Backgrounds, Picker Box, Pivot, Progress Indicators, Quick Jump Grid, Radio Button, Reminders, Slider, Start & App List, Start Tiles, Status Bar, Theme, Time Picker, Toast Notifications, Toggle Switch

    Download it here, in case you missed the inline link above (beware, though, it's an 88 MB zipped-up archive)

    Thanks to Long Zheng for the find

    I also attached all the fonts these PSDs need to render correctly.