Official WP7 UI design template (28 PSDs) from Microsoft - Windows Phone 7 Development and Hacking

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
Click to expand...
Click to collapse
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.

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...

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.

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?

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.

Thank you! I try!

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)

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.

~Johnny said:
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.
Click to expand...
Click to collapse
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...

Quite nice. Now we'll probably get the Pivot and Panorama controls soon.
Btw. This should be in the software development section, not hardware

Very cool indeed. Wonderful find and thank you for sharing. These will come in handy

Thank you very much for the template.

Related

[UPDATED 07/11/09] WM 6.5 & TF3D System Fonts (Works with 6.5.1 ROMS! CABs within!)

[UPDATED 07/11/09] WM 6.5 & TF3D System Fonts (Works with 6.5.1 ROMS! CABs within!)
Hi Guys,
I installed a couple of system fonts posted in various places and discovered that they didn't play too well with 6.5. I did a bit of digging and discovered that the .ttf files in the Windows directory differ in 6.5 so I set about making a CAB specifically for us WM 6.5 users
I'll pop a couple of CAB files up as I do them, but there's one attached to this post along with some screenshots. The one I've chosen to start with is Eras, not a huge amount different from the standard font, but it's nice and legible but different enough to be noticeable.
There are three levels of boldness used in WinMob and TF3D, a light, medium and bold. with Eras, the most bold version was too thick and caused the calendar in TF3D to not display the dates correctly, so I've only used a light and medium version in the CAB.
If you have any problems, the CAB is uninstallable. You might want to disable TF3D when you install the CAB, but I didn't bother and it installed fine. I look at it this way; even with TF3D disabled, there are still fonts in use by the system! When changing fonts (from one CAB to another), I use a bit of a shortcut too; I uninstall the CAB, press cancel when the system asks for a soft reset and then install the next font CAB. Only then do I soft reset. Works ok for me!
I'll get on and do a couple more over the next few days. If anyone has any requests, post them here and attach the .ttf files that you want converted. Ideally, there needs to be at least two versions of the font, a light and a medium. If you're not bothered by having a more bold font in certain places, then one will do.
I'll update the 2nd post of the thread with links to newer posts containing CAB files as the thread grows (if it grows)
This is where I'll add links for new CABs
Restore Default - Post 3
Eras - Post 1
Century Gothic - Post 8
EnviroD - Post 11
Comic Sans - Post 12
Lucida Handwriting - Post 14
Jott - Post 20
Steve's Hand - Post 22
Reprobate - Post 26
Segoe Condensed - Post 27
Stonehenge - Post 28
Handel - Post 32
Kabel - Post 33
Nokia - Post 63
Helvetica - Post 64
Sony Sketch - Post 66
Droid - Post 68
Arialic Hollow - Post 84
Forgotten Futurist Shadow - Post 85
Rave Party Poster - Post 87
Trebuchet - Post 96
Just a quickie to re-iterate that these fonts are for Windows Mobile 6.5 only. They won't work properly on 6.1 as the font names in the Windows system directory are different. This is why, I'm told, I'm the only person making fonts for WM6.5 that actually change all parts of the system.
In addition, do not install another font before removing the previous one. It is ok not to restart the phone until after the replacement has been installed, but you must remove the old font before you install a new one.
If you look at my screenshots and wonder about where all the TF3D mods come from (apart from the fonts of course, they're right here in this thread), check out the links in my signature.
Thanks, enjoy.
PS. I have included a CAB here which will reset the fonts to standard if anyone gets into trouble. If you follow the general advice above, nothing bad should happen though
Thanks, will try and give feedback.
One question: which program you use to enable WP in all tabs?
Nice
Thank You
Works...
Works(and looks) nice on NRGZ's ROM.
Jesiah said:
Thanks, will try and give feedback.
One question: which program you use to enable WP in all tabs?
Click to expand...
Click to collapse
MaxTTM, the only TF3D modification system worth using
OK, second CAB of the day: Century Gothic. Again, not too dissimilar to the original font, but I think quite nice. Also, slightly larger on the screen than the Eras font that I posted earlier. Good for those visually challenged people like myself...
where did u get those tab icons? thanks
doctorcete said:
where did u get those tab icons? thanks
Click to expand...
Click to collapse
Major_Sarcasm said:
MaxTTM, the only TF3D modification system worth using
Click to expand...
Click to collapse
All TF3D mods can be done through MaxTTM. Go see Maxycy!
EnviroD system font attached to this post. This is a nice, futuristic-looking font, only problem is with the TF3D calendar; the number digits in this font are slightly too wide and so some of the numbers are truncated (see screenshot). If you can live with this, it's a good-looking font. I did try using a less bold version of the font for the calendar, but it had no effect, still truncated. Personally, it doesn't bother me too much as I love the look of this font on screen.
Edit: It was really annoying me, this font not working right so I did a bit of digging with Font Creator and scaled the numerals so that the calendar tab now displays correctly. I also used the three versions of the font (2 of which I created from the original), light, regular and bold.
OK, second cab of the day, the old favourite, Comic Sans.
This font has the same problem as EmviroD, in which the numbers are a little too wide for the calendar and so are truncated. However, it's a very readable font and I can live with the calendar.
can you make one with lucida handwriting plzz??
cvchetan said:
can you make one with lucida handwriting plzz??
Click to expand...
Click to collapse
Yes, I can.
Updated EnviroD at the top of this page...
Major_Sarcasm said:
Yes, I can.
Click to expand...
Click to collapse
thanks a lot..
lucida handwriting is goin gud wid 6.5
Jesiah said:
Works(and looks) nice on NRGZ's ROM.
Click to expand...
Click to collapse
Hell yeah it does!
If the OP doesn't mind... can I use it in my ROMs from now as default ?
Fine by me, my friend. It's not my font, just my CAB
cvchetan said:
thanks a lot..
lucida handwriting is goin gud wid 6.5
Click to expand...
Click to collapse
Except the weather temperature is broken
Another day, another font
This time, we have Jott, which I think works quite well as a semi-handwritten system font. All the screens seem to work ok, calendar, weather, etc. Hope you like it! I do!
If you'd like to know how I got a full-screen wallpaper in TF3D, see Maxycy's thread here. All the manila mods you can shake a stick at and more.

.net Components...

Hi all,
I am trying to create some WM6.x app's based on .NET3.5 with Visual Studio 2008.
What I find is that the default libraries contain only very boring sliders, and like the nice sliders that most app's have these day's do give a more intuitive look and feel to an app.
Is there somewhere a set of these components, like a HTC TF3D SDK-isch tingy for my on/off switches and sliders.
You know red/green sliders.
thanks in advance.
you need to install one of the wm themes. the .net framework by itself won't let you change those things unless you override classes (like onRender).
eg i use this theme .. http://forum.xda-developers.com/showthread.php?p=4653738
and as far as a htc looking UI have a look at this SDK. it allows you to create UI elements in the htc style. http://forum.xda-developers.com/showthread.php?p=4653738 . but, it has a few bugs and hasnt been updated in a while.. it is extensible though so you can make your own UI elements.
http://forum.xda-developers.com/showthread.php?t=566188
MarcLandis said:
http://forum.xda-developers.com/showthread.php?t=566188
Click to expand...
Click to collapse
THANKS!!!!!!

Windows Phone 7 Font {Segoe WP} Series

If you installed Visual Studio 2010 on your PC, you can simply go to "C:\Windows\Fonts\" dirctory..
and select this Family Font "Segoe WP" which stands for Segoe Windows Phone.
And this font is useful for themes devs and apps devs to create a real WP7 theme or app.
For those who do not have VS2010, simply download the attached file.
Thanks for sharing this
very nice, thanks
Thanks - this is exactly what I was looking for!
any chance you could just zip up the fonts vs. having an exe file? thanks
here you go!
Awesome, thanks for this. Now to muck around changing system fonts on my HD2..
cortez.i said:
any chance you could just zip up the fonts vs. having an exe file? thanks
Click to expand...
Click to collapse
You can simply unzip that .exe (i.e. using 7zip).
Thanks guys for that, and working on a brilliant wp7 theme
I have VS2010 but don't have the fonts So thanks a lot for the download
Missing app
jonnywright said:
I have VS2010 but don't have the fonts So thanks a lot for the download
Click to expand...
Click to collapse
Of course you don't, because you must install also Visual Studio Express For Windows Phone, it's free @ Microsoft.
lead answer
Hey, well nice things have written here and you know i am very shocked to see that how much knowledge people have , they have spent a lot of time in this.
hanaheeno said:
If you installed Visual Studio 2010 on your PC, you can simply go to "C:\Windows\Fonts\" dirctory..
and select this Family Font "Segoe WP" which stands for Segoe Windows Phone.
And this font is useful for themes devs and apps devs to create a real WP7 theme or app.
For those who do not have VS2010, simply download the attached file.
Click to expand...
Click to collapse
How can I put those fonts to WP7?
alfa-batsi said:
How can I put those fonts to WP7?
Click to expand...
Click to collapse
It might surprise you a bit, but WP7 already has this font
_DX_ said:
It might surprise you a bit, but WP7 already has this font
Click to expand...
Click to collapse
Yea, but how to change the fonts from the standard one?
Sent from my HTC HD2 using XDA App
how do you change the font sizes in WP7 , I posted this in another thread ,but maybe you guys know, in contacts , the font color is the same as the tile color , can I change the font color in contacts and still have a different tile color , also the size of the font in contacts is so small you need reading glasses to see it, where in the registry can I change the sizes?
These are taken from windows ce , same location, not sure what is what yet
System HKEY_LOCAL_MACHINE\SYSTEM\GDI\SysFnt
Menu bar HKEY_LOCAL_MACHINE\SYSTEM\GWE\Menu\BarFnt
Pop-up menu HKEY_LOCAL_MACHINE\SYSTEM\GWE\Menu\PopFnt
Out of Memory window HKEY_LOCAL_MACHINE\SYSTEM\GWE\OOMFnt
Vintage144 said:
how do you change the font sizes in WP7 , I posted this in another thread ,but maybe you guys know, in contacts , the font color is the same as the tile color , can I change the font color in contacts and still have a different tile color , also the size of the font in contacts is so small you need reading glasses to see it, where in the registry can I change the sizes?
Click to expand...
Click to collapse
Hi, Did you solve the way to change contacts color font ? me too i'm using black tiles but cannt see number contacts as are the same black color.. thanks
Havebt been able to change the size,i can change just about every other font sizes and colors but cant change this one,its only a matter of time before its found
Sent from my SGH-i917 using Board Express
Isn't this font identical to Segoe UI, the primary UI font for both Windows Vista and 7, which you therefore certainly already have on your system?

vector color icons

hey guyz.,
i just wanted to see colored icons on my windows phone, so i started working on it.
but two months back i got an android phone and now i'm too busy.,
i colored few icons(you can see the result in attached images).
so if any of you are interested please color the remaining icons and share.
thank you
@Sai Chrisna, I can tell you truly (nothing personal): if these icons was built in original WP UI, I'll never buy that "colorful" junk
Colored icons actually adds nothing to UI, but color scheme you've used looks really ugly.
sensboston said:
Colored icons actually adds nothing to UI, but color scheme you've used looks really ugly.
Click to expand...
Click to collapse
Yea i know, i'm really bad at adding proper colors and that was also one of the reasons i shared the file here,
That was just a test file and we can always change colors
And i don't know why you didn't like it but all my friends liked it when i showed them
Sorry for the noob question but how do you change the icons on mobile ?
tire_007 said:
Sorry for the noob question but how do you change the icons on mobile ?
Click to expand...
Click to collapse
On interop unlocked phone with full file system access,
* Paste the ttf file in windows \fonts
* Edit the following path HKLM\software\microsoft\windows NT\current version\fonts
Key = Segoe MDL2 Assets
Value = segmdl2_test.ttf
Sai Chrisna said:
And i don't know why you didn't like it but all my friends liked it when i showed them
Click to expand...
Click to collapse
Maybe 'cause I have a "sense of style"? You know, the really good icons (or any miniatures) creation requires a lot of stuff; you can't just colorize vector graphics and get a good result.
From my point of view, one of a great advantages of the "Metro UI" is a simplicity and brevity, and colors are not a part of the whole idea.
As for your friends: all people are different (and it's good of course!), many young guys are using naked gals pics or "Pokemon" themes for their handsets but I'm not of this kind :laugh:
sensboston said:
Maybe 'cause I have a "sense of style"? You know, the really good icons (or any miniatures) creation requires a lot of stuff; you can't just colorize vector graphics and get a good result.
Click to expand...
Click to collapse
If you haven't observed.,
I did not just add colors, i re-edited almost all the main icons, except for the "apps" icon that recently appeared on creators update.
I understand you've got that same old sense of style as Microsoft., No offense, but what's wrong? why don't you keep calm if you are not interested...
There are some people like me who use "third party themes & icons" on desktop and want to apply the same concept here on phone.
Don't post your personal opinions and discourage people who are interested in doing something cool.
perfect ?
but i dont like the android icons
look like setting icon or sim card
A tecnical question
Witch app is used to edit this colored font file ?
Share a dl link to us
High Logic font creator
https://www.youtube.com/watch?v=J4BSK_ASOlw
Sai Chrisna said:
High Logic font creator
https://www.youtube.com/watch?v=J4BSK_ASOlw
Click to expand...
Click to collapse
hey man check your xda private chats and messages
I want to replace
Please help me..... I want to replace with original file
@sensboston
they are good looking icons even if not your style. have you produced any? lately?
@esgibtnur1, they aren't good: bunch of different styles, bad color gamma, not relevant images (to icon's meaning).
As for "have you produced any?": I'm not an artist (but I have a good sense of style) but one of my app tiles ("Voice Translator") was selected by Microsoft to appear on the gift card.

Android UI font

Hi, I have a quick question for all of you. We know that Roboto is the standard font that we need to use for our Android App. Google Material design specification mentions about Roboto font.. I would like to know can designer/developer use different fonts like Open Sans, sans-serif etc for designing the android UI. Could you please suggest how to use different fonts for Android design? Does it break any rules or does it work in every android screen density? Is it mandatory to use the Roboto font?
android_56576576 said:
Hi, I have a quick question for all of you. We know that Roboto is the standard font that we need to use for our Android App. Google Material design specification mentions about Roboto font.. I would like to know can designer/developer use different fonts like Open Sans, sans-serif etc for designing the android UI. Could you please suggest how to use different fonts for Android design? Does it break any rules or does it work in every android screen density? Is it mandatory to use the Roboto font?
Click to expand...
Click to collapse
Hi,
I read your query and would like to share my experience regarding the fonts used in Android applications. Roboto is the standard font because its visual effects are nice on the device but, it doesn't make it a mandatory choice while app development. You may go for whichever font suits your application until it doesn't make the app interface messy. Also, while choosing the font, you should not try to opt for multiple varieties of styles for a single application. One font style is enough to make app text clear and effective.
Thanks.

Categories

Resources