Monthly Archives: June 2015

Website Design Rapid Prototyping Using Sketchflow

Back in the mid 90s rapid prototyping was considered a bad idea. The primary reason for this belief was that prototyping tools were so complex back then that they needed to be operated by developers. Therefore, the design process tended to be influenced by all design work had to be interpreted through the eyes of what a prototyper could actually achieve.

In 2010 there’s been a rethinking of prototyping. A lot of new prototyping tools have appeared over the past few years and they’re quickly being adopted by interaction designers.

Two things have changed to bring prototyping tools back into favor: The task they’re being used to accomplish and the tools themselves.

  • The prototyping tools of today are much more designer friendly. The adoption of user interface markup languages, such as MXML, XAML, and HTML, have made our ability to build and run more sophisticated software today has made it easier to create design tools that work for designers, as opposed to developers.
  • During this same time, the nature of what is being designed has changed. As we move away from designs that are a series of relatively static pages or screens, to designing applications that use fewer dynamic pages, it becomes harder to prototype these experiences using the traditional tools of diagramming applications and paper prototyping.

So we have perfect conditions for a new wave of prototyping tools: Increasing capability and rising demand.

Microsoft’s Contribution: Expression Blend SketchFlow

Among the new breed of prototyping tools there is Microsoft’s Expression Blend SketchFlow. SketchFlow takes a rather unique approach to prototyping.

Expression Studio

SketchFlow is part of Microsoft’s Expression Studio range of design tools. Following a rather lackluster history with design tools, Microsoft finally seems to be getting their act together with Expression Studio. Expression Studio is on its third release and comprises 4 or 5 products depending on how you count them:

  • Expression Blend: For building user interfaces for Surface, Windows, and Silverlight.
  • Expression Blend: SketchFlow; For prototyping user interfaces.
  • Expression Web: For building user interfaces for web standards.
  • Expression Design: For creating graphic assets for Surface, Windows, Silverlight and the Web.
  • Expression Encoder: For preparing video assets for Surface, Windows, Silverlight, and the Web.

Once you have the idea of the screen flow, you may want to go through and add descriptions of what will be on each one. You can then run the prototype and get a feel for how the application works, even though there’s no user interface yet.

Normally when you are prototyping a user interface, you want to avoid suggesting the final graphical treatment until you have the interaction model and information architecture model correct. As a result, you should build a wire frame user interface that is minimally graphic and just show how users will interact and navigate with the application. For this reason, SketchFlow provides a set of sketch styles, which contain all of the usual controls that have been restyled to have a sketch like appearance.

What’s interesting about these sketch styles is that they’re full controls that have been reskinned. This has two important consequences:

  • You can access all the capabilities of the native control.
  • You can change the styles of the controls as your prototype evolves.

Sketching Up Your Portfolio User Interface

The next step is to draw up the screens of our prototype. It’s basically a case of selecting the right Sketch Style controls and placing them in the screens on the Artboard.

For example, I used the following for the main portfolio screen:

  • A Sketch Button
  • A hand drawn Back arrow
  • A Sketch Title
  • A Sketch Subtitle
  • A Sketch Listbox
  • Another Sketch Subtitle
  • A Sketch Textblock
  • A normal image element
  • Another Sketch Button

Wiring up the Navigation

All you need to do is right click on the elements that will serve as navigation between screens, select Navigate to, and then select the screen the element should link to. You can also select Forward or Back.

Running the Prototype

To try out the prototype, simply press F5. The project builds, a test web server is spun up, and our prototype launches in a browser. The SketchFlow prototype includes your functional screens, as well as navigation and other tools on the left side. These tools help you navigate your prototype, as well as allowing the users to provide feedback. So as it turns out it wasn’t really necessary to set up the navigation in the beginning. For each screen of your prototype, the Navigation panel shows which screens that screen leads to, based on the connections you made in the SketchFlow Map. You simply move through your screens using the list on the left. You’re simply importing a set of paper sketches for your prototype. For example, you’d probably just start with this option, and add in your functional navigation later.

The SketchFlow Killer Feature: Feedback

  • Sketchflow handles feedback exceptionally. Regardless if you’re working in WPF or Silverlight, you can package up your prototype and distribute it for review by users, project members, and stakeholders. With Silverlight, SketchFlow creates a Silverlight website that you can host or distribute yourself, in which case you can just send a link to the reviewers.
  • When viewing your prototype, the reviewers are able to draw on individual screens with their mouse, in addition to typing in comments. The reviewers then simply export their feedback into a file they send back to you. You then load the files back into Expression Blend and review the feedback, overlaid on top of your original screens. In addition you’re able to give the reviewers access to the annotations that you’ve made within the screens as you built the prototype.

