Tag: kranthi

What We Learned in 2012

Well hello there, 2013. It’s taken us a few weeks to settle into you (if we still used checks, this’d be about the time we’d stop writing “2012” on them). Now that we have, we like what we see: people taking risks, taking charge, and taking a stand. Passionate conversations about not just which tools to use, but why our work matters. A community coming together to make sense of a web that’s changing faster than we can refresh our tiny screens.

But before we barrel into the future, we’d like to take a moment to reflect. So we asked some of A List Apart’s friendly authors and readers to share the lessons they learned last year, and how those lessons can help us all work—and live—better in 2013.

Solving information gluttony

In 2012, I left Seattle and the company I founded to join Twitter and help solve the most serious issue in the world that I might be qualified to solve: information gluttony.

We used to live in a world where we didn’t have access to enough information to keep us properly informed; now our problem is the opposite: there is so much signal competing for our attention that we spend entire days swimming through it in search of what’s actually important in our lives.

The most essential service of the next decade will be the one that keeps you the best informed in the least amount of time. There’s more to life than staring at screens all day.
Mike Davidson, VP of design, Twitter, and founder, Newsvine

Successful design takes organizational change

In 2012, I worked with organizations of all sizes and stages—from a couple of people just starting out to enormous, established, complex operations of thousands. The resulting designs ranged from gentle evolution to revolution.

Changing the design of an interactive system changes the organization behind it. This year was full of striking examples. The more we can anticipate this—by asking questions, talking openly, and planning for change—the more successful the outcome. I think we all know this, but it can be easier to avoid dealing with it and “just focus on the design.”

Organizations are just groups of people with goals, rules, and customs. Designers are just people with certain skills. But because of insecurity on both sides, differences trigger defense mechanisms. We resort to jargon. All the hoo-ha around “design thinking” is just a distraction. Design is a business activity. It goes well when designers and businesses work together to solve a real problem with good information and clear goals. The hard part is confronting all the specific mundane things that interfere. So, I guess that’s the goal for 2013: getting over ourselves and looking deeper at what makes a successful design solution.
—Erika Hall, co-founder and director of strategy, Mule Design

Positive change takes time

I was reminded of our responsibility to leave the world in better shape than we found it and that change always takes time. These lessons were reinforced as I researched TV browsers and worked on responsive images.

TVs don’t support the TV media type because if they did, it would break the 99 percent of the web that uses “screen.” This reminds me of the vendor prefix debacle. When we cut corners on projects, we don’t realize the long-term impact it has on the web. When it comes to responsive images, progress is measured in weeks of effort and collaboration. New standards take time and persistence.

Outside of technology, I attended my first PTA meeting. I was inspired by the presidential election. And I ended the year horrified by the tragedy at Newtown and determined to help prevent it from happening again.

In both the web and in our greater community, I see people despair that change doesn’t happen more quickly. That we can’t make the world better overnight. But if this year has taught me anything, it is that we can’t ignore the hard work that needs to be done. And that we all must take up the charge to make the world better than it we found it—both on the web and in our society.
—Jason Grigsby, co-founder, Cloud Four

Experimentation over assumption

For me 2012 was a year of experimentation. I learned that the more certain you are about something, or the longer you’ve been doing things one way, the more important it is to abandon your assumptions and try the complete opposite. The more embedded your assumptions are, the less you notice them—so this is not easy.

In 2013 I’d like to figure out how to help people using WordPress as a development platform, find ways to make blogging more social and connected, and adapt WordPress to be touch-native.
Matt Mullenweg, founder, Automattic and WordPress

Life shapes work

2012 was a year of difficult lessons for me. Since 2008, I’d been making business decisions based on a vision I’d invested in heavily, both emotionally and materially. Saying goodbye to that vision meant making tremendous changes, and that wasn’t easy to do. (One of my employees gave me a Christmas card that opened with “2012: The Year That Sucked.”)

