Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts

Wednesday, February 19, 2014

Blend for VS2013 Windows Phone SketchFlow Templates

Timmy Kokke - Windows Phone Sketchflow 2013

In the past I used SketchFlow to prototype my Windows Phone apps. Unfortunately the development of the windows phone SketchFlow templates stopped back in 2011. These templates don’t work in Blend for Visual Studio 2013. Today I had enough of not being able to use that template and just upgraded it to Blend for VS2013.

To use the template you’ll need Silverlight and SketchFlow (which comes with Blend on VS premium and ultimate).

You can download the Windows Phone SketchFlow templates here: http://1drv.ms/1gfqR1d

Once downloaded, extract the zip file into: %userprofile%\documents\Visual Studio 2013\Blend

...

image

Been quite on the SketchFlow front recently. Good to see it's not dead out there in the "real world"...

 

Related Past Post XRef:
For the Win[JS] - Blend for Visual Studio 2012 now available (and Blend for WPF/SilverLight & SketchFlow Preview too)
Will the real Windows Phone 7 SketchFlow Template please stand up...
Sketching out an WP7 user interface and interaction with SketchFlow
A SketchFlow Two-fer day - “Shawn Wildermuth on SketchFlow/dnrTV” and “Prototyping a WPF-3D game design workflow using TrueSpace 3D, Expression Blend 3 with SketchFlow, and exporting the prototype to XNA Game Studio.”
“Application Prototyping with SketchFlow” Refcardz
Four Expression 3 Starter Kits, two for Blend and two for Web, focusing on Sketchflow, Gaming, SuperPreview and SilverLight.

Thursday, February 06, 2014

Creative Commons UI Design Pattern Library from Yahoo, (aka Yahoo Design Stencil Kit version 1.0) in Visio, PDF, PNG and more formats

Yahoo Design Pattern Library

Download a Stencil Kit

Yahoo Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics:

  • Ad Units
  • Calendars
  • Carousels
  • Charts and Tables
  • UI Controls
  • Form Element
  • Grids
  • Menus and Buttons
  • Mobile - General
  • Mobile - iPhone
  • Navigation and Pagination
  • OS Element
  • Placeholder Text
  • Screen Resolutions
  • Tabs
  • Windows and Containers

image

image

While not very Microsoft'y, this looks like a great UI design resource.