Feedback is one of the best features of SketchFlow. As well as for stakeholder reviews, you can also use it for internal reviews with your colleagues. When you conduct walk throughs of the prototypes, you can annotate the screens with changes that you wish to make. This becomes a live to do list, which can then be loaded back into Blend. Screens with feedback are marked with a light bulb icon in the SketchFlow Map.

After you’ve prototyped the functions of the user interface, you can also use your SketchFlow prototype for usability testing. SketchFlow permits you to run the prototype with the Feedback and Navigation panels hidden.

Another SketchFlow feature that needs to be highlighted is the component screens. These screens are the way that Sketchflow provides a prototyping feature that is essential: Permitting components in common to be defined once and reused across multiple screens.

Using SketchFlow, you can select any group of elements, right click them and select Make into Component Screen. Component screens are then shown separately on the SketchFlow Map, and they can be dragged onto any other screen.

One frequent use for component screens is to make navigation controls that are common to many screens. In the case of this example, the relatively simple navigation controls have been made into a component screen. That way the same navigation on every screen of my portfolio is included. One of the great features of component screens is that they don’t simply contain layout information, they can also embody behavior. Therefore, you can set the action of your navigation buttons once in the component screen, and know that the navigation will work on every screen that you include it in.

Alternate States

Another powerful feature in Expression Blend is visual states. Visual states allow you to define alternate states for individual elements, such as component screens, or your whole screen. The powerful part of this is that you can define different sets of states for the one element. So, for example, a button could have 3 different state groups: One for not focused and focused, one for non mouseover and mouseover, and one for disabled and enabled. That way you can combine the states that are necessary to create some powerful effects.

In this portfolio example, there are 3 visual states for my Navigation component screen:

  • BackOnly
  • BackOff
  • PortfolioOff

For each of the navigation’s 3 visual states, the visibility of the navigation items have been changed accordingly. All you need now is a way for each screen to tell its navigation component screen which visual state it should use. For that you’ll need behaviors.

Behaviors

Behaviors were introduced with Blend 3. They provide an easy way to add the basic interactive features to screens without having to code them. Like any other element, these behaviors are added to screens by selecting them from the Assets panel. You can use behavior to change the appearance of your Navigation component screen for each screen on the prototype. The behavior you need to use is named GoToStateAction. On each screen, drag GoToStateAction onto the Navigation control. The behavior will then appear in the Objects and Timeline panel nested under the Navigation control. You can then choose the behavior and set the trigger to the component’s loaded event and then select the desired visual state.

Prototyping Power with SketchFlow

SketchFlow is a particularly powerful tool. Because it’s built on Expression Blend and .NET, it gives you access to a wide range of functionality, allowing you to take your prototype much closer to production, if you wish. It also means that you can go a long way before you hit the limits of what the tool is able to do.

Of course, all those features mean that SketchFlow can be a bit overwhelming at first. Fortunately there’s more help available on the Web, in the form of articles, tutorials, blogs, and videos, so starting off is easier now than it was when Blend first appeared.

What Makes For an Excellent Website Design

The goal of website design is to create a unique and captivating atmosphere that facilitates a visitor’s prolonged stay on a given page. Sites that do not properly brand themselves and clearly present information about their products and services through the layout of their site will maintain a lower volume of visitors than those whom have put effort into the formatting of their site. For example, Mama’s Java in Seattle has signature coffees but no signature website design. A simple and bland website not only doesn’t attract clients, it doesn’t keep existing clients interested or invite referrals. Coffeehouses like a Mama’s Java have to differentiate themselves from the multitude of other coffeehouses and websites in the Seattle area. Just as the creation of a company takes planning and foresight; an excellent website design requires the same level of planning and attention to detail. Following these four basic steps can help you begin and complete the web design process for an excellent website design:

Step 1: Don’t Fail to Plan
A perfect cup of coffee requires the right beans, coffeemaker, a barista to complete the sale. The first step in creating an excellent website design is: planning. Before Mama’s Java could open their doors, they had to plan their business’s image by choosing coffee types, equipment, employees, and their public image. Customers walking by instantly knew what Mama’s Java offered because they planned before creating a logo or advertising so the image was consistent, strong, and represented the company in the best possible light.

Before you begin creating your website design, you need to start by planning out the online image you want portray. When customers search, they will come across your well-designed website just as the right storefront functions.

Step 2: At the Design Table
Once you have decided on your focus and audience, you can start with the actual design process. Again, planning is crucial. Will you design the website or do you need someone to do it for you? Even if you have help from an outside web designer, you need to discuss the colors, layout, and function of the pages.

Basic determinations you need to make for website design include the colors, layout, font families, and font sizes for the website. For Mama’s Java in Seattle, these details might include brown or sepia tones to reflect their coffee influence with stylized fonts that echo their logo print type. Picking colors and fonts that are easy to read and interesting will keep your visitors reading and seeking out information which in turn, leads them to your product or services.

Step 3: The Design Plan and Development
As you begin creating the actual design of your website, planning is key again. Finding or creating content for your website is crucial. While you may not have all the articles or copy written before you begin your web design, you should have a good idea of what content you want on the site and where you want the articles, headers, and general content to be on the site.

Coding is very important as you begin your web design. Determining what format you will create is important as the technical aspects of website design like coding keep the site running and updated. The best website content won’t attract or retain visitors if the technical side of things isn’t running correctly.

Step 4: Content is Key
Search queries are often what lead potential clients to your website. The content on your side has to be geared to put your site at the top of search queries looking for the latest, newest, and original content. Deciding what content you want to offer to your clients is something you need to examine. You can either write or purchase content to best address those needs and search engine optimization requirements.

After you have created or planned your content, you need to make a simple sitemap that makes your site easily navigated by visitors. The best content in the world won’t benefit your company if it is buried in the website with a multitude of click-through pages.

By examining these simple steps as you design your website, you have the basis for the creation of an excellent website. In turn, like Mama’s Java of Seattle, you can better drive your business and serve your clients online.

What to do and What NOT to do in Website Design

The World Wide Web’s cyber strands stretch north, south, east, and west around the world wrapping over, under, and around the earth connecting websites like cobwebs connect abandoned corners of a room. Like its earthbound cousin, The World Wide Web is alive with spiders, word-spiders that are. These talented little arachnids ‘crawl’ the web’s cyber-strands on command every time someone orders a search.

Let’s say that you’ve decided to create a website. There’s never been a better time than now to find out how to put those talented little arachnids to work driving traffic to your site. Let’s find out what makes them crawl and how you can use them to attract internet traffic to your site.

When you first began designing your site for the internet you need lessons on keywords. That’s when you will discover that keywords are the search engine bait a website uses to get notices by websites around the globe. We’ve been hearing about keywords for years, but has anyone actually described what they are, where you can find them, and how they work? That lesson showed how keywords work and how to make them work for your website design clients.

Your number one focus before you begin creating your website, during the creation, even afterwards, will be keywords. They tell search engines what to look for when we surf the web, and let searchers link to your site when they search for your keywords.

Let’s explore keyword usage with a mock website. First decide what your website will be about. Why did you create your site, was it to sell a product or service or maybe create a cyber-mall for one-stop-shopping?
Now assume for the purpose of this discussion that your site will combine a couple of services to create a small cyber-mall in Seattle. Many people will resort to templates or easy-to-use websites that allow you to create your own site. While this may work for some people, the vast majority will need a site that is tailored to fit their needs. But, thanks to those sites you would not need any programming knowledge but that might hinder you as well.

What you need to do, in addition to getting a domain name, is find a web host. Web host provides the support you will need to build your site and every site must be hosted somewhere. The web host will give you email addresses, space for all of your website pages as well as other features. Many people will look to a third party company with help in creating their website design.

You need to create you web pages. If you know HTML or would like to learn HTML you can but if you do not want to deal with the hassle you could find a website design company online. For most people this is the best option. What you don’t want to do in website design is go into it with out a plan of action.

As an example, you decide to build a site to offer your neighbors the convenience of shopping for Seattle’s best personal and home services online. The key to increasing the traffic to your site will be the number of keywords you include as you build your site.

Who will visit your new site? Imagine going online to find the services your new website advertises. Which words would you use? Eldercare? Childcare? Babysitting? Lawn care? Yard Maintenance? Viola! Every one of these is a keyword for your site! Bonus! You’ve got your page titles too!