During those long months, I did a lot of thinking about how my work has shaped my life over the past four years. And at some point, I realized that the true opportunity here, in fact, is to figure out to let my life shape my work. So in 2013, I want to help people understand how their own life experiences—both professionally and personally—can inform and improve their work. And if this sounds like a change in direction for me, it’s not. At its core, content strategy is about taking stock, setting goals, storytelling, wayfinding, and, ultimately, imparting real change. (Any good content strategist will tell you that, at some point, a client has suggested they change their title to “content therapist.”)

Being able to articulate a point of view based on real-world experience is so critically important. It can change your work, your career, and the industry as a whole. Just ask the people whose words appear in this and every ALA issue.
—Kristina Halvorson, president, Brain Traffic

In it together

No matter how hard we work, none of us can say “I did it without help.” Everything that is foundational for us as web professionals, from code to design to content to mobile to apps to revenue models (it’s an extensive list, really), we owe to someone who came before us. As I look back on 2012, my biggest takeaway is the tremendous debt of gratitude I have to all of you. 

In 2013, my hope is that this spirit of gratitude becomes pervasive. It is my hope that understanding how all our work is connected will inspire us to dream bigger, conquer greater challenges, discard our fears, and remember to criticize and hold each other accountable when we stray. It doesn’t matter if you are my competitor; it doesn’t matter if you agree with me. What matters is that if you are making the web (and therefore the world) a better place, I’ve got your back. Thanks for having mine all these years.
Leslie Camacho, entrepreneur, former CEO of EllisLab

Design systems, not screens

More than half of U.S. laptop owners now also own a smartphone, and nearly a quarter of them own a tablet too (source). And, of course, with the holiday season past us, the number of users who own a device in all three categories will jump higher still. Users move between devices so fluidly, and in patterns that we often can’t predict. Now apps are starting to connect to other devices to control, synchronize or extend an experience.

I think we’re going to see more cross-channel design thinking in 2013 to address simultaneous multi-device usage, and frequent device hopping in a single workflow. Continuity between platforms will be important, but we don’t need to make the experience the same between devices. The user experience will morph with each context. We’ll need to design systems, not screens, to solve cross-channel experience design problems.
Aarron Walter, director of user experience at MailChimp

Confidence versus humility

The biggest thing I learned last year is that the two most important characteristics of a good designer are ones that, at first, appear to contradict one another.

On the one extreme, designers need to be confident in the solutions we come up with for the problems we’re solving. We need to keep digging into the theory of design and its related disciplines, and we need to hone our craft constantly. Solid theory and excellent technique need to become so ingrained that they simply become second nature—cornerstones of everything we design.

But equally important, we need to be open to the possibility that some of our decisions might be wrong. In fact, we need to welcome it. We should hang on to a measure of ego-less self-doubt every time we present a new design to the world. Admitting our mistakes and making changes based on good critique do wonders to improve our designs and our craftsmanship. That’s why user testing and thoughtful peer reviews are so essential.

The phrase that has emerged to describe this combination of skills and attitude is “humble design,” and I like it. But an even better summary comes from John Lilly: “Design like you’re right; listen like you’re wrong.” That’s not a contradiction. It’s a recipe for success.
Rian van der Merwe, user experience designer

Connecting with clients

In 2011, I reported that “the best design connects people.”

In 2012, as I started my own design studio, I realized more and more how true that is. Starting out as a one-man shop after working for and with agencies for years, I fully anticipated that the majority of my work would be back in Photoshop. However, I’m finding a significant amount of my working hours this past year—48.73 percent to be exact (thanks Harvest!)—has been on the phone/Skype/in-person investing in conversations with clients I trust and who trust me. Great design comes from meaningful collaboration, reinforced by trust on both ends.

In order to create great design that connects people, it’s important to connect with great people who value great design.
Dan Mall, founder and design director, SuperFriendly

Reseting device expectations

One of the main things I’ve come away from 2012 with is the understanding that people don’t use devices the way we expect them to.

In 2011 I met Ludwick Marishane, a 20-year-old student from South Africa. He’d invented a gel called DryBath that works without water. Because he didn’t have a computer, he typed his entire 8,000-word business plan on his Nokia 6234 cell phone.

People use whatever devices they have access to. Ofcom found that 20 percent of 16- to 24-year-olds visit websites on a game console. It seems like a lot. But it’s easy to forget that for some, a game console may be the only device they have access to that has a browser.

