Archive for Data Management

Designing responsive sites for today’s multiple screens is just part of the workaday challenge. Viewing and testing the web content on actual devices is another often time-consuming, repetitive—yet totally necessary—struggle. The new Device Preview feature in Dreamweaver CC 2015 eliminates the struggle by providing direct, real-time mirroring to available devices.

How much of a change is this? Here’s my old workflow for previewing my Dreamweaver pages on my iPhone:

  1. Set up a testing server.
  2. Put page and all dependent files and assets on the server.
  3. Open Safari on my phone.
  4. Browse to the testing server web address.
  5. Review page and note biggest problem.
  6. In Dreamweaver, make a change to the CSS to address the issue.
  7. Save the page.
  8. Re-put the files.
  9. Refresh the mobile browser.
  10. Review page again.
  11. If problem not fixed, go to step 6; if it is, move on to next issue and return to step 6.

Here’s my current Dreamweaver CC 2015 workflow:

  1. Open Device Preview.
  2. Connect to phone.
  3. Review page for problems.
  4. Make necessary changes in Dreamweaver.
  5. View updated page on phone
  6. Go to step 4 to make any additional modifications.

With the Device Preview feature (and other enhancements I’ll note in this post), my testing process is literally half as many steps and easily 3 to 4 times as fast as before. What will I do with all this free time? Let me show you how it all works so you can add “too much free time” to your list of complaints.

Connecting to Device Preview

First, you want to make sure that any device you want to work with is on the same network as your main system. Since I routinely set my phone and tablet to use my in-house Wi-Fi, I’m good to go. Next, click the Device Preview icon preview icon, located on the right side of the Dreamweaver status bar to pop-up the interface.

dp-1

 

The Device Preview UI is small but packs a lot of power by displaying the two methods for connecting any network-shared screen: QR code or URL.

  • To use the QR code, scan the code with any QR code reader app on your device.
  • To use the URL, enter the web address in your mobile browser or copy and paste it via a synced app such as iOS Notes. Click the file icon to the right of the Device Preview URL to copy the string to the clipboard.

Device Preview relies on an Adobe Creative Cloud service for pairing, so the first time you enable a device you’ll need to log in to your account if you’re not already. Once you’re in, your Dreamweaver page will appear on your device and the Device Preview pop-up displays a list of any connections. Hover over the device name and an informational screen is rendered on the device, showing the user agent (a.k.a. the browser or app) and other info including the extremely useful viewport size, exactly the width and height you’re dealing with.

dp-3

Inspecting devices

Initially, you’ll want to simply review the web content on your device screen to ensure that all of your responsive changes are as expected. Inevitably, you’ll encounter things that aren’t as they should be. The usual strategy is to hone in on the problem areas as the first step toward identifying which page element needs to be adjusted, either in the source code or CSS. Device Preview makes this process slickly straight-forward by fully mirroring Dreamweaver’s Inspect mode:

dp-4

  1. In Dreamweaver, click the Inspect Mode icon or choose View > Inspect.
    When you then hover over a page element, the box model parameters (width, border, margin and padding) are outlined in the Document Window.
  2. The same outlines are rendered on the device screen.

dp-5

Because you can easily see the margin (in orange) and padding (blue), you can quickly assess whether adjusting those values in the CSS will have the desired effect.

Inspect mode is reflected on all connected devices, so you can review the screens concurrently. When you’re ready to focus on one screen, click the Inspect icon adjacent to the specific device listing in the Device Preview UI. This will also have the effect of snapping Dreamweaver’s document window to the same width as the device screen; I’ve found this particularly useful when switching between portrait and landscape orientations.

dp-6

Previewing modifications

To my mind, actually making changes is where the connectivity now afforded by Device Preview really shines. Any modifications you make on the Dreamweaver side take effect immediately on the connected screen. Let’s look at a couple of examples.

Updating text:

  1. In Dreamweaver, make sure you have saved your source and dependent CSS files and then double-click a text element in Live View to enter into Edit mode.
  2. Make any desired changes, like switching h2 content from “Adventures in repair” to “Adventures in repairing”.
  3. Click outside of the editable area to commit your update.
  4. The modified text is displayed on the connected device.

dp-7

Changing CSS:

  1. Select an element in Live View to modify.
  2. In the CSS Designer panel, switch to Current mode, if necessary.
  3. With the desired selector chosen, update the CSS properties, such as changing the color of an h3 heading.
  4. Press Enter/Return or click anywhere outside of the property value to confirm the change.
  5. Both Dreamweaver and the device screen render the modified page.

dp-8

It’s just as easy to work with Device Preview and multiple pages as it is a single page. Simply use the Follow Links choice under Live View Options to either Ctrl/Cmd-click or continuously click any link in your document; once the page is displayed in the document window, it will appear on the screen of any connected devices.

With the robust Device Preview feature in Dreamweaver CC 2015, your responsive pages will be ready for any design challenge, on any size screen.

Comments (0)

We all need to get a little inspiration from somewhere. Designers are constantly working to create work that is unique to them, but there’s no denying that outside influences sometimes sneak in. In fact, these influences often set one designer apart from another, helping them to define their own personal style. We caught up with a few of the designers behind some of today’s hottest sites to find out more about the people and things that influence them.

Jan Cavan Boulas, Designer, Automattic/WordPress.com

jan-cavan-boulas

There are several designers that I admire – Trent Walton, Frank Chimero, Michael Heald of Fully Illustrated who’s work never ceases to blow me away, but my dad is probably my biggest influence as he’s the one who got me into art and design. He’s an amazing illustrator and growing up, I remember just sitting right next to him to watch him draw. He also dabbled in lettering a bit and it was always amazing how his final work looked like they came right out of the printer! It always looked so effortless and natural to him. I feel fortunate that he’d somehow passed on the creative the gene to me.

Rob Hampson, Designer, We Make Awesome Sh

robhampson-author-photo