(via Chris Hopkins' Blog - UI Design Shapes)

Tuesday, November 26, 2013

Windows 8.1 Store App Paper Prototyping Templates

Jason Roberts Don't Code Tired - Paper Prototyping Templates for Windows 8.1 Store Apps

These are updated paper prototyping templates for Windows 8.1 Store apps.

The changes from the previous 8.0 versions are mostly to do with the removal of snapped and filled modes in Windows 8.1 Store apps; there are new versions for the new default minimum width of 500px and also for the optional minimum width of 320px.

...

image

Perfect Meeting-ware. Print out some of these bring them to your next meeting and you'll seem really engaged as you scratch away making those "notes" in your notebook. :)

To get them, just click through, right click on them and Save...

Friday, August 09, 2013

WPF/SilverLight IG Theme is now free from Infragistics

Brian Lagunas - FREE IG Theme for WPF and Silverlight Microsoft Controls

It’s that time again!  Time for another free WPF and Silverlight theme for the Microsoft controls.  The last free theme I gave away was the Metro Light and Dark Themes for WPF and Silverlight Microsoft controls.  Soon after I released that theme, there was an overwhelming positive response from the community.  So, I am fulfilling the promise I made in my last post.  I am releasing another free theme.

Today’s free theme is the standard Infragistics Theme, also referred to as the IG Theme.

Silverlight

First up is the Silverlight version of the Infragistics’ “IG Theme”.  We are providing a style for each primitive control that appears in the Visual Studio toolbox, the controls that ship with the Silverlight SDK, and of course some controls from the Silverlight Toolkit.  As you can see, we organized the themes by their respective source so that you have the option to use which ever control you need and not add any unnecessary dependencies on other assemblies.  Here is the list of resource dictionaries you are getting.

...

WPF

Next up is the WPF version of the Infragistics’ “IG Theme”.  Just like the Silverlight version, we are providing you with styles for the primitive WPF controls that appear in the Visual Studio toolbox, as well as some controls in the WPF Toolkit.  Just like for the Silverlight version, we organized the themes by their respective source so that if you don’t use the WPF toolkit, there will be no need for your code to take a dependency on it.

Here is the full list of support controls:

  • Accordion
  • AutoCompleteBox
  • Button
  • CheckBox
  • ComboBox
  • Expander
  • GridSplitter
  • GroupBox
  • Label
  • ListBox
  • PasswordBox
  • ProgressBar
  • RadioButton
  • Rating
  • RepeatButton
  • Slider
  • TextBox
  • ToggleButton
  • Tooltip

image

Kudo's again to Infragistics and Brian for releasing this theme for free...

 

Related Past Post XRef:
Brian (and Infragistics) is having a theme give-away... As in giving away some of their WPF and Silverlight themes

Friday, May 31, 2013

Brian (and Infragistics) is having a theme give-away... As in giving away some of their WPF and Silverlight themes

Brian Lagunas - FREE Metro Light and Dark Themes for WPF and Silverlight Microsoft Controls

The quest for a good application theme never ends.  You spend hours scouring the realms of Google and Bing looking for a clean, modern, and touch friendly theme to use in your application.  That is, until now!  If you have been looking for a free Metro theme for WPF and Silverlight, then look no further.

Infragistics ships a number of great themes with their NetAdvantage for WPF and Silverlight products.  As the Product Manager for these controls, I started asking myself, “Why should we keep these great themes to ourselves?”.  If you know me, you know I am a hard core XAML developer and I am all about community.  Heck, I single handedly wrote the most popular Extended WPF toolkit in the world, and I provided it to everyone for free.  So starting today, I am excited to announce that I am going to be giving away, all of our themes for the standard WPF and Silverlight Microsoft controls.  Yes, I said GIVING AWAY, as in FREE.

There is a catch though.  We will NOT support every single Microsoft control.  Why?  Well, because we would prefer for you to use our controls instead.  For example, we will not be providing a style for the Microsoft DataGrid because we have a much better xamDataGrid control.  You get the idea.  Also,  I am not going to give them to you all at once.  I am going to release them a one at a time.  Why?  Well, I want to see what kind of response I get from the community.  If I get zero response or support from the community, then there is no need to keep releasing themes.  I don’t want to waste my time, or the developers who create these themes time.  On the other hand, if the community gives me an overwhelming show of support, then I will be releasing more themes.  Seems fair, wouldn’t you agree?

Today’s free theme is a clean, modern, touch friendly theme in the form of the Infragistics’ Metro Theme.  You will be getting both a Light and Dark version. ...

...

Silverlight

You can see the full list of supported controls in the list below.

  • Accordion
  • AutoCompleteBox
  • BusyIndicator
  • Button
  • CheckBox
  • ComboBox
  • Expander
  • GridSplitter
  • Label
  • ListBox
  • PasswordBox
  • ProgressBar
  • RadioButton
  • Rating
  • RepeatButton
  • Slider
  • TabControl
  • TextBox
  • ToggleButton
  • Tooltip

...

WPF

Next up is the WPF version of the Infragistics’ Metro Theme.  Just like the Silverlight version, we are providing you with styles for the primitive WPF controls that appear in the Visual Studio toolbox, as well as some controls in the WPF Toolkit.  Just like for the Silverlight version, we organized the themes by their respective source so that if you don’t use the WPF toolkit, there will be no need for your code to take a dependency on it..

Here is the full list of support controls:

  • Accordion
  • AutoCompleteBox
  • Button
  • CheckBox
  • ComboBox
  • Expander
  • GridSplitter
  • GroupBox
  • Label
  • ListBox
  • PasswordBox
  • ProgressBar
  • RadioButton
  • Rating
  • RepeatButton
  • Slider
  • TextBox
  • ToggleButton
  • Tooltip

...

image

..."

This made me chuckle, "There is a catch though.  We will NOT support every single Microsoft control.  Why?  Well, because we would prefer for you to use our controls instead..." GOT to love that kind of clear and honest answer. Will that me everyone happy? No, it's the internet. I'm sure someone will whine... But hey, what do you want for free, your money back?

I applaud them for looking at their stuff and saying, "you know, this isn't directly revenue generating and we could do something nice for the community by giving some of our theme's away." Or they could have been thinking, "OMG the WPF app's I'm seeing are pretty darn fugly. Maybe if we gave our themes away..." Or more likely, "Brian, will you shut the heck up and stop bugging us about 'community' if we give something away? Like maybe our themes?"

Anyway, no matter what they were thinking, I'm glad they are doing it.

Finally I also like that it's a a little WPF and Silverlight love... :)

Thursday, April 04, 2013

Now that's Qool

Make IT Right - Very Qool

If you've got Windows 8 then there's now a free app you can download to help create the Visual Story Map, which is the core model in the visual storytelling approach from my book Stories That Move Mountains. Qool (http://qool.598studiosinc.com/) allows you to capture notes, audio, video and files onto a single page view, and synchronize this across all your devices. All the items stay where you put them on the screen, and you can pick the Visual Story Map as one of the templates to work with.

You can also pick other templates which allow you to create Business Models, To Do lists or just a blank whiteboard to work with. [GD: Post Leached in Full]

qool

Create your own structure-free and rich dashboard and get it real-time synchronized between all your Windows 8 devices.
qool joins you in the process of pining your ideas, setting priorities, brainstorming your thoughts or achieving your tasks.
One-click actions, beautiful design, always synchronized and simplicity are the key design points of “qool”.

With qool, it´s easier to see your Big Picture!... Unleash your mind: qool is about enabling things.

Stay tuned: real-time team shared dashboards and Windows Phone App coming soon.

qool (Windows Store)

image

image

Features

  • Create your own structure-free and rich dashboard
  • Include notes, videos, audios, files and pictures in your dashboards
  • Get all your stuff synchronized across all your Windows 8 devices
  • Order, list, filter and group your stuff
  • Pin your stuff in the Start Screen
  • Share your stuff thru the “share charm”
  • “score” your accomplished stuff
  • Simple way of organizing all your things
  • Choose the dashboard draw that meets your work style
  • Choose you preferred dashboard background
  • No logging required
  • Pin your links in your dashboard from Internet Explorer thru the “share charm”

I love the sync story most of all... Installed :)

Wednesday, February 13, 2013

Gaming up a story with the PowerPoint Game Design Storyboard Shapes...

Visual Studio Gallery - Storyboard Shapes - Game Design Shapes

"Use these shapes to visualize your game and then connect them to the Team Foundation Server

This is the first of a number of icons that you could use to design your games.  This is not intended to be used in place of your final graphics, but allows you to determine what graphics you need and to explain your work goals.

For connectors in Storyboarding, use the "shapes" and select a connector.  The Storyboard shapes do not normally have connectors. If you are used to using Visio that can be confusing.

This will aid in showing non-app devs what your plan of work is for your game.  This storyboard might be improved overtime since it needs improvement.

..."

Storyboarding in PowerPoint/VS2012 has saved me untold hours of effort... There's just nothing like showing a user a near-app like view of what you THINK they are asking for (and getting back, "Oh no, not THAT! Now that I see it, I'd...")

Here's a snap of more of the shapes in this pack;

image

Thursday, December 13, 2012

AppMock - Free Windows Store App to Design Windows Store App's

AppMock by Telerik

image

Description

Telerik AppMock allows you to quickly and easily create prototypes of your Windows Store applications. Providing a rich set of Windows 8 Style tools and components, conveniently grouped in galleries and categories, you can simply drag and drop UI elements onto the design surface to arrange the layout and flow of your application. You can organize the prototypes in pages (called sheets) and projects and in the end you can run the projects to see all that in action, by navigating through the pages using preset links (hot-spots).

Features

  • Create/Save/Open projects
  • Create pages/sheets
  • Drag and Drop shapes onto the design surface
  • Rich Galleries - Interactivity, Buttons&Links, Text&Input, Data Visualization, Media, Layout, Editors, Loading indicators, Data&Scheduling, Navigation, Gestures, Comments, Flow Charts, etc.
  • Customize the shapes - cut/copy/paste/resize/rotate/bring to front/set text/font-size/links/etc.
  • Undo/Redo
  • Multiple Selection of shapes
  • Navigate between pages/sheets
  • Run projects and use links between the pages/sheets
  • Search and Share via the charms
  • Pin projects to the start screen
  • Export projects

Telerik AppMock

...

Most Important Features/Behaviors

Creating Projects

Telerik AppMock allows you to organize your prototypes in projects by letting you:

  • Create new Project and give it a custom name
  • Save and Open the newly created Project
  • Rename your Project

Using the Design surface

Telerik AppMock supports two different modes – Design-time and Run-time. While you are designing (mocking) your application you are in the Design mode. It is visually split into a ToolBox (on the left, containing the Galleries) and Design surface on the right.

image

Creating Sheets (Pages)

Every project consists of sheets. A sheet represents a single screen of your application. You can:

  • Save (Save as) a sheet
  • Add/Remove sheet from the project
  • Copy/Paste the entire sheet

Using the rich Galleries

Telerik AppMock comes with a set of predefined galleries containing various UI shapes. Each shape represents a component or tool that can show certain logic of your app. For convenience all shapes are grouped in categories such as Navigation, Interactivity, etc. In addition there’s a search box right at the top of the toolbox (the panel containing all shapes) to enable you quickly find a tool or component. You can drag and drop any shape from the toolbox onto the design surface. Following is the list of predefined galleries:

  • Windows 8 Controls containing groups of shapes such as Interactivity, Buttons&Links, Text&Input, Data Visualization, Media, Layout, Editors, Loading indicators, Data&Scheduling, Navigation
  • Gestures
  • Comments
  • Basic Shapes - containing groups of shapes such as Flow Chart and Arrows

...

Now that's kind of cool... Love that there's an ARM version too (so should work on Surface :)

(via Dan Rigby - Windows Store Developer Links – 2012-12-13)

Monday, December 10, 2012

Like the new VS2012 UI style? Here's how you can use like styles in your WPF app..

CodeProject - Visual Studio 2012 Metro Styles for WPF

Contents

Introduction

Although there are still serious discussions about whether the "Metro" design concept from Microsoft is good or not, WPF developers, who follow the trend, may now write their styles keeping the concept in mind. But despite the fact that many people think about the Tile Wall of Windows 8, when they hear the word "Metro", the concept itself actually means much more than that. The main idea is to keep things simple. No more gradients, no more colorful, blinking, glassy, flashing surfaces. One of the applications demonstrating this concept best is, no doubt, the new Visual Studio 2012. This article will present some Visual Studio like WPF styles.

"Styles like visual studio" means, that I didn´t copy the styles of course (using a decompiler or something) and so they aren´t actually equal, but I used the same colors and I structured my demo application like VS. I will discuss some of the main differences later.

Screenshots

First some screenshots of what we´ll end up with, to show you what I´m talking about:

image

..."

Love them, hate them, tolerate them, I still think this community driven VS2012 WPF styles project/download cool...

Wednesday, December 05, 2012

Telerik talks wireframes and app design...

The Telerik Blogs - The Importance of Wireframes in Application Design

Recently, I joined efforts with two of my good friends and fellow Telerik Evangelists Michael Crump and Jesse Liberty to jointly build an application that would run on Windows 8 and Windows Phone.  Michael will do the Windows Phone development, Jesse Windows 8 with C# and XAML, and I will tackle the WinJS version.

Jesse did a great job of outlining the goals of the application and the initial wireframes of the application in his post on the project kick off.  I want to focus on the value of using Wireframes in application design.

“It Must Be Done, Right?”

A friend of mine, Mike, spent a great deal of time putting together a PowerPoint presentation that represented what the application they were building was going to look like.  Not a single line of code had been written yet – in fact, they didn’t even have funding for the project. 

The slides looked amazingly realistic.  The transitions were built so that when Mike  “clicked” on an image of a button, the slide transitions looked like there really was a program responding to his input.

The presentation went great, and all of the senior management who had to decide on funding were very impressed.  The project was a go!  The executive vice president who chaired the committee pulled Mike aside as the others were leaving, and asked him to stay behind.  When everyone else had left, the EVP asked Mike to install the software on his computer so he could play with it.  Without flinching, Mike responded the only way he knew how – “Sir, I can’t because my PowerPoint compiler isn’t working right now.  This only works on my machine.”

That is a perfect illustration of one of the dangers of making awesome looking graphics to demonstrate what you are going to be building.  People will assume that it’s done.  And then they can’t figure out why it’s taking so long to get it deployed!

“It’s too late to change anything now”

..."

Again I have to say I dig seeing this kind of blog post from a company/ISV blog site. All to often company blogs are thinly veiled marketing posts or just bla, bla, bla. Not so in this case. Telerik seems to really embrace giving their people a voice, their own personal voice. You want to read their posts because you feel you are connecting with a person, you are creating something of a relationship.  And that good feeling translates into a good feeling about Telerik... I know, imagine that! :)

Thursday, November 29, 2012

A Windows 8/Windows Store App Design Worksheet (Print, pencil, create!)

DZone - A Windows 8 App Design Worksheet

Attached is a worksheet that might help you when you’re brainstorming the design of your Windows 8 app.

It encourages the 3-tier navigation structure that’s common with these apps. The grid units are 1 unit (20 pixels). There are rules for the top and left margins (5 units and 6 units respectively) as well as for an app bar (88 pixels) and for snapped view (16 units).

If I modify it, I will replace the attachment here so that you can always come back to this post to download more sheets. It helps to have a few of these printed out and stashed in your computer bag.

image

When I do my initial design brain storming, I'm old school and really like pencil and paper so I can see something like this coming in real handy. That or when I design our new kitchen... (No! When creating a maze! No, no, no... when mapping a dungeon! That's it! LOL ...) [Sorry, it's been a long week...]

Don't be blue, be Indigo! Indigo Studio from Infragistics released today (and it's free forever too)

Indigo Studio Blog - Announcing Indigo Studio!

We’re super thrilled to announce the release of our new rapid, code-free prototyping tool, Indigo Studio!

With Indigo Studio, by the time you are done creating wireframes, you will have an interactive prototype ready to present and evaluate! If you want to know what Indigo Studio is all about, check out the Indigo Studio homepage, it’s a great place to start. We won’t bore you here by repeating all that information again.

Okay, we’ll repeat one thing: Indigo Studio Version 1 is completely FREE, and it is available for both Mac and Windows.

..."

Indigo Studio

The newest design tool from the leaders in UX, Indigo Studio lets you quickly and simply explore and create functional, animated UI prototypes while maintaining the focus on user experience at every step.

Whether you’re a designer without developer skills, a developer without design resources, or anyone with a great idea - you can design storyboards in real-world context, quickly prototype application design interactions that integrate with your storyboards, annotate those designs, and share your best designs with team members and key stakeholders. What’s more, you don’t need to spend a fortune on incomplete prototyping and static wireframing tools. Indigo Studio does things better – delivering rich, interactive experiences. And for a whole lot less – like Free!

 

Storyboard for Real Life

Indigo Studio helps you keep your focus on your users, right from the start. Easily incorporate your designs directly into real-world scenarios by choosing from more than 100 integrated storyboard scenes with people, places, and various devices.

...

Do You Really Mean Free?

Yes - we really mean free. Download version 1.0 today and get it to keep for free, forever!

image..."

As you might know I've become a fan of the new Storyboard feature that comes with Visual Studio 2012. The big problem is that it's limited to the Premium, Ultimate and Test Pro SKU's. We're some Project Managers and Analyst's that want to also wireframe/prototype/storyboard app's and we're not getting the VS just so they can use the VS Storyboard feature.

So this looks like a no-braining to check out...

Friday, November 16, 2012

Windows 8 wireframe templates for PowerPoint for free

Designmodo - Free Windows 8 Wireframe Templates for PowerPoint

Microsoft has finally released Windows 8, and is promoting its launch with a billion-dollar marketing campaign. This creates new opportunities for app developers, especially since the Windows Store isn’t yet as crowded as the Apple and Android counterparts. However, before you go ahead and start programming an app, I’d suggest you design some quick prototypes first to validate your idea. Play with different variants, show them to your peers, and adapt the designs based on the feedback you receive. Although this may seem like unwanted overhead, in the end, it will result in a better app with a better user experience. In some cases, the gathered feedback may even prevent you from investing time and money into an idea that no one really finds interesting or needed.

To help minimize the prototyping effort, I have created a set of interface templates for PowerPoint. Using these templates, you can quickly put together a Windows 8 app layout and iterate on it. All elements in the set are based upon regular PowerPoint vector shapes, and are fully editable and customizable.

...

Download the Templates For Free!

The wireframing set is available as a .pptx file (for PowerPoint 2007 or newer) that you can download using the link below:

  • Download Windows 8 Wireframing Set for PowerPoint (.pptx, 0.5 mb) [GD: Click through for the download links]

It is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. Basically, you can use it any way you want, private or commercial, just as long as you distribute the resulting work under the same license and give proper credit to the original creators:

...

image

image..."

I've become a pretty big fan of sketching/wire framing/prototyping my UI's in PowerPoint. Why? It's quick, easy and everyone has it. Plus when they get it, they know it's a prototype. There's no question of it actually working. Sketch Flow could give the impression that a working app is just around the corner. Visio, not everyone has it... Oh sure, it's not perfect, but for quick and dirty designs where paper napkins are not available, it can be the next best thing...

(via Windows Phone Geek - Free Windows 8 Wireframe Templates for PowerPoint)

Thursday, November 15, 2012

Shedding some light into the dark... A video tutorial series on building Windows 8 App's with Expression Blend

Silverlight Show - Windows 8 Development + Blendability

"Introduction

Expression Blend is a “black unknown tool” for many XAML developers. Many geeks (including myself) tended to say things like “Hey ! I’m happy just coding XAML”, “This is for graphic designers”, “It doesn’t generate clean code”.

In this video article we are going to try to demystify this tool for developers, we will learn some basic features that will show us how we can boost our productivity. As a vehicle to explain the concepts and techniques here exposed we are going to write from scratch the following dummy puzzle app:

Takeaways from this article:

  • How to create your UI using Expression Blend without having to manually code a single line of XAML.
  • How to assign data binding via properties tab (no more typo-bug when adding a binding).
  • How to display sample data to allow you fine tune your layout without having to run the app to check the visual aspect.
  • How to drop controls and customize them (ListView + GridView).
  • How to visually create and customize controls templates.
  • How to assign Converters via properties.

...

image..."

This is a series I need to watch. I've fired up Blend a few times and, well... that's about it. I've been doing allot of WPF dev in the past couple months and doing it badly (well shipping is a feature, right?). Now it's time that I start looking at doing it little better and using the righter tools for the job. Enter Expression Blend...

Wednesday, November 14, 2012

Treat designing your UI designing like your furniture arranging, "Let's try this there... no, maybe there...", i.e. just tying stuff until it feels right...

flow|state - Designing by Making: your process for arranging furniture can point toward a good process for UI design

The last time you had to arrange the furniture in your home — did you create a design first? No. You had a design idea, and then immediately jumped into implementing your idea by moving the sofa and table around until the result felt good.

image
Hmm… let’s try putting this over here…

Consider these attributes of the typical process for arranging furniture:

  1. You do it yourself. If you have enough money, you might tell movers where to put the heavy things first, but you’re still directly involved, and you’ll end up pushing things around yourself before it’s all over.
  2. You work directly with the furniture and the space, without recourse to a single design artifact. Think about it: in the time it would take to create a scale model of a room and the furniture to sufficient accuracy that it could actually inform your decisions, you can finish the task of moving the real furniture into place.
  3. You can never predict whether a layout will completely work until you’ve actually gotten things in place. Once the pieces are in place, you always discover something unexpected. You move your desk so it faces the door, then sit in the desk chair and realize you can’t see the view out the window. So you turn the desk around to face the window, then get a creepy feeling that someone might sneak in the door and creep up behind you without your knowledge. Each layout you try teaches you something.
  4. The process is inherently iterative. You start with an idea, and iterate through various layouts until you converge on an acceptable result (or you’re tired of moving stuff around).

You can design software user interfaces this way too.

...

Today, it is already possible to have a design process built around coding that is as efficient — or, often, more efficient — than a traditional, artifact-heavy, pre-coding design process. What’s more, the tool chain will ultimately improve to the point where designing a user interface will be as fast as arranging furniture. In the time it takes you to say, “Let’s try moving the bookcase over there”, and actually move the bookcase, you’ll be able to say, “Let’s try a tabbed navigation approach”, and actually switch a design to using tabbed navigation. Imagine what it will be like to design software like that."

image

I love that metaphor, it's one even a dev dude like me can articulate... And this is where the beauty of XAML and MVVM can come into play, making it easy to move stuff around until it feels "right." (or more likely getting a friend to help you move/design...  :)

Tuesday, November 06, 2012

Windows 8 Design Handbook - A Design guide that's even Dev safe... :P

Windows 8 Design Handbook

The recent launch of Windows 8 brings a lot of new opportunities for both designers and developers to build beautiful apps that are fun and easy to use. This site is a collection of explanations of the most important aspects of the new Windows 8 design language.

image

image

Windows 8 Design Handbook - Understanding Live Tiles

A live tile is an app's representation on the Windows 8 start screen. It can be updated with new content even when the app isn't running, encouraging users to return to the app. But there are some common mistakes that are made when designing live tiles that you should be aware of.

image

SNAGHTML2996535

Looks like a great design guide for a dev like me.... Look, pictures! lol :)

(via Dan Rigby - Windows 8 Developer Links – 2012-11-06)

Sunday, October 28, 2012

Mohamed tells us a tale about building Storyboard shapes

Automation Planet - Storyboard Shapes Authoring Tool – Visual Studio 2012

In this post I will describe everything about the Storyboard Authoring Tool, so let’s see the Agenda, you can also see the following Step-By-Step video for the whole post :

Agenda

In this post I will try to answer the following questions:

  • What is the Storyboard Authoring Tool?
  • Why use the Storyboard Authoring Tool?
  • How to use Storyboard Authoring Tool?
  • A demo on how to create Storyboard with and without Storyboard Authoring Tool.

...

image

image

image..."

I using the Visual Studio 2012 Storyboard feature for the first time this past week and I'm sold. I had to laugh when my customer/user  thought it was a snap shot of a working app. From first run to having a cool looking series of screens was hours and most of that was solid creation time (and not tool learning time). It's simple, easy and lets you draw out nice looking prototype screens in no time. And we're talking screens for Desktop apps, web, phones, etc.