Say your site has six pages. Use the keywords we found above (Child care, Babysitting, Lawn Care, and Elder Care) in the navigation bar on each page and all of the keywords on your home page. Use all of your keywords on your home page. It’s the first thing your visitors see when your site comes up. Your visitors will use your home page to see what your site is about. Sprinkle your keywords throughout the copy to give search engines more keywords to work with.

Use keywords in the page titles and use the page titles on your navigation bar. Pepper them through the copy on every webpage. Make it easy for the spiders choose your site. That’s how you get on the search results first page and get your information in visitors’ hands in an instant. What a great incentive for visitors to come back to your site the next time they need child or elder care or lawn care services.

In the website we outlined above, you created a home page with links to your childcare and eldercare pages, and yet another to your lawn care page. You’ll also want an About Us page for bios and testimonials, and another (Contact Us) giving all the ways visitors can order your services, ask questions, or heaven forbid, complain.

If your website is six pages, you’ve used five keywords in the titles (5), another five in the navigation bar (multiplied by six since the navigation bar is on all six pages) (30). Now add an average of six keywords per page (36) giving us a total of 71 invitations to search engines to pick up on your site and put you on their first page.

The Basics of Great Website Designs

Imagine getting excited about starting a new web design project, only to find yourself staring at a blank piece of paper or white Photoshop canvas. Design mental blocks are not uncommon, but here are some basic principles that will surely help provide some inspiration, ideas and get you out of your rut.

Client Feedback

By far the most important factor in all web design projects. While you may have a great idea for a design, remember that a lot of it is subjective. Gather critical input from your client before starting anything! Here are some typical questions I like to ask all my clients.

  • What does the company represent?
  • What goods or services does the company offer?
  • Does the company have an existing logo or branding identity?
  • What is the overall goal for the website?
  • List out some competitor sites and discuss what works for them.
  • Any design style or color preferences?
  • What is the company’s desired target audience and demographics?

With this preliminary information in hand, you will be able to conjure up some design magic and develop several preliminary layout sketches that is in line with your client’s expectations.

 

Defining Good and Bad Web Design

The most important element that makes or breaks a website is communication. You don’t want a website that “works” but looks terrible, or doesn’t fit with your client’s branding identity. Nor do you want to design a website that looks fantastic, but is so inaccessible that visitors cannot decipher how to navigate to an interior page.

You should always strive to create a nice balance, so that your users find the design pleasing, but are interested in the content at the same time. The main navigation menu should always be clearly visible on the web page, and each link/tab should have a descriptive title. Having menu buttons that changes appearance, as well as indicate which active page/section helps your visitors get a bearing on where they are and how to further proceed deeper into the website as a whole. Breadcrumbs (e.g. Home > Products > Web Design Books) are also a great way to indicate the current architecture.

 

Overall Website Design Cohesiveness
Always try to keep an underlying theme on all pages, even if the scope of work requires some pages to be dramatically different. By doing so, you help tie in and hold the design of the overall website together.

 

Keep It Simple

Most websites have very similar structures. Logos on the top left, menus horizontally or in a left column and content as the focal point of the web page. Although there are many different ways to organize the various elements, only a few arrangements are intuitive. Keeping the web page anatomy simple and intuitive is a no-brainer.

 

Whitespace

Whitespace (or negative space) refers to any section of a design that’s not filled in by type or images. Many novice web designers and some clients often feel a need to fill every inch of a web page with images or content. What they don’t realize is that having whitespace on a page is just as critical as having content. Without this whitespace, the overall design will feel crowded and unbalanced. The visitor will not know what to focus on. Negative space helps a design “breathe”.

 

The Golden Ratio and Balance

Classic design patterns such as the golden ratio (divine proportion) help create layouts that are considered to be aesthetically pleasing. The Renaissance artists exclusively used the divine proportion to design their sculpture, architecture and paintings. So it stands to reason that by following this basic and logical principle, we have the basic guidelines for designing appealing layouts.

Always keep an eye out for the overall balance of your design. Don’t load up one column with content and leave the neighboring column relatively empty. Make sure the elements on either side of a layout are of balanced in a logical manner.

 

Unity

A unified design layout is one that works as a whole rather than being identified as separate individual components. The different elements of a design should interact with one another in a unified manner so the overall design looks planned and organized.

 

Screen Resolution

At the time of writing this article, the preferred fixed width layout is for monitors of the 1024 x 768 setting. What this means, is that you should try to keep your layout width to no more than 950 pixels wide. There is nothing more annoying than having to scroll left and right when viewing a website.