The 62x62 ApplicationIcon.png file at the root.
The 173x173 Background.png
Splash screens distract users from noticing the time it takes to load the app.
On Windows Phone 7, splash screen graphics must be 480x800 pixels (resolution 96 pixels per inch) and named SpashScreenImage.jpg in folder application root.
For Windows Phone 8, a single image named SplashScreenImage.jpg of 768x1280 (instead of Windows Phone 7's 480x800) is placed in the root folder, and the image will be automatically cropped on WP8 with smaller screens.
When the user clicks the back button, the system goes to the previous entry in the system's NavigationHistory list.
Pages are associated with state history.
Screens are not.
To specify the view which appears upon entry into an app, Windows Phone 7 looks to the AppManifest.xml line:
<Tasks> <DefaultTask Name="_default" NavigationPage="/Views/View1.xaml"> </Tasks>
NOTE: WP7 Menu item text are automatically forced to lower case.
The WP7 SDK includes dark and light samples of WP7 icons files 26x26 pixel grphics with .rest file extension. They go in each app's Assets folder.
Select them to Include in Project and set their property Build Action to Content.
Only 5 menu items are shown.
In the main menu function:
this.ApplicationBar = new ApplicationBar(); ApplicationBarIconButton editButton = new ApplicationBarIconButton(new Uri("/Assets/....png", Urlkind.Relative)); editButton.Text = AppBarResources.EditButtonText; editButton.Click += new EventHandler(editButton_Click); 'function ApplicationBar.Buttons.Add(editButton);
REFERENCE:
WATCH:
Implementing, part 1,
icons, placement,
App Bar
DO THIS: Right-click anywhere on the app's screen for the app bar to appear from the bottom.
QUESTION: The App Bar is ___ pixels high.
WATCH: placement,
To make the App Bar sticky,
<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{sticky:true}">
DO THIS:
Touching anywhere on the screen doesn't make the app bar go away.
To remove the app bar, re-swipe or press Winkey+Z.
TIP: The HTML for the app bar is specified by code such as this, with the indentation I prefer:
<div id="appbar" data-win-control="WinJS.UI.AppBar" <button data-win-control="WinJS.UI.AppBarCommand" data-win-res="{winControl: {label:'command1Label',tooltip:'command1Tooltip'}}" data-win-options="{id:'cmd1', label:'Command',section:'selection', icon:'\uE142', tooltip:'Command 1' }" type="button" ></button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-res="{winControl: {label:'command2Label',tooltip:'command2Tooltip'}}" data-win-options="{id:'cmd2', label:'Point', section:'global', icon:'placeholder', tooltip:'Command 2' }" type="button" ></button>
A different data-win-options specification is coded for each icon.
NOTE: Add/New icons should always be on the right by specifying section:'global'.
Instead of 'placeholder', specify a default glyph name or a Segoe UI Symbol font character number.
DO THIS:
Hold down Winkey + S, search for "char" for the Character Map app.
Select the Segoe UI Symbol font.
Highlight the desired glyph, note at the lower left the name such as "U+06AF".
Code icon:'\u06AF', (with the back slash).
To use a png (ping) file as an icon, create two files, one for dark and one for light background.
Each file is 80x60 pixels containing 8 40x30 blocks for the different states (hover, point state, etc.).
Code icon:'url(images/accept.png)',.
WARNING: The app bar can disply up to 10 icons only.
Icons in Windows 8 App Store app have a flat block look because (rather than graphics files) they are font special characters, which are a lot faster to draw than graphic files.
Within the Windows Library for Javascript, js folder, ui-js file, press Ctrl+F to find "var glyphs".
Login | accounts, |
Apps | allapps, permissions, admin, otheruser, switchapps |
Navigation | go, back, forward, previous, next, up, down, left, right, switch |
Screen | setscreenlock, settile |
Windowing | newwindow, openwith, openpane, closepane, page, rotate, backtowindow, fullscreen |
Player Controls | list, play, pause, stop, previewlink, refresh, selectall, shuffle, slideshow, stopslideshow, volume, mute, gotostart |
Keyboard | keyboard, touchpointer |
Drive | mapdrive, disconnectdrive |
Folders | library, folder, newfolder, movetofolder, uploadskydrive, syncfolder, unsyncfolder |
File Operations | openfile, read, link, save, showresults, repair, attach, |
File Movement | folder, document, download, protecteddocument, upload, sync, openlocal, savelocal, send, |
File Editing | view, edit, file, sort, rename, remove, import, importall, disableupdates |
Field Editing | copy, cut, paste, trim, clear, cancel, undo, redo, highlight, |
Display | mappin, more, viewall |
Objects | add, delete, bullets, manage, placeholder, zoom, zoomout, |
Multiples | filter, clearselection, repeateone, repeatall |
Alignment | alignright, alignleft, aligncenter, |
Fonts | font, fontcolor, italic, bold, underline, fontsize, fontdecrease, fontincrease |
Contacts | people, phonebook, contact, contactinfo, contactpresence, blockcontact |
People | contact2 |
Messages | accept, memo |
cc, mail, mail2, mailforward, mailreplayall, showbcc, hidebcc, important, mailreply, priority | |
Phone | cellphone, phone, hangup, videochat, leavechat, zerobars, onebar, twobars, threebars, fourbars |
Bookmarks | bookmarks, pin, unpin |
Rating | like, dislike, likeddislike, outlinestar, solidstar, |
Store | shop, |
Social | characters, comment, favorite, unfavorite, help, emoji, emoji2, twopage, page2, message, reshare, tag, postupdate, reporthacked, addfriend |
Accessories | calculator |
Calendar | calendar, calendarday, calendarweek, gototoday, calendarreply |
Maps/Geo | world, globe, flag, map, directions |
Camera | camera, attachcamera, rotatecamera, webcam |
Photos | pictures, browsephotos, crop, zoomin, zoomout, caption |
Docking | dockleft, dockright, docbottom, remote |
Device | clock, settings, video, orientation |
Music | audio, musicinfo |
Video | microphone |
These can be specified in App Bar Coding.
QUESTION: How to change image files for apps that come with Windows 8?
id | Icon and label | icon |
---|---|---|
View list as list | ||
Show on Map | ||
Save map view | ||
Bookmark | ||
Redo Search | ||
Repeat | ||
Previous | ||
Play | ||
Next | ||
Sort | ||
Filter | ||
New |
WATCH: How to Implement App Bars
ARTICLE: Embracing UI on demand with the app bar
TOOL: Metro Studio from Syncfusion provides Metro-style icons for $499.
TOOL: componentart.com/windows8 provides
ARTICLE: Creating Glyph Badges
To switch to the menu, many apps (such as Auto Trader) add a button at the lower right corner of the screen above the system's scroll right arrow control.
<script src="/js/searchResults.js"></script>
Associate with activation next.
Windows Store apps define interactions with the system and other apps via
App contracts
Extensions let app developers extend or customize standard Windows features primarily for use in their apps and potentially for use in other apps.
When a user invokes the system charms while within an app, the "This app can't be searched" message appears if the app has not enabled the contract.
Integrating search provides a consistent and predictable entry point for search throughout the system. This also puts most frequently searched app at the top of the searches list.
Press Ctrl+F for keyboard entry point.
REFERENCE: Handling view state
CSS to achieve Microsoft's Metro UI standard for Windows 8 apps need to be crafted with an understanding of the different layouts for each view states an app can display.
To support when the tablet is rotated into fullscreen-landscape view state, the left margin is a 100 pixels, narrower than 120 pixels for the default full screen view state.
Below is sample CSS from the GridView project template:
@media screen and (-ms-view-state: fullscreen-portrait) { .itemdetailpage .content article { margin-left: 100px; [a] } }
To magnify:
DO THIS: On the keyboard, hold down the Winkey and press the plus key.
When you're done with the magnifier, click on the magnifier for its options menu, then close it by pressing its X button.
To open the Switch List to switch among apps
DO THIS: Mouse to the upper left corner until a small tile appears, then drag down along the edge for the list of apps activated.
Alternately:
DO THIS: On the keyboard, while holding down Winkey, keep pressing Tab until Visual Studio is highlighted.
DO THIS: Hold down Winkey and press both Shift and plus (+) key.
Windows 8 introduces a split view which enables, for example, a video to play on one side while another app (such as Twitter feed) is displayed. Snapping and un-snapping can be done without interrupting the video. True multi-tasking.
The smaller app uses the media -ms-view-state: snapped. The left margin is 20 pixels.
Fill view state occurs when another app occupies the snap region.
These 20, 100, and 120 pixels are 4, 5, and 6 units to Microsoft Metro graphic designers who use a grid system of units, each 5 pixels large.
/pages/itemDetail/itemDetail.html calls itemDetail.js
<script src="/js/data.js"></script> <script src="/pages/itemDetail/itemDetail.js"></script>
itemDetail.js makes use of elements defined in the DOM by the html:
<div class="itemdetailpage fragment"> <header aria-label="Header content" role="banner"> <button class="win-backbutton" aria-label="Back" disabled type="button"></button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle"></span> </h1> </header>
Thanks.
WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0); element.querySelector(".titlearea .pagetitle").textContent = item.group.title; element.querySelector("article .item-title").textContent = item.title; element.querySelector("article .item-subtitle").textContent = item.subtitle; element.querySelector("article .item-image").src = item.backgroundImage; element.querySelector("article .item-image").alt = item.subtitle; element.querySelector("article .item-content").innerHTML = item.content; element.querySelector(".content").focus(); } });
WinJS.UI.Pages.define creates a new PageControl from the specified URI that contains the specified members. Multiple calls to this method for the same URI are allowed, and all members will be merged.
/pages/itemDetail/itemDetail.html displays 3 levels of heading text: Group Title, Item Title, and Item Subtitle.
The button is disabled until JavaScript enables it.
In the corresponding CSS file, tag margin-bottom: adds space under each line.
the itemdetailpage class contains
At the top above all text is the
"role=banner" sets an attributes with value "banner".
There is no inner text within the span tag for pagetitle because JavaScript fills it programmatically.
<div class="content" aria-label="Main content" role="main"> <article> <div> <header> <h2 class="item-title"></h2> <h4 class="item-subtitle"></h4> </header> <img class="item-image" src="#" /> <div class="item-content"></div> </div> </article> </div> </div>
A
Explanation of CSS
refer to this table of CSS for the two views side-by-side to better compare differences.
On the left, CSS for the default full screen state establishes multi-column with horizontally scrolling.
fullscreen view state |
@media screen and (-ms-view-state: snapped) { |
---|---|
.itemdetailpage .content { -ms-grid-row: 1; -ms-grid-row-span: 2; display: block; height: 100%; overflow-x: auto; position: relative; width: 100%; z-index: 0; } |
.itemdetailpage .content { -ms-grid-row: 2; -ms-grid-row-span: 1; overflow-x: hidden; overflow-y: auto; } |
.itemdetailpage .content article { column-fill: auto; column-gap: 80px; column-width: 480px; height: calc(100% - 183px); margin-left: 120px; [a] margin-top: 133px; [b] width: 480px; } |
.itemdetailpage .content article { -ms-grid-columns: 300px 1fr; -ms-grid-row: 2; -ms-grid-rows: auto 60px; display: -ms-grid; height: 100%; margin-left: 20px; [a] margin-top: 6px; [c] width: 300px; } |
.itemdetailpage .content article header .item-title { margin-bottom: 19px; } .itemdetailpage .content article header .item-subtitle { margin-bottom: 16px; margin-top: 0; } |
.itemdetailpage .content article header .item-title { margin-bottom: 10px; [d] } |
.itemdetailpage .content article .item-image { width: 460px; height: 240px; [h] } .itemdetailpage .content article .item-content p { margin-top: 10px; margin-bottom: 20px; margin-right: 20px; } |
.itemdetailpage .content article .item-image { width: 280px; height: 140px; [h] } .itemdetailpage .content article .item-content { padding-bottom: 60px; } |
REFERENCE: Laying out an app page (Windows Store apps using JavaScript and HTML)
[b] To achieve page header baseline guidelines of 5 units (100 pixels) from the top, the margin-top is set to 133px for full view because ???.
[c] The margin-top in snapped view refers to each article.
[d]
Vertically, lists of tiles or text have 1 unit (20 pixels) of vertical padding.
Hard-edged objects have 2 sub-units (10 pixels) of padding between items in a row.
[e] Content region is 7 units (140 pixels) from the top. Horizontally panning content, it should be no more than 6.5 units (130 pixels), and no less than 2.5 units (50 pixels).
[f] Padding between groups is a generous 4 units (80 pixels) to help people easily distinguish one group from another when panning across many groups.
[g]
2 sub-units (10 pixels) of padding separate hard-edged content items (like images and user tiles)
are separated from accompanying text and other columns.
Lists in columns are separated by 2 units (40 pixels) of padding.
[h]
.item-image areas have different sizes in full vs. snapped views:
In group .item: 250x250 pixels over 2 rows vs. 60x60 in snapped view.
WARNING:
The item-image area within article entries have different aspect ratios
as well as different sizes:
In detail: 460/240 = 19.166 vs. 280/140 = 2
Upon entry into the Grid app, the app name is displayed in ___ point font with the group item (Index) in a smaller __ point font.
DO THIS: Click the subtitle for the groupDetail screen.
The subtitle is now the title for the groupDetail screen.
BLAH: Some may find that the substitution of positions jarring. So some device such as animation to show gradual movement from sub-title to title. Or colors can be maintained between titles and subtitles to provide visual consistency.
Many images are defined using symbols within fonts rather than from graphic (.png) file, using CSS code such as this:
.groupeditemspage .groupeditemslist .group-header .group-chevron::before { content: "\E26B"; font-family: 'Segoe UI Symbol'; }
This makes for much faster user experience since no downloads of images are necessary.
QUESTION: Where is a list of the symbols?
Resource | Pixels | File Name | Notes |
---|---|---|---|
Logo | 150 x 150 | squareTile-sdk.png | - |
Wide logo | 310 x 150 | tile-sdk.png | 248x120 on home page? |
Small logo | 30 x 30 | smallTile-sdk.png | |
Notification badge logo | 24 x 24 | - | This is optional. |
Splash screen> | 620 x 300 | splash-sdk.png | |
- | 28 x 18 | windows-sdk.png | upper-left corner |
- | 50 x 50 | storelogo.png | - |
WARNING: Windows Phone 8 automatically export images to a 16 bit color space. So to prevent "banding", add noice to gradients using Photoshop.
Windows Phone use these logos for listing files specified in WMAppManifest.xml:
Resource | Pixels | File Name | Notes |
---|---|---|---|
Small | 33x33 | - | Email attachments |
Medium | 69x69 | - | Office hub list view |
Large | 176x176 | - | Browser download |
To avoid ugly pixelation, Windows 8 requests that developers create 3 versions of each image - one for each screen size category:
Scaling | % | Name | Screen Pixels | TV Diagonal | dpi | click | Size | Cell |
---|---|---|---|---|---|---|---|---|
1x | 100% | fo.scale-100.jpg | 1366x768 | 10 inch | 135 dpi | 5mm | 20px | 20px |
1.4x | 140% | fo.scale-140.jpg | 1920x1080 | 23 inch | 190 dpi | 7mm | 28px | 30px |
1.8x | 180% | fo.scale-180.jpg | 2560x1440 | 30 inch | 253 dpi | 9mm | 36px | 50px |
Windows 8 automatically alters the file name it uses depending on the screen size being used. For example, the name of the image file specified as "fo.jpg" in the HTML <img tag resolves to physical file "fo.scale-100.jpg" when displayed on smaller tablets.
The 100/140/180 scaling is designed to be compatible with the Windows 8 grid system.
Microsoft's fonts were designed to go with their point-based (rather than pixel-based) layout grid, one unit is 20 points, with the smallest sub-unit at 5 points, and each column of 80 points.
So set a gridline every 20 pixels in Photoshop > Preferences > Guides, Grid & Slices, with sub-divisions of 2 pixels. Kerning should be in metric.
Targets for touch should therefore be 40 pixels (7 mm) or larger, with 2mm padding. 9mm is 50 pixels. Radio buttons should be at least 5mm (30 pixels).
The left edge of __ points gives breathing room.
320 pixels is the fixed width for the smaller Snap view.
On-demand UI events are managed by the EdgeGesture class.
ListView Displays a collection of items in a grid or list layout.
A list View UI control :
<div data-win-control="WinJS.UI.ViewBox"> <div class="fixedlayout"> ... </div> </div>
The WinJS.Application object provides three buckets to store unstructured state:
These APIs create sub directories, multiple file formats, and full async programming at multiple layers.
Data is versioned.
Use the Windows.Security.Cryptography namespace to Encode and Decode, Working with SSL certs
On-device storage
data-win-bind attribute binds a property of an element to a property of a data source.
The auto-syncs with back-end servers.
REMEMBER: Each WinRT app project must contain all resources (fonts and js libraries). References to external font libraries (a feature in HTML5) is verboten.
Dynamic references outside the app need to be within a HTML frame.
TODO: Create an msapp-err.html to load automatically in the iframe when errors occur.
DO THIS: Do down the Winkey and press P.
Windows 8 shows options if it detects multiple monitors plugged in.
No longer are Windows users required users to figure out which hidden special function key to press for switching between the laptop screen and the projector.
Microsoft's sans-serif Segoe font family consists of 5 fonts:
The recommended size of fonts was designed to coordinate with the Win8 grid system and automatic scaling factors:
Cambria font can also be used.
REFERENCES: Microsoft Typography, Microsoft Fonts
Movement transitions in and out inform users about where UI elements belong.
Live Tiles is the "front door" to an app.
WinJS.UI.Animation.fadeIn(document.querySelector(“div”));
jQuery? Selectors: •document.querySelector(".headerTemplate") •document.querySelectorAll("div")
Text •document.querySelector(“#Title”).textContent;
The Windows Library for JavaScript toolkit provides several controls that aren't a part of HTML5:
But a custom control can be defined too:
<div data-win-control="SdkSample.ScenarioOutput">
The ScenarioOutput control is defined as a new WinJS.Class by invoking the define method by this code within sample-util.js:
var ScenarioOutput = WinJS.Class.define( function (element, options) { element.winControl = this; this.element = element; new WinJS.Utilities.QueryCollection(element) .setAttribute("role", "region") .setAttribute("aria-labelledby", "outputLabel") .setAttribute("aria-live", "assertive"); element.id = "output"; this._addOutputLabel(element); this._addStatusOutput(element); }, { _addOutputLabel: function (element) { var label = document.createElement("h2"); label.id = "outputLabel"; label.textContent = "Output"; element.parentNode.insertBefore(label, element); }, _addStatusOutput: function (element) { var statusDiv = document.createElement("div"); statusDiv.id = "statusMessage"; element.insertBefore(statusDiv, element.childNodes[0]); } } );
Te aria- in aria-labelledby, etc. refers to W3C-defined HTML attributes for Accessible Rich Internet Applications (WAI-ARIA) 1.0 for assistive technologies.
The ViewBox UI control automatically scales pixels to whatever pixel density each device has.
<div data-win-control="WinJS.UI.ViewBox"> <div class="fixedlayout"> ... </div> </div>
Grid Layouts make use of several sets of html/css/js. The default.html specifies the Application.PageControlNavigator control:
<div data-win-control="Application.PageControlNavigator"> <data-win-options="{home: '/pages/groupedItems/groupedItems.html'}" </div>
groupedItems.html makes use of the WinJS.Binding.Template control which uses two templates: classes headertemplate and itemtemplate.
Within VS11, open project based on
SAMPLE:
Grid
This has a pages folder.
Users enter the Grid app's hub page named groupedItems horizontally panning view of categories of content to show users a glimpse of what's new and available. Each item maps to one of the app's Section pages.
Each Section groupDetail bubbles up content or functionality. The Hub should offer a lot of visual variety, engage users, and draw them in to different parts of the app. of an app can display in any form that best represents the scenario and content the Section contains. Section pages may also take advantage of grouping and a panorama style layout. Each section consists of individual items, each of which has its own Detail page.
Each itemDetail page may vary tremendously depending upon the type of content. Each page may contain a lot of information or may contain a single object, such as a picture or video.
Send location between Bing maps.
How To: Bing Maps For Windows 8 Metro Apps - JavaScript
var messageDialog = new.windows.UI.Popups.MessageDialog('Hello'); messageDialog.showAsync();
SAMPLE APP: Toast notifications sample shows many different formats of display.
Toasts are issues as XML
Anyone can search for and view public files on Jason's SkyDrive
"Save to SkyDrive Folders, files, albums of photos, videos, audio, tags, and comments using the SkyDrive API
Skydrive home page provides links to apps on Android and iOS devices.
Calendars. Work with calendars and events.
"What others are saying about this app" from Messenger Instant messaging Users and buddies. Get a user's info and his or her buddies' info—including things like their friendly names, presence info, and status messages. Status updates. Update a user's status message, a personal message that the user chooses to share with others (for example, participating in a web-based game). This is done by using the Messenger API using XMPP (Extensible Messaging and Presence Protocol)
Blog mentioned in the Windows Store Dashboard to Sell apps
Flip View Control programming by
Windows 8 JavaScript – Settings by
Window 8 JavaScript–Asynchronous Programming & App Storage
How To Connect Window Phone 7 and Windows 8 app to Microsoft pubCenter
Wireframes define the look of an app.
RESOURCE: Windows8Templates.com offers PowerPoint vector files and free icons.
QUESTION: Are Win8 templates available for Axure used to create wireframes for apps?
DOWNLOAD AND INSTALL:
From
Download design assets for Metro style apps or
MS Win8 Design Assets containing PhotoshopTemplates.zip.
The .psd files (created by Adobe Photoshop) define most elements of Microsoft's Metro (modern) UI design adopted by Windows 8, and listed in the table below.
Top folder | Sub-folder(s) | Photoshop file | Related |
---|---|---|---|
base_layout | - |
Fill_template.psd
Full_template.psd Portrait_template.psd Snap_template.psd | |
common_ components | Contracts |
CharmsBarClock.psd
Picker.psd Search.psd SettingsFlyout.psd ShareFlyout.psd | |
HandsHardwareKeyboard |
Hands.psd
Hardware.psd TouchKeyboard.psd | ||
Notifications | ToastTemplates.psd | ||
Tiles/1x1_legacy | Tile_Legacy.psd | ||
Tiles/1x1_photo_bleed |
Tile_headline_appname_photo.psd
Tile_headline_appname_photo_nobadge.psd | ||
Tiles/1x1_text_only |
Tile_appname_only.psd
Tile_description_date.psd Tile_headline_text.psd Tile_text_only.psd Tile_text_only_list.psd | ||
Tiles/2x1_peek | Tile_peek_content.psd | ||
Tiles/2x1_photo_bleed |
Tile_image_combo_appname.psd
Tile_image_full_2x1_appname.psd Tile_image_full_2x1_text.psd Tile_thumb_description_date.psd Tile_thumb_headline_list.psd Tile_thumb_headline_only.psd Tile_thumb_headline_text.psd Tile_thumb_list_date.psd Tile_thumb_text_only.psd | ||
Tiles/2x1_text_only |
Tile_headline_only.psd
Tile_headline_text.psd Tile_headline_text_list.psd Tile_headline_text_twocolumn_narrow.psd Tile_headline_text_twocolumn_wide.psd Tile_text_only.psd Tile_text_only_list.psd Tile_text_only_twocolumn_narrow.psd Tile_text_only_twocolumn_wide.psd | ||
common_ controls | - |
App_Toolbar.psd
App_Toolbar_Portrait.psd | App Bar |
Dark Theme |
CheckBox.psd
Collection.psd CommandButton.psd ContextMenu.psd DateTimePicker.psd Dialog.psd Flipper.psd Flyouts.psd InlineErrors.psd MediaPlayer.psd MessageBar.psd MessageDialog.psd PasswordBox.psd Progress.psd PushButton.psd RadioButton.psd Rating.psd ScrollControls.psd Slider.psd TextBox.psd ToggleButton.psd ToggleMenu.psd ToggleSwitch.psd Tooltips.psd | ||
Light Theme |
CheckBox.psd
Collection.psd CommandButton.psd ContextMenu.psd DateTimePicker.psd Dialog.psd Flipper.psd Flyouts.psd InlineErrors.psd MediaPlayer.psd MessageBar.psd MessageDialog.psd PasswordBox.psd Progress.psd PushButton.psd RadioButton.psd Rating.psd ScrollControls.psd Slider.psd TextBox.psd ToggleButton.psd ToggleMenu.psd ToggleSwitch.psd Tooltips.psd | ||
project_ templates | Dark Theme |
Grid_Group_Detail_Page_Dark.psd
Grid_Group_Detail_Page_Dark_Portrait.psd Grid_Group_Detail_Page_Dark_Snap.psd Grid_Item_Detail_Page_Dark.psd Grid_Item_Detail_Page_Dark_Portrait.psd Grid_Item_Detail_Page_Dark_Snap.psd Grid_Landing_Page_Dark.psd Grid_Landing_Page_Dark_Portrait.psd Split_Items_Page_Dark_Portrait.psd Split_Item_Detail_Page_Dark_Portrait.psd Split_Item_Page_Dark_Snap.psd Split_Landing_Page_Dark.psd Split_Landing_Page_Dark_Portrait.psd Split_Page_Dark.psd Split_Page_Dark_Fill.psd Split_Page_Dark_Snap.psd | |
Light Theme |
Grid_Group_Detail_Page_Light.psd
Grid_Group_Detail_Page_Light_Portrait.psd Grid_Group_Detail_Page_Light_Snap.psd Grid_Item_Detail_Page_Light.psd Grid_Item_Detail_Page_Light_Portrait.psd Grid_Item_Detail_Page_Light_Snap.psd Grid_Landing_Page_Light.psd Grid_Landing_Page_Light_Portrait.psd Split_Items_Page_Light_Portrait.psd Split_Item_Detail_Page_Light_Portrait.psd Split_Item_Page_Light_Snap.psd Split_Landing_Page_Light.psd Split_Landing_Page_Light_Portrait.psd Split_Page_Light.psd Split_Page_Light_Fill.psd Split_Page_Light_Snap.psd |
Microsoft Blend cannot read .psd files. So DOWNLOAD AND INSTALL: irfanview.com FREE to view .psd files
| Your first name: Your family name: Your location (city, country): Your Email address: |
Top of Page
Thank you! |