The console browsing experience improved considerably over 2012, which should lead to more people browsing on TVs—so the living room environment is a context we need to be thinking about a lot more in 2013.
Anna Debenham, freelance front-end developer

Getting over ourselves

More than anything, I’d say we were able to prove some things we should have already known in 2012. Halfway into the year, we hired a full-time SEO. Well, we hired a digital strategist, because everyone knows web shops and SEO consultants don’t mix.

We should have done this a long time ago. We’ve known for a while that we’ve been too focused on launch, but we were too caught up in all the usual self assurances to dedicate someone on the team to doing something different. Honestly, I can’t think of another event in our recent history that’s had such a positive impact on our business.

This coming year, I’m hoping to get rid of any remaining stereotypes and continue to reevaluate what we do. I think our industry tends to look down on anything other than the beautiful, repeatable mechanics of our craft. In some ways, it limits our business relevancy.

It took us a little while (sixteen years) to get over ourselves long enough to try something new. I’m hoping we’re able to move a little faster next time.
—Aaron Mentele, partner, Electric Pulp

Making, not just consuming

Don’t tell me you haven’t woken from a nap or a night of blissful slumber to find your [insert favorite mobile device here] wedged in your hand. Life online is so wonderfully seductive that we tend to focus so intently on the light-emitting screens of various sizes, we forget about how much easier it can be to solve problems when our brain is engaged doing something else. And, by “me” and “you,” what I really mean is me.

When I was working at Flickr, I ran four miles three times a week. We were working through some pretty gnarly adventures: launching internationally in multiple languages and jurisdictions (“think, Flickr thinks!”), introducing video (“Keep Flickr still!”). Running kept me (mostly) sane. I found that when I was away from everything, I could work through problems more easily.

What I’d forgotten over the last few years is that I’m happiest when I’m making things with my hands. In 2012, I took a six-week online painting course and participated in a lino block printing bee. That time when I’m doing something with my hands has become that four miles three times a week. My brain can noodle through problems in ways that staring at a blank document or empty spreadsheet can’t.

In 2013 I’d like to spend less time online consuming and more time offline creating. Or rather, consume more wisely. I need to buff up my making skills for the impending zombie apocalypse.
—Heather Champ, Findery

Diversity is a feature

The conversations within our community this past year have reminded me just how much designing for the web has completely and irreversibly changed since I started working in this field. Early on, our practices focused on normalizing CSS rendering and JavaScript logic across five or ten popular browsers, so that our designs looked and behaved in one “same,” expected way. Essentially, we were making print designs navigable on a computer. Considering the number of browsers relevant to us today, it’s easy to look back on those days as a simpler time in our field, but the truth is, that work was very difficult—perhaps even impossible. Our jobs weren’t simpler then, but our focus has since shifted in an important way.

Today, we design for a medium that is completely its own. We’ve realized that diversity is a feature, not a bug; we’ve acknowledged that delivering an identical user experience to everyone is a missed opportunity. We’re moving from an age of normalization to an age of contextualization, where developing websites that cater to browsers’ diverse features, constraints, sensors, and input modes makes for a subtly different, and more appropriate, experience for each person.

Supporting all users today demands a new definition of “support” itself: the successful delivery of essential content and functionality to a device. Beyond that, we should embrace that things will rarely be the same.
Scott Jehl, designer/developer, Filament Group

Being honest

This year I gave a talk called “True Story,” where I told everyone to stop bullshitting and tell simple, honest stories. 

Three days before my talk, I realized I was bullshitting. It didn’t sound like me. I was trying to impress people, not help them. I spent three days and nights rewriting my talk. I didn’t stop until I wrote something that made me cry. It wasn’t perfect, but it felt right.

As a content strategist/writer for hire, a big part of my job is keeping companies—and myself—honest. I’ll be working on that in 2013.
Tiffani Jones Brown, content strategist at Pinterest

Living with urgency

This year was one of many realizations and additions to my toolkit as a designer and leader. A few that I came back to repeatedly over the year are:

  • Trust and vulnerability are a prerequisite for creativity within a team
  • When creating as a group, those relationships are more important than talent, ideas or process
  • That fine line between too much self-editing and not throwing out enough concepts is a horizon to always keep an eye on