I’m influenced by two polar opposite design approaches. First, an approach that is incredibly considered and functional where design is neutral and restrained. Dieter Rams is a huge influence here with his “less is better” philosophy. Second, I like experimental design that breaks rules. Functionality isn’t a priority and frequently this approach blurs the boundaries between art and design. Rafaël Rozendaal and Ryder Ripps are big influences here, especially in the web scene.

Vitaly Friedman, Editor-In-Chief, Smashing Magazine

vitaly-photo4

To be honest, when I think about this question, I don’t have a person in mind but rather a style or art direction — I’m actively seeking interesting examples of original, innovative layouts and user interfaces, and I love exploring lettering and type in older, dusty printed books, and I love weird geometric shapes and retro-futuristic patterns. I guess, to some degree, these quirky patterns and styles are my biggest design influence.

Brad Birdsall, Head of Design, Medium.com

brad-medium

Over the last couple years, it has come from the people around me. Everyday I’m impressed at how talented and thoughtful the team is at Medium. Whether it be the design team, Ev [Williams, CEO, Medium], and even design-minded engineers, this team inspires regularly. We work hard, push each other, and have a lot of fun along the way!

What or who influences or inspires you? Tell us in the comments below.

Comments (0)
Jul
24

User Testing your Paper Prototypes

Posted by: | Comments (0)

Understand your Prototype

Before running off to make a series of drawings and sketches, take time to understand your prototype and how it supports your design work. A prototype is not a substitute for your design. A prototype is a small portion or representation of your design solution. It is there to help you test various aspects of the user interaction. It is not meant not to show the user the final look or feel of the product. When testing a prototype remember to be “clear first, clever second” with your UI design and  presentation.

 

User Real Data, Avoid Lorem Ipsum

In my previous article on sketching and prototyping, I discussed why possible design solutions can only be estimated if you’re using a placeholder. Real content needs to be provided to give users context. This holds especially true when testing a prototype. It is necessary for the user to have context to fully understand the nature of a (web) page (is it authoritative content, does it require user input, and what type of input?) and the type of tasks that can be performed. Without context, the user can only guess how to complete tasks and the prototype may give them the wrong impression of how the site or application is meant to work.

Avoid generic labels and categorization. Having several boxes labeled “product” will not produce the same testing outcomes as when using informative labels. What are the products that will actually be displayed? Users can become easily distracted by placeholders when they’re trying to interpret or understand the context or meaning of the page layout.

designer presenting website development wireframe

Wrenches are a great example. If you say “wrench” to someone, they will visualize an image of wrench that arises from their previous experiences and knowledge. For example, when someone says “wrench” to me, I often think of the game piece from the mystery game, Clue. There are, however, several other types of wrenches that may come to someone’s mind, for example: Box-end Wrench, Open-end Wrench, Combination Wrench, Adjustable Wrench, Socket Wrench,  Allen Wrench,  Spanner Wrench, Torque Wrench, Pipe Wrench. If you use one of these specific types of wrenches rather than using a generic wrench placeholder, they will provide a much stronger context to users, even if they don’t know the uses of the different types of wrenches.

wrenches

Be Mindful of Users’ Expectations

Before starting any testing session, explain the prototype to users so that they can understand what they will be experiencing. Users’ expectations can create bias when interacting with your prototype that may not be indicative of how they would use the final product. Be aware that users may not be fully honest during testing and most likely temper their feedback. Look for cues during testing that user are “holding back” such as  long pauses before providing answers, deep sighs or facial expressions masking their confusion or frustration.

By introducing the prototype at various stages you can do quick user testing with low fidelity prototypes; with each subsequent round of testing you can increase the fidelity from low, to medium, to high. Test on yourself first, especially when trying to implement a new approach to complex interactions.

Woman holding and touching on modern mobile smartphone with login form on a screen.

Keep in mind that your paper prototype will not be able to show users some contextual and tactile interactions. These include page load times and image loading. Show users the need to scroll vertically or interact with horizontal pagination. Visual cues and animations are difficult to mimic or present on paper. Paper prototypes are best used to test a specific part of your design.

Set Tasks, Set Goals

Regardless of fidelity, it is important to approach each testing session with clearly defined tasks and measurable goals. Make sure the prototype supports those tasks. Tasks can be anything from identifying the login or placing a product into a shopping cart. Run through your prototype several times to identify potential pitfalls and and dead ends in functionality that can get the user lost or stuck in an area of the prototype that will require you to intervene or reset the testing scenario. Define the one metric you will be testing to ensure consistency and measurable results.

hand and smartphone with password code in screen

Note feedback on simple friction points like confusing labels or size and position of buttons and links and assess their effect on the interaction and interface. The user will often navigate and interact with interfaces by what Steven Krug refers to as “muddling” and “satisficing.” These two concepts will reveal if paths were used the way they were intended (or not). Did users have a preferred path and which paths went unused? Remember, “users don’t read pages, they scan them.”

Be Open-Ended

Use a participatory design approach to give users a chance to articulate their feedback on the design solution. Users may not be able to fully articulate their expectations or thoughts on the interactions and interface, so give them the opportunity to sketch. Provide the users with blank sheets of paper to enable them to sketch out their solution and their sketches will provide the designers with a hard copy of the users’ feedback.

website wireframe

Benefits of Paper Prototyping

In addition to being a quick and easy way to iterate designs, paper prototyping is an interdisciplinary activity that encourages input from team members. A prototype can help identify a range of problems within the interface and can also address issues with layout, content labels and button placement. For your next design project, remember to “test early, test often.”

Comments (0)

Learn how to use Dreamweaver’s Resizable Live View to arrange and edit content

Dreamweaver’s Live View does double duty as both a live preview of an open page and a live edit mode. It is no longer necessary to switch between Design and Live Views to edit and preview page elements. This tutorial will explore a few of the Live View tools: the Visual Media Queries bar, the Live View Scrubber, the DOM panel, and Device preview.