Shapes are the key in this process. And while there are a number of them already in the Visual Studio Gallery for Storyboard Shapes, creating our own is a logical next step. Mohamed's post provides you some great info on doing just that...

 

Related Past Post XRef:
Microsoft does iOS/iPad/iPhone! - Shapes in the Storyboard Gallery that is...
Let me tell you a story about the first community submitted Storyboard Shapes...

Tuesday, October 16, 2012

Is "Microsoft Design Style" is the new Metro/Modern UI/Whatever design style name?

Infragistics - Brent's Bytes - Microsoft Design Style - The real new name

"... I'm happy to note today though that the speculation can come to an end. 

Microsoft Design Style - the real new "Metro"

I have confirmation from Microsoft employees very close to the matter that "Microsoft Design Style" is the term that should be used to refer to the design style used on Xbox, Microsoft.com, Zune, Windows Phone, and Windows 8.  The distinction here is that this describes the whole design style much in the same way "Metro" did previously.  When referring specifically to the Windows 8 ecosystem, we can say we are building "Windows Store Apps" using the "new Windows UI" which was developed using the "Microsoft Design Style."  Where I might have said "Metro Design Principles" before, I can translate that to "Microsoft Design Principles."

I will be using this term going forward as well as updating references in my Windows 8 design series and book."

Can I just say I wish Microsoft had fought to keep the Metro name (Or bought the rights, etc)? I hate this name confusion... But at least now we HAVE a name for the design style formally known as Metro. Right?

Friday, October 12, 2012

10 Tips to avoid the typical Windows 8 design traps

.net magazine - 10 things you should know about designing for Windows 8

The launch of Windows 8 on 26 October will provide an exciting new platform for designers and developers. Brent Schooley introduces the key things you need to know to start creating Windows 8 applications

Microsoft caused a stir in the design industry with the release of Windows Phone. With its Bauhaus-inspired minimalism, strong focus on typography and use of subtle but impactful motion design, Windows Phone showed that there is definitely room for innovation in the mobile space.

Windows 8, due for release on 26 October, brings the same design goals and ideals to the desktop and tablet market. Given the focus on creating beautifully functional applications – not to mention a much larger potential market than iOS – this is definitely a platform designers should get involved with.

In this introductory guide to the subject, I’ve come up with 10 things you should know about designing for Windows 8.

  1. The market for Windows 8 apps will be huge
  2. Developers need designers for Windows 8
  3. Take inspiration from Windows 8’s design roots
  4. Content before chrome
  5. Typography is king
  6. Design for touch
  7. Photography makes your app stand out
  8. Charms bar and contracts
  9. Use subtle animations
  10. Design a good Live Tile

...

SNAGHTML9e9b1f6

SNAGHTML9e94438..."

As a Dev I don't think about design near enough. Design? Typography? Photo's? meh... Or so I though until I read this post (and seeing some of the app's already in the Win8 store... lots of "meh" already there). If you want to stand out, to provide a truly professional Windows 8 App, you have to also think design. Doesn't mater how cool the code is if it's presented fugly...

Thursday, September 13, 2012

Microsoft does iOS/iPad/iPhone! - Shapes in the Storyboard Gallery that is...

Brian Harry's blog - iOS, iPhone & iPad storyboarding

"So much happened yesterday I’m still trying to catch up on writing about it.

Yesterday we release three new sets of storyboarding shapes on the Visual Studio Gallery.

Common iOS Icons

image

iPhone controls

image

iPad controls

image

These shape libraries are designed to be used with the Storyboarding tools in VS 2012 Premium, Ultimate and Test Professional products.  I hope you enjoy using them.

Visual Studio Gallery

image

Kind of interesting and I think cool that these shapes are from Microsoft itself, not a third party.