But bar none, the most important lesson I learned was to live life with urgency. Not in a stressful, frantic sense, but that things you may or may not be focused on—relationships, projects, ideas, etc.—can come to an end when you least expect them to. Living with with anything less than laser-sharp focus and purposeful haste is not enough. 2013 is going to be a year of living and creating with urgency.
Hannah Donovan, co-founder/design director, This Is My Jam

Making better use of better tools

I got a lot of milage out of the phrase “this gig wouldn’t be any fun if it were easy” this year.

When I was in my early twenties and just learning carpentry, all of my tools were terrible. My hammer bent nails, none of my saws ever cut in a straight line, and my tape measure always managed to be off by just a little bit once everything was said and done.

Let’s be honest: responsive web design isn’t easy when you’re just getting started with it. It calls for some major changes in both thinking and process. You start out clumsy at first, like with any new tool; maybe you even find yourself cursing it out from time to time. Thing is, once you’ve struggled through it and you stand back to admire what you’ve built: yeah, maybe you can see a couple of seams and maybe you could have done a few things better, but you’ll know those mistakes before they happen next time. When we move on to the next job our tools seem a little lighter, sharper, and more accurate than they did on the last one, because we got better with them.

This year we all started getting the hang of an incredible new tool. Next year we’ll get even better with it.

We’ll probably still do a fair amount of cursing, though.
Mat Marquis, designer/developer, Filament Group, and technical editor, A List Apart

Facing your fears

2012 was about fear. Throughout my career I’d convinced myself that I was not one of those people that spoke in public. And then I was dumb enough to go out and write a book. Part of that book was about convincing people to get over their fear. To avoid being a hypocrite I had to go out there and do the thing that I was most afraid of. And so I found myself onstage in front of a large audience.

I hadn’t slept the night before. I was terrified. My heart was racing. And I realized in that moment that I could either walk away or face that fear. So I let myself be scared. I acknowledged it was real. And that it had a right to exist. And I embraced it. And I went out and did the thing I was most afraid of in the world. And I did OK. And the next time I spoke in public I was still afraid, but a little less.

My hope for you in 2013 is that you ask yourself what fear is keeping you from accomplishing. What are you most afraid of? Stop waiting for courage to come. That comes after.
Mike Monteiro, co-founder and design director, Mule Design


Media Query width and vertical scrollbars

Media queries are a great tool for changing a website’s layout depending on parameters like viewport width, but it can be very annoying when browsers do not do the same thing. An obvious example is whether or not a vertical scrollbar, should one exist, is included when the viewport’s width is calculated.

I made a note about this two years ago in Media queries, viewport width, scrollbars, and WebKit browsers. In that post I also pointed to the following statement in the Media Queries specification:

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

So it’s pretty clear what browsers are supposed to do. But in reality this varies. It doesn’t just depend on the browser and operating system but also on user settings. To find out what current browsers do, I created a simple Media Query width test document with a number of breakpoints and opened it in a lot of browsers.

I saw three different behaviours.

Read full post

Posted in , .

Copyright © Roger Johansson


Building The Prototype: iOS Prototyping With TAP And Adobe Fireworks (Part 2)


  

In the previous article in this series, “iOS Prototyping With Adobe Fireworks and TAP, Part 1: Laying the Foundation,” I looked in detail at the four major stages that all of our projects at Cooper go through, as well as our approach to Fireworks PNG organization, and the main components of Fireworks (pages, shared layers, symbols and styles). Now we can start actually building the prototype.

First, let me try to sum it up quickly: to create a “live� iOS prototype, you only need to perform the following six steps:

  1. Design each page in Fireworks (each page representing one step of a walkthrough of the user’s actions).
  2. Add hotspots over the page to create buttons.
  3. Customize each hotspot:
    • Which page will the hotspot link to?
    • Which gesture will initiate the hotspot link?
    • Which transition will animate once the correct gesture is used?
  4. Export your design as a prototype, and upload it to your server.
  5. Download Touch Application Prototypes (TAP), a free Fireworks extension for prototyping on the iPhone and iPad.
  6. Convert (with the help of TAP) the exported prototype to an animated, gesture-based prototype that you can use on an iOS device.