What do I need?

Download the following files: botswana.zip

 

STEP 1 OF 7

Show and hide New Feature Guides

Download the botswana folder, then extract the files.

Create a new website in Dreamweaver called Botswana with your new botswana folder set as the local site folder.

Open the file index.html from your botswana folder. This file is a page created with a Dreamweaver starter template. One new image was added to the header. The rest of the content is the original placeholder text.

Dreamweaver 15 introduces many exciting new tools available with the revamped Live View, including the Visual Media Queries Bar, the Live View Scrubber, and Device Preview. When you first open Dreamweaver after a new install, then open or create a new page, several Live View displays called New Feature Guides appear. Select one of the displays to read more information about that feature.

Select the Close button (X) in the top right corner of the display to close the window after you read the information. After you close a New Feature Display, it will not appear again unless you select Help > Reset New Feature Guides on the Menu bar, close Dreamweaver, then re-launch it.

botswana 1

STEP 2 OF 7

Preview a page with the Visual Media Queries (VMQ) bar

The Visual Media Queries bar is a tool for checking your page design against multiple media sizes. The Visual Media Queries bar is under the Document toolbar. It visually represents the media sizes defined in the styles used to format the page. Colored bars placed in three horizontal rows show the maximum and/or minimum widths of each media query. A green bar represents a media query with a max-width condition. A blue bar represents a media query with both max-width and min-width conditions. A purple bar represents a media query with a min-width condition. Each size uses breakpoints, referring to the position a page content will “break” or be forced to realign content to a different page width. You can chose to hide or show the Visual Media Queries bar by selecting the Hide/Show button on the right side of the Document toolbar.

botswana 2

Select one of the media queries on the Visual Media Queries bar and note how the page resizes to fit the width of the selected size.

botswana 3

botswana 4

 

STEP 3 OF 7

Use the Live View Scrubber to view a page in Live View using several page widths

The Live View Scrubber is a tool used to view an open page in graduated widths. As you slowly drag the Scrubber from the right edge of the page to the center of the page, you see the page width decrease. An indicator on the Visual Media Queries bar shows you the relationship between the position of the Scrubber and the pixel width of the page. As you slide across a breakpoint, the page elements reposition themselves responsive to that page width. You can also simply select a Media Query on the Visual Media Queries bar to quickly change the page width with the selected Media Query.

botswana 5

botswana 6

 

STEP 4 OF 7

Modify the default breakpoint settings in the Visual Media Queries Bar

The default minimum and maximum widths for the media queries on the Visual Media Queries bar can be easily adjusted to fit a particular page design. To adjust a media query, use the handles on the right or left side of a media query. If a media query only has a maximum width setting, you will only see one handle on the right side of the media query. If a media query only has a minimum width setting, you will only see one handle on the left side of a media query. A media query with both a minimum and maximum width setting will have a handle on each side.

botswana 7

To change a breakpoint for a media query, slide the corresponding handle toward the center of the media query, then release the handle when you reach the desired setting.

botswana 8

After a brief pause, you will see a message that all media queries with the same breakpoint were updated. The open page in Live View will adjust to the new setting.

botswana 9

 

STEP 5 OF 7

Hide an HTML element

It is common during the design process to experiment with your page layout by adding, modifying, or deleting HTML page elements. One non-destructive way to see how a page will look without an HTML element is to temporarily hide the element, then view the page without it.

Scroll to the top of the index page if necessary, then select the banner image. Right-click the image, then select Hide element in the shortcut menu.

botswana 10

The banner image will then be removed from the index page in Live View. To show the banner image again, right-click the page, then select Mange Hidden Elements from the shortcut menu.

botswana 11

When you select Manage Hidden elements, the hidden HTML element will be displayed again, but with a checked overlay, indicating that it is hidden. When an HTML element is hidden, it will not appear when previewed in Mozilla Firefox or Internet Explorer, but will still appear in Google Chrome and Safari.

botswana 12

Right-click the hidden element, then select Unhide Element to display the HTML element again on the page. You can also unhide the hidden element by selecting the Unhide Element icon under the bottom-right corner of the element.

botswana 13

 

botswana 14

 

STEP 6 OF 7

Use the DOM panel to position page elements

bodyThe DOM panel contains a tree-structure representation of an open page’s DOM (Document Object Model) structure. Each HTML tag is represented by a symbol labeled with the tag name, such as body.

Nested tags are represented with stacked symbols.head

You can rearrange page content directly from the DOM panel by dragging a tag symbol into a different position in the tree structure. You can also copy, paste, paste as child, duplicate, and delete page elements in the DOM panel.

Select the DOM panel to expand or float it.

Select a stacked symbol to expand it and note the nested tags inside it.

Select an HTML element on the page, then note that the corresponding element tag is selected in the DOM panel.

botswana 15

Select the header tag, then expand all of its nested tags so your screen looks like the panel below:

botswana 16

Drag the img element down until it is under the stacked p element, then drop it when you see the green line.

botswana 17

Dragging the banner image tag in the DOM panel rearranged it on the page to change places with the div tag that was previously under the banner image. Now the banner is under the text in the div tag.

botswana 18

STEP 7 OF 7

Preview a page on a mobile device with Device Preview

Device Preview is a new feature with Dreamweaver 15. Device Preview is an easy way to preview a page on the actual device you are testing, rather than using a simulated size within Dreamweaver or manipulating the page size in a browser window. This is an extremely cool feature! All devices you are testing must be on the same network that Dreamweaver is using for the feature to work correctly.

Select Device Preview on the right side of the Status bar, then after the QR code displays for the index page, scan the QR code with your mobile device with an app such as Microsoft Tag. The index page will scan into your mobile device so you can see how it looks live on a mobile device.

botswana 19

The page below was previewed on an iPhone6 Plus. Give the display a few seconds to completely download, then scroll down to see how the rest of the page elements fit in the display size.

botswana 20.jpg

 

Wrap up

This tutorial introduced some of the new Live View options New Feature Guides. We began by learning about how to view their information, turn them off, and turn them on again. Next, we explored the power of the new Visual Media Queries (VMQ) bar. We learned how to view a page using different media queries, modify a media query’s breakpoint settings, and use the Live View Scrubber to view a page as it crosses breakpoints in media queries.

Next, we learned how to hide and unhide an HTML element on a page, used the DOM panel to rearrange page elements, then we previewed the modified page with Device Preview.

As you work, it is important to view the work in progress using tools as the Window size menu, the Visual Queries bar, and the Device Preview.

Comments (0)
Jul
20

Navigation Design 101

Posted by: | Comments (0)

“Wait, so what am I supposed to do here exactly?!” – is the last thing you want your visitors to ask themselves when they’ve just come across your site for the very first time.

Navigation design can be a tricky thing. And especially if you’re leaving it for last – making it this one final element that you will optimize nearing the whole project’s completion.

Such an approach simply can’t end up well, and it’s surely not how good navigation design is done.

What’s particularly challenging here is that navigation design is about much more than just what menus you’ll use and where you’ll place them. It should all start much earlier. In fact, you need to be working on your navigation from day one when planning out your next website design.

Therefore, what you’re reading here is a shortened guide – navigation design 101. The number one thing we’ll be focusing on here is separating the things that matter for proper navigation design from those that don’t.

Starting with:

First-time impression is where the game is won or lost

We all have at least one website in our bookmarks that we enjoy visiting despite its horrible navigation design, haven’t we? We’ve somehow learned to navigate around it and consume its content, regardless of the navigational difficulties.

What I’m trying to say is that, over time, your regular visitors will learn how to interact with your site, no matter how inconvenient the navigation design might be.

Your first-time visitors, however, they are a completely different breed. They almost certainly won’t have as much dedication and drive to struggle through.

That is why when working on your navigation design, you should focus on first-time user experiences above all else. It’s the first impression that will either invite the user to come back or scare them off completely.

Good navigation begins with good content structure

It’s quite simple, actually:

Content first, then menus.

Navigation design should never be an afterthought, but instead, should be a direct result of the information architecture that’s on the website.

In other words, the way you design the content structure of the website is what influences the way you’re going to be designing the navigation, and not the other way around.

One possibility and a good way to begin prioritizing and designing the information architecture of the website you’re working on is through the card sorting method.

Card sorting is an offline approach, so to speak, where the participants use actual cards (pieces of paper) to organize individual topics into categories. You can find out more about the method here.

Always think about *your* goals

One school of navigation design teaches that we should always first focus on what the user wants to do – take care of their goals first.

This may be a sound strategy in some cases, but it’s not always the best one from a business point of view – in relation to what your (or your client’s) business goals for the site are.

Instead, organize your navigation according to where you want the users to go, not necessarily where they would go themselves.

But perhaps I should rephrase. This isn’t about doing things against the user’s intention. This is about drawing a connection between the user’s goals and yours.

You can do so by creating user personas and defining the goals of those personas (in relation to the content that your site is going to offer), then make your site the intersection of their goals and yours.

For example, users may want to be able to filter your list of downloads to see the free offerings only, but is it the best decision from a business point of view to allow them to do so?

Instead, you can find a better solution somewhere in the middle by displaying a full list of downloads, but giving the free ones additional focus (so the user will be able to distinguish the free stuff, but they will also be exposed to other, paid offerings).

woo

Predict the user’s mindset

This is about predicting the mindset that the user is going to be in when visiting your site.

Mainly, do they know what they’re looking for, or do you need to help them out?

Let me give you two examples here:

  • Example #1: Google. Whoever comes to Google knows exactly what they’re looking for. The only thing they need is a search field where they can input their term of interest, and off they go. The core of the navigation is this one main search field.
  • Example #2: standard blogs. The average blog visitors may not know what they’re looking for exactly. They know that they want to consume some good content, but when it comes to the specific post they’re going to be served, it’s on you to provide it to them. In this case, you need a more elaborate navigation structure than just a search field. You need menus, you need categories, perhaps archive pages and so on.

Therefore, depending on your visitor’s expected state of mind, you need to design your navigation accordingly. If there’s a disconnect, the visitors won’t have a clue on what to do on your site, or won’t be able to consume any of the content.

Navigation needs to feel familiar

One of the most common mistakes that designers make when building a website is being too creative with their approach towards navigation.

Although creativity is hard to resist, especially since every other aspect of website building requires a lot of it, it’s always better to go with tried and tested methods when it comes to navigation design.

Above all else, navigation can’t be confusing. Every user should be able to recognize a menu right away without having to wander around looking for clues.

Not just my opinion, by the away. I asked Robert Hapiuc, designer for the CodeinWP blog, to share his point of view on the top mistakes that web designers make with navigation design. Here’s what he said:

The most common mistake is trying to apply creativity to all aspects of the navigation menu, without thinking about the UX. Yes, you can have a very creative website, but when it comes to navigation design, always think about UX first, then allow yourself to be creative in other areas.

In short, make your navigation structure easy to scan, and don’t go over the board with creativity. Instead, be as obvious as possible with your menus and other site elements that make up the navigation.

Moreover, don’t be too creative with your navigation presentation either. For example, material design animations are fine, but making them too elaborate and complex will put people off and decrease usability.

And most importantly:

Don’t discard standard web conventions

Various web conventions have been with us for years for a reason. Things like shopping cart icons in the upper right corner of the page, or login/profile links in the same place.

Users have grown to expect seeing them there, and trying to come up with a new concept will only cause confusion.

So a general rule of thumb is to stick with existing web conventions, make them fit into your design, and don’t reinvent the wheel just for the sake of it.

Give enough visibility to the main content

Constructing your navigation around the main content of the site is a good starting point.

The whole card sorting experiment mentioned earlier will give you a good overview of what the main content categories are and how significant of a role they play for the whole website. However, you also need to look into the individual pieces of content that are key to the site’s offering.

For example, there’s nothing bad about linking to an individual piece of content from the top menu of the site if it’s significant enough.

Don’t fall into a trap of building your navigation around just the main content categories or sections.

alltop

Such an approach may be good for a directory site (like Alltop), but it won’t be effective over the long term for other types of websites. That’s because designing navigation based on categories alone requires the visitor to already be more or less familiar with what they can expect to find in each category.

(There’s a similar problem with drop-down menus, more on which in a moment.)

What types of navigation to use

Is the type of navigation you’re using important? Is there any significant advantage of using, say, top nav menus vs. mega menus? Are drop-downs the way to go?

Like usual – and as much as I hate saying this – it depends.

Different navigation types are optimal for different situations, but you need to know their traits in order to be able to pick your model accurately.

Standard, top nav bars are the most common and possibly the most practical of all the navigation tools. Their only inconvenience? They can just fit so many elements.

However, that’s not necessarily a flaw. Using a top bar menu requires you to prioritize the elements that make up the main navigation and pick just the things that are the most important. Also, it makes the choice for the users easier. After all … less is more.

Having too many things in the main navigation is also something that Dragos Bubu, web designer at ThemeIsle, points out as the main mistake web designers make when working on site navigation:

One of the most common mistakes that comes to mind is when a website with lots of content gets cluttered when the designer doesn’t make it easy enough to access information.

This way, you get stuck with a lot of items in the main navigation, making it harder for the audience to find the important stuff.

As a rule of thumb, you should consider having no more than seven items in the top-level navigation. If the sheer complexity of your system cannot be contained in those seven items, you can use drop-downs for a broader view.

One of the more fashionable navigation choices these days is placing a menu to the side. Overall, it can be a good solution for some sites, but mainly the ones that feature a lot of content categories, which sometimes become the content themselves. And also for sites that offer filters that the user can adjust dynamically when browsing through the main content block. A little site called eBay is a good example here.

ebay

The downside of those menus is that they may focus too much of the visitor’s attention and decrease the visibility and appeal of the main content block.

Finally, we have one of the most controversial type of menus, the drop-downs.

Essentially, there’s nothing wrong with drop-downs as a navigation tool. The problem is that many web designers turn to them whenever they run out of space in their main nav bar.

For instance, they label the very last link in the menu “more” or something similar, and then feature everything that didn’t fit in the main menu inside a drop-down.

Not the most optimized solution. This decreases the usability of the whole site because the user doesn’t have any ability to predict what might be inside such a menu, therefore they have no incentive to click on it.

As a rule of thumb, drop-downs are generally only good for lists where the visitor can 100 percent unmistakably predict what will be inside the menu. For example, if you need the user to select their state, or city, or country, drop-downs are perfect. But when you need to display a set of standard menu items, they’re not.

Also, include additional visual clues when using drop-downs, for instance the triangle symbol that suggests to the user that there’s something more available when they hover their cursor over the menu.

Go for long-term success

Like with most things web design, you’re much less likely to design the right navigation structure on your first try than you are by coming back to your design after a while and improving it then.

In short, examine the patterns, track how people behave on your website and what paths they follow. Over time, you should be able to improve the efficiency of your navigation by making the most commonly used elements more visible, and moving some of the less used stuff to the background.

What’s next?

Navigation design is a wide topic if you really want to master it. And there are still lots of things we didn’t discuss in this guide, for instance: how to handle information layout on individual content pages (where to place images, text, links), using advanced navigation mechanisms such as separate pages, site maps, tag clouds, fixed navigation, and so on.

But how about we leave all of that for next time, and stop right here to let the information sink in.

What do you think? What are your strategies to designing effective and functional navigation?

Comments (0)

In this post, I’m going to walk you through how to create a squiggly text effect using SVG Filters and CSS. This effect can be useful when you want to make things a bit more playful. This tutorial can also serve as an introduction to, and exploration of, SVG filters.

SVG Filters

SVG Filters are filter effects that were originally developed for SVG, but can be applied to regular DOM elements through the CSS filter property. They allow for much more flexibility than regular CSS filters due to the ability to chain filters together, as well as the greater variety of base effects (which are called primitives).

To illustrate how they work, here is a drop shadow effect created with SVG Filters:

<div class="element"></div>

<!-- We need to declare our SVG filters inside
an SVG element -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="drop-shadow">
      <!-- Get the element's graphic, through the SourceGraphic
        keyword in the 'in' attribute, apply a blur filter, and
        name the output using the 'result' attribute -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="shadow" />

      <!-- Get the previous output, shift its position, and output
        with the same name -->
      <feOffset in="shadow" dx="3" dy="4" result="shadow" />

      <!-- Darken the result of the previous filters -->
      <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0" result="shadow" />

      <!-- Put the original graphics atop the shadow we made -->
      <feBlend in="SourceGraphic" in2="shadow" />
    </filter>
  </defs>
</svg>

Then we just apply it to an element with CSS:

.element{
  filter:url('#drop-shadow');
}

See the Pen svg drop shadow demonstration by Lucas Bebber (@lbebber) on CodePen.

More information about SVG Filters can be found here.

Squiggle It Up

There are two filter primitives we need in order to make the squiggle effect work: feDisplacementMap, which distorts an object based on an image map, and feTurbulence, which will generate the noisy image map we need for the distortion.

feDisplacementMap takes two inputs: in, which will be the image to be distorted, and in2, which is an image that tells the filter where to distort, based on its lightness. Another important attribute is the scale parameter, which sets the maximum distortion the filter will apply.

displacement

The feTurbulence filter generates a random, noisy image. It has several parameters that help us adjust the result to our needs, and a seed attribute that lets us change the base number it uses for its randomization.

This filter will be useful in creating the displacement maps we need in order to make a nice wiggle effect.

See the Pen feTurbulence demonstration by Lucas Bebber (@lbebber) on CodePen.

To use both filters together is fairly simple. We make the feTurbulence filter first, then we take its output and put it into our feDisplacementMap‘s in2 attribute.

<filter id="squiggly">
      <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" />
</filter>

See the Pen Squiggly Text Experiment by Lucas Bebber (@lbebber) on CodePen.

Animating

Now, we could simply animate the seed parameter (which sets its randomization) of our feTurbulence filter and call it a day. The problem is that this is bad for performance; the browser will have to generate a new random image every frame, and then make a new feDisplacementMap based on it.

What we can do to get around that is to simply make a bunch of copies of the entire filter with slightly different parameters, and alternate between then. This way the browser will only have to render most of the animation once.

<filter id="squiggly-0">
  <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
  <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-1">
  <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
<!-- make as many copies as you want, changing the seed and the scale attributes -->
@keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}
.squiggly{
  animation: squiggly-anim 0.4s linear infinite;
}

See the Pen Squiggly Text Experiment by Lucas Bebber (@lbebber) on CodePen.

And with that we are done! Please note that these filters are not supported by every browser, and even fewer support animating them like this. These effects can also be quite heavy, so be careful!

Comments (0)

Learn how to use Dreamweaver’s built-in templates to create responsive content

Dreamweaver now has several Starter Templates to give you a jump start toward creating web pages that will look great on any size device. These templates are divided into two categories: Bootstrap Templates and Responsive Starters. This tutorial will show you how to create a page based on a Bootstrap Template.

What do I need?

Download the following files: botswana_sunset.psd

 

Step 1 of 8

Create a new page from a Bootstrap template

You see the Welcome Screen each time you open Dreamweaver. If you don’t see it, check your preferences and verify that the option Show Welcome Screen is checked, or close any open files and select Help > Welcome. You can use either the Welcome Screen or the File menu to create a new page. Before you create a new page, however, it’s a good idea to create a folder to store the new page and its related files, such as images or cascading style sheet files; then to define a site using this folder as the site folder.

Use your File management program to create a new folder. I named my folder botswana.

Select Dreamweaver Site in the New Column on the Create Welcome Screen, then define a new site using the folder you just created as the Local Site Folder. I named my site Botswana.

Next, on the Welcome Screen, select the Create tab, then select Bootstrap-Agency under the Starter Templates column.

bootstrap 1

Replace the default File name with index.html.

Next, select Copy in the Copy Dependent Files dialog box to copy the dependent files necessary for this design into your site. These files include a style sheet, fonts, images, and JavaScripts.

 

Step 2 of 8

View the files that were copied to the Files panel

Let’s take a look at the files that were copied into the local site folder. Open the Files panel and expand each of the four subfolders that were created.

You see a bootstrap.css file in the css folder; five files used to format the fonts on the page in the fonts folder; four image files in the img folder; and two JavaScript files in the js folder. The index page has 245 lines of code. The bulk of the code for the content placement and design is in the bootstrap.css file, which has over 6,500 lines of code!

bootstrap 2

 

Step 3 of 8

Add a page title and page content

One of the simplest, but sometimes overlooked tasks for creating a web page is to add a page title. A page title, which is different from a page filename, appears on the browser page tab when a page is open in a browser. A page title is part of the Meta data for the HTML file, and is used by search engines to help users locate your site. If you don’t assign a page title, the default page title will appear in the browser page tab. An unassigned page title not only reflects poorly on the page designer, but diminishes the chances of search engines indexing the page. The default page title for this index page is Bootstrap Agency Template.

Go to Code view or Split view, then replace the title Bootstrap Agency Template with Welcome to Botswana!

bootstrap 3

 

Step 4 of 8

Add an image using the Extract panel and Live View

A relatively new Dreamweaver panel is the Extract panel. The Extract panel is a powerful tool that can extract, or selectively copy images, text, or styles from a Photoshop file, then add or apply them to a page open in Live View in Dreamweaver. For instance, you can copy an image on a specific layer in a Photoshop file and place it in an HTML div tag or other page container. Or you can copy selected text and place it, along with its styles, on your page. You can even design an entire layout in Photoshop, then extract the layout to create a new page.

Select the Workspace switcher, then select Extract. This workspace divides the Dreamweaver workspace into the Extract panel and the Document window.

bootstrap 4

Select Upload PSD in the Extract panel, then browse to and select the file botswana_sunset.psd. After the file is uploaded into the Extract panel, it is available to use to add content on a page.

bootstrap 5

Select the image thumbnail to open it in the Extract panel, select the Layers button in the Extract panel, then select the Background layer.

bootstrap 6

Change to Live View if necessary, then drag the background layer from the Extract panel to the div under the set of links at the top of the page until you see the </> tag, press and hold over the </> tag until you see the DOM panel, slide the pointer down until it points to the div class=”row”, drop the image, then press [Enter] to accept the default image name.

bootstrap 7

bootstrap 8

The image now fills the div class=“row”, but a breakpoint appears indicating where the image will not fit on smaller screen sizes. To automatically resize the image to fully appear on all size devices, create a style with a width property to resize the image responsively.

bootstrap 9

Select the menu to the left of the img tag in Element Quick view, then the add alt and title text Sunset over the Moremi Game Preserve.

bootstrap 10

You can close the Extract panel now to free up workspace.

 

Step 5 of 8

Modify a style with the CSS Designer panel

Select the banner image, select Add Class/ID (the plus sign) in Element Quick view over the top left corner of the image, then type .banner_img in the class text box.

bootstrap 11

Open CSS Designer, select .banner_img in the Selectors pane, then set the Layout width to 100%. If you don’t see the .banner_img selector, be sure your CSS Designer panel is in Current mode with the Show Set checkbox deselected in the Properties pane.

bootstrap 12

After setting the width to 100%, the image will expand to the full width in the div container in any size device.

bootstrap 13

 

Step 6 of 8

Preview a page with the Window Size menu

Close the Extract panel and save all files.

Select the Window Size menu on the right side of the Status bar, then select iPhone 6 Plus. Notice that you have the choice of viewing the page in either Landscape or Portrait orientation.

bootstrap 14

The page content, including the image, resizes to the iPhone 6 Plus Landscape orientation size.

bootstrap 15

Experiment with selecting other screen sizes to verify that the page content conforms to each selected size, then return to Full Size.

 

Step 7 of 8

Preview a page with the Visual Media Queries bar

The Visual Media Queries bar is another way to check your page design in different media sizes. The Visual Media Queries bar is under the Document toolbar. It visually represents the media sizes that are defined in your bootstrap css file.

Select one of the media queries on the Visual Media Queries bar and notice how the page resizes to fit the width of the selected device.

bootstrap 16

The Scrubber is a tool you can use in conjunction with the Visual Media Queries bar. Slowly drag the scrubber toward the center of the page to see how the page “breaks” or rearranges content to adjust to a new screen width.

 bootstrap 17

 

Step 8 of 8

Preview a page on a mobile device with Device Preview

Device Preview is a new feature with Dreamweaver 16. Device Preview is an easy way to preview a page on the actual device size you are testing, rather than using a simulated size within Dreamweaver or manipulating the page size in a browser window. This is an extremely cool feature! All devices you are testing must be on the same network that Dreamweaver is using for the feature to work correctly.

Select Device Preview on the right side of the Status bar, then when the QR code displays for the index page, scan the QR code with your mobile device with an app such as Microsoft Tag. The index page will scan into your mobile device so you can see how it looks live on a mobile device.

bootstrap 18

The page below was scanned using an iPhone6 Plus.

bootstrap 19

Summary

This tutorial introduced the new responsive Bootstrap templates in Dreamweaver. We created a new page based on the Agency template, then used the Extract panel to upload a Photoshop file and extract an image to add to the new page. We then added a class style to the image to format the image to display responsively at 100% width on any size device. The next steps would be to replace each placeholder item with new content and adjust default styles or add new styles to fine tune the positioning of all page elements. As you work, it is important to view the work in progress using such tools as the Window size menu, the Visual Queries bar, and the Device Preview.

Comments (0)

Digital UX prototyping tools are evolving rapidly. The release of Photoshop CC 2015 brought exciting news of Preview CC which allow designers to preview their artboards and layer comps on devices. Seeing work in context on devices is an invaluable way to evaluate and improve concepts. Getting work on to the relevant device screens is also key to content first approaches.

Digital prototyping is great for later stages, as work gets more finessed and visual design is applied. In this post we are going to explore some lower fidelity, earlier stage prototyping methods that you can apply before getting into digital tools, as well as what to bear in mind when prototyping responsive and mobile UX.

What is a prototype?

My favourite definition of a prototype comes from designer Adam St. John Lawrence:

“A prototype doesn’t describe the thing, a prototype is an early version of the thing. If it describes the thing, you might have a presentation on your hands…”

UX designers count prototyping as a key skill. Prototypes allow us to rapidly explore multiple ideas, to show rather than tell our concepts to clients, and to test designs at early stages.

Low vs high fidelity

A design process involving a cycle of prototyping, testing and iterating creates the best chance possible of getting to a great end product. The fidelity of the prototyping will increase over time in a project, as ideas become more refined and teams move closer to something that is production ready. Earlier on in project methods that are fast, cheap and easy to execute are best.

fidelityovertime

The fidelity of a prototype should evolve over time. Diagram adapted from Scott Klemmer.

Sketching on paper

sketches_1

Early stage sketches exploring a mobile app user experience.

Sketching is the most basic of prototyping techniques. A sketch does not necessarily a prototype make, however sketches are the beginning building blocks, the very early stage versions of the thing. You don’t have to be able to ‘draw’ and it is not about making something pretty. Simple boxes and squares are great for low-fidelity sketching At this stage sketching is about working through many ideas rapidly. Sketching is also a communication tool that allows the sharing of a vision with collaborators.

Tips for mobile and responsive prototyping:

  • UI stencils can help you to rapidly sketch common platform specific UI elements.
  • Drawing multiple screen sizes alongside each other in tandem will help you to think about the design across varying screen sizes. Layout your sketch with small, medium and large beside each other, and don’t move on to a new screen until you have considered all sizes of the one you are working on.
  • Sketching at real-world scale is a great way to be realistic about what will fit, especially for smaller screens.
  • Mobile touch target templates are great for making sure your touch targets are on track to be big enough as the work progresses.

Whiteboard sketching

designer drawing website development wireframe

Sketching on a whiteboard offers opportunity to make work visible to a larger team.

Sketching on a whiteboard is great way to work. This medium is particularly suited to collaborative sketching sessions. The large surface and larger markers encourage bigger, sketchier work and can help shy or reluctant team members to participate. Working on a whiteboard means multiple people can input to one sketch or idea. It is easy to erase, add to and work over whiteboard sketches, meaning the team can work out details together quickly.

Tips for mobile and responsive prototyping:

  • Bear in mind that sketching at whiteboard scale doesn’t convey the restrictions of smaller screens. Once an idea is developed try switching to sketching at 1:1 scale on paper or using pre-defined areas on the whiteboard to constrain the work.
  • Don’t forget to document the sketches! Snap photos of progress before moving on.
  • For responsive design, sketch small, medium and large version of the same screen beside each other.

Paper Prototyping

Simple, early stage paper prototype.

Paper prototyping can be of different levels of fidelity, from a series of sketches on separate pages, to high fidelity work on paper, to wireframes that have been created digitally and printed out.

Testing with paper prototypes is a fast, low cost way to validate ideas. You can ask users to simply interpret what they see, or do task based testing. A human can act as the ‘computer’ and swap in the next screen or pop-up and generally simulate interactions. It is a really effective method and participants get really into it. This is called “wizard of oz” prototyping.

Tips for mobile and responsive prototyping:

  • Widgets can be represented by post its or index cards.
  • Working to scale is recommended at this stage, especially if you intend to test with the paper prototype.
  • Create paper or cardboard device ‘frames’ for displaying screens.
  • Create drop down menus or other interactions by cutting and folding paper pieces, which can be held in place by tape or slotted through cuts in the page.
  • Stick paper prototype screens to actual devices to get a sense of how people might use the device in context, and how far they can reach on the screens when holding the device with various grips.

Role Playing Interactions

Interactions are a key part of UX. Prototyping these digitally can be time-consuming and unrealistic at early stages of a project. A fast, cost-effective and fun way to try out flows and interaction is to act them out. One person plays the web page or application and the other plays the user.

Thinking about a user experience as a conversation or a two-way interaction helps to make sure that the experience follows a logical, human flow. It can also expose language that is too technical or potentially confusing.

Tips for mobile and responsive prototyping:

  • Think about platform specific interaction language or messages when designing for mobile screens.
  • Consider the differences in layout across various screen sizes, and how this might impact the flow of the conversation/interactions.

So there you have it! Sketch, test the design on paper and role play the interactions to get off to a flying start in creating excellent UX.

Comments (0)

Today, we released a minor update for Dreamweaver that includes proxy server support. If your company is using a proxy server to access the Internet, Dreamweaver will no longer ask for your credentials. Please see our release notes for details.

We’ve also included the following bug fixes:

  • Improved performance when switching between dependent files on Macs
  • Eliminated sluggishness when adding CSS properties
  • Added class IDs are no longer removed when pressing the Tab key inside a style tag
  • Empty divs can be edited in Live View
  • With Device Preview, the Save dialog no longer appears multiple times for each device

To get the latest version, all you need to do is open the Creative Cloud desktop app and click “Update” next to Dreamweaver CC (2015).

Comments (0)

Alexander McQueen got it right when the late fashion designer said, “There is no better designer than nature.”

Nature has inspired some of life’s greatest work. From electricity towers, which were inspired by the complexities and inner networks of beehives, to Banksy’s street art, which often strategically incorporates natural elements such as trees into the designs, nature has a way of not only changing the way humans see things, but communicating messages in unspoken ways.

Nature influencing design is nothing new, but as web design continues to evolve, designers are able to incorporate this wild inspiration into their work in new ways. The easy part is simply paying attention to the beauty that appears naturally all around us. The hard part is capturing it and turning it into a gorgeous, practical design.

Thankfully, mobile devices are making that easier. Here are six free mobile apps that can help you create anywhere so you can more easily make nature your muse.

For Those Who See Patterns In Butterfly Wings

Natural shapes exist all around us. Imagine being able to instantly turn them into vector images? Adobe Shape CC allows you to snap a picture and automatically convert it into a graphic that can be edited and refined. Like all of the apps mentioned in this article, images can be saved to your Creative Cloud library for easy access and editing once you get back to your computer. So whether it’s the webs found in butterfly wings, or the circles found in collections of stones, this imagery can be used to reimagine your next design.

draw

Platform: iOS, Android

For Those Who Like To Draw

If you’ve ever found yourself sitting on a park bench sketching the world around you, then the following two apps are for you. Adobe Photoshop Sketch allows you to sketch on your iPad with your finger or a stylus, allowing for a natural transition from sketch to design. No need to bring your art supplies. This app comes with a variety of (digital) built in mediums, including graphic pencil, ink pens, and blending markers, as well as several brushes. Sketches can then easily be imported into Photoshop for finessing.

Point Bonita By Kendall Plant

If vector images are more your style, Illustrator Draw is similar, but instead it’s designed for crisp, clean lines. One of the cool parts about this app is its shape integration feature, which allows you to import your Shapes into Draw, creating intricate work on the go.

draw-marquee

Platform for Photoshop Sketch: iPad

Platform for Illustrator Draw: iOS

For Those Who Know The Importance of The Right Brush

Sometimes the difference between a good design and a great design is the subtle use of the right brush. Adobe Brush works similarly to Shape. It allows you to turn what you see into a custom brush simply by taking a picture. Brushes can then be further customized and stylized until you get the brush that’s right for your design.

brush-killer-feature-thumbnails-03

Platform: iOS, Android

For A Whole World of Color

Did stunning colors capture your eye? Adobe Color allows you to snap a photo and convert it into to both color themes and interactive color wheels that can then be used in Photoshop and Illustrator. So when you find that perfect color among the brilliant hues of a peacock’s feathers, for example, snap away and use this app to get the exact shade you’re looking for.

color-marquee

Platform: iOS, Android

For Those Who See The Big Picture

When inspiration strikes, it’s important to act immediately. Adobe Comp CC is an integrated app that allows you to draw and map out layouts and text so you never miss a moment of inspiration again. Pull additional graphics and images from your Creative Cloud Library to make more comprehensive mockups on the go, and then easily send these layouts to Photoshop, Illustrator and InDesign for editing. It’s the easiest way to seamlessly turn nature’s inspiration into a working design.

comp cc

Platform: iPad

Inspired By Nature

When you see something outside that speaks to you, these apps are there to help you convert nature’s beauty into workable files. As long as you have a Creative Cloud account, your options with these apps are limitless.

To download these apps and more, visit Adobe’s mobile apps page. For examples of what other designers have created with these apps, check out portfolios on Behance.

Comments (0)

Database Design and Management

Cwebpro can design and develop a small business data management solution for you. We will provide professionally crafted entry screens and a database that will grow with your business.

Professional Web Designs

If you need a web site designed or updated contact Matthew at Cwebpro for quality work at a fair price. The Web Creation Zone (Cwebpro) can meet all of your business website design and data management needs.