We’ll cover steps one to three in this tutorial. Steps four through six (exporting the prototype from Fireworks and converting to an iOS prototype with TAP) will be covered in part 3 of this series.

So, where do we begin? We have already covered pages, shared layers, symbols and styles — a few of the major building blocks of our design in Fireworks. But now we need interactivity!


The Basics Of Interactive Prototyping In Fireworks

We’ll assume you know the basics of designing pages, adding hotspots and linking pages, so we won’t cover them here in detail. The rest of the article focuses on how to use TAP together with Fireworks to take your wireframes to the next level.

If you need basic information about Fireworks before moving on to the rest of this article, please check out the following resources:

Also, these two detailed articles, published recently on Smashing Magazine, will help you get started with interactive prototyping in Fireworks:

TAP: Customizing Hotspots And Using Gestures, Transitions And Timers

TAP allows you to specify whether the interactions in a prototype will be taps or gestures. The following gestures are supported:

List of gestures supported by TAP.
List of gestures supported by TAP (PDF)

Once the user has interacted with a prototype by tapping or gesturing, you can specify which transition will be used to change the interface. The following transitions are supported:

List of transitions supported by TAP.
List of transitions supported by TAP (PDF)

Although TAP supports transitions for both taps and gestures, we will use slightly different methods to define the interactions for each. We will place hotspots over the design and then assign interactions in the Properties panel.

Because a tap is the simplest interaction, a hotspot for a tap may have only one transition and one destination. However, a hotspot for a gesture may respond to multiple gestures and have multiple transitions and destinations.

Customizing Hotspots for Taps

Hotspot icon

When setting up your Fireworks PNG file for use with TAP, keep in mind that you will be using the “Link,� “Alt� and “Target� fields differently than when you are using Fireworks on its own. Be sure to fill in the correct fields with the syntax required by the TAP extension. Also, the way you enter the properties into the “Link,� “Alt� and “Target� fields will vary depending on whether you are using a gesture or a tap (we’ll explain this in detail further below).

A hotspot in Fireworks
Hotspots are represented on the canvas as a translucent blue shape with crosshairs in the center. Hotspots exist on their own special Web layer, separate from the rest of the elements on the canvas.

Each hotspot has three fields that can be customized in the Properties panel: “Link,� “Alt� and “Target.� Each property is used by TAP in the following ways when a tap (rather then a gesture) is made:

  • Link
    Link to another page (remember that links are case-sensitive!).
  • Alt
    The transition will animate in between pages.
  • Target
    This is a timeout, used to transition to another page after a set amount of time has passed. (This is a great feature for loading screens or step-by-step animations.)

Hotspot Property Panel - format for tap
Notice how the Properties panel changes when a hotspot is selected. The “Link,� “Alt� and “Target� fields are used by TAP as “Link,� “Transition� and “Timeout� fields.

Properties panel (hotspot is selected) - filled out example
Here is the Properties panel again when a hotspot is selected, now with an example filled out; in this case, a tap that initiates a fade to another page.

Customizing Hotspots for Gestures

Four gestures are supported by TAP:

  1. Swipe left,
  2. Swipe right,
  3. Swipe up,
  4. Swipe down.

Note: Tapping (which is technically a fifth gesture) is also supported, and it is the default if no gesture is explicitly declared.

Gestures work only when there are hotspots, so the first step is to create a hotspot. If you swipe outside of a hotspot area, nothing will happen. However, if you create a hotspot that takes up the entire page, then the swipe will work everywhere on the page.

Each property is used by TAP in the following ways when a gesture (rather then a tap) is made:

  • Link
    The link field must contain a hash sign (#).
  • Alt
    When gestures are used, this field will be blank.
  • Target
    The gesture, the page linked to and the transition are all defined here when a gesture is used.

For hotspots that use a gesture, you do not specify which page the hotspot will link to in the “Link� field (the page linked to is defined in the “Target� field, as described below); rather, you would add a # (hash sign). The hash sign allows for a JavaScript call, which makes the gesture recognition work properly. Decide which gesture you will use, and then enter the programming code needed into the “Target� field. The amount of coding you need to know is minimal, and even with no experience, memorizing and mastering all of the options takes minutes.

You can also use a TAP cheat sheet (PDF), which applies to TAP version 0.46 and later.

Properties panel (hotspot is selected) - format for gestures
The way the Properties panel is used is different when gestures are used than when only a tap is used. The “Link� and “Target� fields take on different functionality.

The format for writing the statement is a combination of three phrases, separated by commas:

  1. Type of gesture,
  2. Page to link to,
  3. Transition type.

For example, the statement swipeleft, page2, slideleft actually says the following: “If you swipe this area with your finger from right to left, then page 2 will appear with a slide-left transition.�

Properties panel (hotspot is selected) - gestures example
The Properties panel (with a hotspot selected); a filled-out TAP example.

To also enable swiping in another direction, simply continue adding the three parameters to the “Target� field. (Remember that, according to TAP’s syntax, a “statement� is made up of a three-phrase group.)

The following code has three statements (each composed of three phrases, for a total of nine phrases in this declaration): swipeleft,page2,slideleft, swiperight,page0,slideright, swipeup,page3,pushup. With these commands, the user can swipe left, swipe right and swipe up, finding page 2, page 0 and page 3, respectively.

Transitions

Sixteen transitions are supported by TAP, falling into the following categories: slide, push, pop, fade, flip, swap and cube.

All the transitions available in TAP
All animations are CSS3 transitions supported natively by WebKit. (The Safari and Chrome browsers are both based on the WebKit engine.)

To add a transition, select the hotspot you want to add a transition to. In the Property Inspector (PI) panel, enter the transition type in the “Alt� field. The proper syntax can be found in the official TAP documentation. If you have a bit of CSS3 knowledge, you can easily add your own transitions.

Timers

Timers icon

Sometimes you want to load a new page without the user having to interact at all. For example, you might want to show a loading screen that automatically goes to the start page of the application after a set amount of time.

To create a timed transition, draw a hotspot on the page that will be displayed for a limited amount of time. It is not really important where you place this hotspot, because it will be triggered automatically when the specified amount of time has passed.

In the “Target� field of your hotspot (where gestures are also handled), enter timeout=. The time of the delay before switching to another page is entered to the right of the = sign. Time is measured in milliseconds, so timeout=500 is equal to half a second. Experiment with the number to get the result you are looking for. If desired, add a transition to the “Alt� field.

Note: If you don’t put a transition in the field, the default of “fast fade� will be used by TAP.

Hotspot Property Panel Example - Timeout
The Properties panel with a hotspot selected and an example filled out: a 500-millisecond delay that initiates a fade to another page.

Change in Orientation

You can display a different page when the device detects a change in orientation, from landscape to portrait or vice versa. Providing a layout for each orientation will make your prototype feel more like a real app and will allow for more versatile usage.

iPad Rotation - TAP supports both landscape and portrait orientations
TAP supports both landscape and portrait orientations through two versions with similar names. The landscape version is followed by an underscore and lowercase “L� (_l).

For TAP to be able to identify which screen design to use when the orientation changes, you must have two screens with similar names. You can name the portrait design anything you want (although it is recommended that you follow HTML naming conventions — that is, no spaces — so that your pages render properly when exported), and the corresponding landscape page must have the same name followed by an _l. So, you would create a portrait page in Fireworks and name it, for example, Page1. Then, you would create another page, this one in landscape. Make sure the canvas is landscape-sized (you don’t need to design everything rotated by 90°), and name this page Page1_l. The _l extension is enough to trigger the prototype to switch between the portrait and landscape versions.

Building An iOS Prototype With Adobe Fireworks And TAP

Now it’s time to put all of that theory into practice by creating an interactive iOS prototype.

Tutorial Exercise Files

To help you with this tutorial, I have prepared three exercise files:

  1. CookbookBlank.fw_.png
  2. CookbookFinished.fw_.png
  3. CookbookPackage.zip

Note: A common convention among designers is to add an .fw before the .png file extension, in order to easily differentiate between Fireworks editable PNG files and flattened (exported) PNG files. For some reason, Smashing Magazine’s uploader adds an underscore to the file extension, so the files linked to above were originally named CookbookBlank.fw.png and CookbookFinished.fw.png.

  • You’ll use CookbookBlank.fw.png to follow along with this tutorial.
  • CookbookFinished.fw.png is the completed version of the file that you would get by following this tutorial closely. Use this file if you get stuck, to check your progress, or if you want to jump ahead and see how everything works together in Fireworks.
  • The CookbookPackage.zip is a ZIP archive containing the exported designs and the TAP framework. You can quickly upload the folder (after unzipping it, of course) and see the working prototype on any server.

Getting Acquainted With The Fireworks PNG File

Open the file CookbookBlank.fw.png. Note that six pages and one master page are in it (you can see them in the Pages panel in Fireworks). All page names are HTML-compliant (no special characters, no spaces), and the first page is named index, just like on a normal website.

Creating And Customizing Hotspots

Master Page

The master page in our exercise file is named title-bar, and it appears above all other pages in the Pages panel. Any objects on this page will appear on all the other pages. We want to create a universal link to the start page on the master page so that it can be produced only once and appear in the rest of the design automatically. When the user taps on the “Home� button, whatever is being displayed on the screen will slide down to reveal the start page.

  1. Create a hotspot covering the “Home� button:
    1. Select the Rectangle Hotspot tool (found in the Tools panel, or press J).
      Rectangle Hotspot tool
    2. Click in the upper-left corner of the “Home� button and drag to the lower-right corner. A hotspot will be created.
  2. Customize the “Home� hotspot in the Properties panel:
    1. Select the hotspot you have just created, and in the Properties panel select start.html in the “Link� drop-down menu.
    2. In the “Alt� field, type slidedown.

Master page
The preceding steps should result in a hotspot and the hotspot properties seen in this screenshot. (Larger version)

Page 1: The Loading Screen

The first page of our iOS prototype represents the loading screen.

Typically, a loading screen appears upon the launch of an app and stays for a couple seconds until the app loads. We’ll duplicate this functionality by creating a hotspot with a timeout (or timer) function.

  1. Select the first page (named index) in the Pages panel.
  2. Create a hotspot that covers the whole screen.
  3. Customize the hotspot in the Properties panel so that it automatically goes to the next page after a three-second delay:
    1. Choose which page the hotspot will link to: in the “Link� drop-down menu, select start.htm.
    2. Set up the timer: in the “Target� field, enter 3000 (which is in milliseconds and equal to 3 seconds).

Index page
The preceding steps should result in a hotspot and hotspot properties as shown in this screenshot. (Larger version).

Page 2: The Start Screen

The start screen has a carousel in the middle of the page and three buttons at the bottom. To simplify some of the steps in this tutorial, we will make only the “All recipes� button functional:

  1. Select the second page (named start) in the Pages panel.
  2. Create a hotspot over the “All Recipes� button:
    • Choose which page the hotspot will link to in the Properties panel: in the “Linkâ€� drop-down menu, select all-recipes.htm.
  3. Set up the transition to the next page: in the “Alt� field, type slideup.

All Recipes hotspot
The preceding steps should result in a hotspot and hotspot properties as shown in this screenshot. (Larger version).

Page 3: Recipe Selection Screen

We will now create a swipeable region at the top of the screen that (in addition to the “Home� button we’ve already created) allows the user to go back to the start page. While this functionality is not necessary, it gives the user another way to navigate the app, and it will teach you how to create a swipe in your prototype:

  1. In the Pages panel, select the third page, all-recipes.
  2. Create a hotspot that covers the entire width of the screen and the horizontal band across the title “Recipes� (see the illustration below).
  3. Customize the hotspot in the Properties panel:
    • Initiate the swipe function: in the “Linkâ€� field, type # (a hash sign).

When a swipe is set, the transition, swipe and link are defined in the “Target� field:

  1. In the “Target� field, type swipeleft,start,cubeleft (i.e. when you swipe left, go to the start page, using the cubeleft transition).

Swipe Back hotspot
The preceding steps should result in a hotspot and hotspot properties as shown in this screenshot. (Larger version)

Next, let’s enable the user to choose a particular recipe:

  1. Over the Salisbury steak (located in the middle of the second row from the top), draw a hotspot.
  2. Customize the hotspot in the Properties panel:
    1. Choose which page the hotspot will link to: in the “Link� field, select chosen-recipe-intro-card.htm.
    2. Choose the transition: type fade.


The preceding steps should result in a hotspot and hotspot properties as shown in this screenshot. (Larger version)

Page 4: Recipe Info Card

In the Pages panel, select the page chosen-recipe-intro-card.

Note: The design of page four is similar to the design of page three, in that page four is simply a lightbox laid over page three. This was achieved by sharing the wireframe layer of page three to page four. Sharing layers in Fireworks is an efficient way to maintain consistency in a project. The benefit of sharing layers between pages is that, if the design of page three is changed, those changes will be automatically reflected on page four.

  1. Create a hotspot over the “Cook This Recipe� button.
  2. Customize the hotspot in the Properties panel:
    1. Choose which page the hotspot links to: in the “Link� drop-down menu, select chosen-recipe-full.htm.
    2. Choose the transition: in the “Alt� field, type flipright.

    Recipe info card page
    The preceding steps should result in a hotspot and hotspot properties as shown in this screenshot. (Larger version)

  3. Allow the user to close the lightbox:
    1. Create four hotspots that completely surround the lightbox (one above, one below, one to the right and one to the left), and with the same attributes (i.e. the “Link� is all-recipes.htm, and “Alt� is fade).

Closing the lightbox (hotspots)
The preceding steps should result in a hotspot and hotspot properties as shown in this screenshot. (Larger version)

Page 5: Recipe Detail Page

We will now create a “Back� button from the recipe detail page:

  1. Select chosen-recipe-full in the Pages panel.
  2. Create a hotspot over the “Back� button in the upper-left part of the screen.
  3. Customize the hotspot in the Properties panel:
    1. Choose which page the hotspot links to: in the “Link� drop-down menu, select all-recipes.htm.
    2. Choose the transition: in the “Alt� field, type slideright.

Full Recipe back hotspot
The preceding steps should result in a hotspot and hotspot properties as shown in this screenshot. (Larger version)

Page 6: Landscape of the Recipe Detail Page

Note: Page five and six have a special relationship: they have the same name, except for the latter’s suffix of _l. Thus, when page five is being viewed and the iOS device is rotated to landscape mode, the view will switch to page six!

Unlike the first five pages, page six has a landscape orientation. This was achieved by creating a page, adding _l to the page’s name, and modifying the size of the canvas (Modify → Canvas → Canvas Size):

  • Set the width to 1024 pixels and the height to 768 pixels;
  • Enable the “Current page onlyâ€� option.

Change canvas size
Changing the size of the landscape canvas

To design the landscape page, either draw the landscape version from scratch, or rearrange and resize the graphics and symbols from the portrait version to fit the wider format.

Conclusion

Now that all of the pages are linked together with hotspots, and the TAP properties (transitions, gestures and timers) are correctly set, the prototype should be ready for exporting.

We’ll do this in the next and final part of this tutorial!

(mb al)


© Shlomo Goltz for Smashing Magazine, 2013.


Why are Links Blue?

Sir Tim Berners-Lee, inventor of the web, is credited with making hyperlinks blue, a decision he appears to have reached at random. But although accessibility may not have been on Sir Tim’s mind at the time, the color choice was a happy one, according to Joe Clark:

Red and green are the colours most affected by colour-vision deficiency.  Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a colour different from others. It was pure good luck that the default colour of hyperlinks is blue with underlining.
Joe Clark, Building Accessible Websites

Why are Links Blue?

Sir Tim Berners-Lee, inventor of the web, is credited with making hyperlinks blue, a decision he appears to have reached at random. But although accessibility may not have been on Sir Tim’s mind at the time, the color choice was a happy one, according to Joe Clark:

Red and green are the colours most affected by colour-vision deficiency.  Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a colour different from others. It was pure good luck that the default colour of hyperlinks is blue with underlining.
Joe Clark, Building Accessible Websites

  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress