IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hi! I'm Justin Putney, and welcome
to Responsive Design Workflows.
| | 00:08 | In this course, we'll look at how
designers and developers can work together to
| | 00:12 | translate their ideas into
working responsive design.
| | 00:15 | I'll start by showing you how to
plan your Web or mobile project.
| | 00:19 | using simple techniques
involving the latest Web technologies.
| | 00:22 | Then I'll show the developer what's
important to the designer, and I'll show the
| | 00:27 | designer what's important to the developer.
| | 00:29 | We'll see how to create design mockups
that account for the flexibility needed
| | 00:33 | to build Web sites, and mobile apps that can
be viewed on many different types of screens.
| | 00:39 | These mockups will help you present
your designs to the clients, and they will
| | 00:43 | help the developer construct the final product.
| | 00:45 | Now let's get started with
Responsive Design Workflows.
| | Collapse this transcript |
| What is responsive design?| 00:00 | The term responsive refers the idea
that the design responds the user's present
| | 00:05 | condition, which may involve the
screen size, touch controls, and whether a
| | 00:09 | keyboard is attached.
| | 00:11 | A responsive design is one that
reacts fluidly as screen sizes and
| | 00:15 | device capabilities vary.
| | 00:16 | For instance, columns may narrow as the
screen gets smaller, and buttons may get
| | 00:22 | larger to accommodate touchscreens.
| | 00:25 | Content that is not relevant to
mobile phone experiences can sometimes be
| | 00:29 | omitted to make way for essential content.
| | 00:32 | At the same time, a more in-depth
experience is still available on a larger screen.
| | 00:37 | A designer now has to wear more hats,
and communicate with more parties in order
| | 00:41 | to reach the end goal, and create a
Web site or application that is viewable on a
| | 00:45 | multitude of screens.
| | 00:47 | This is the challenge of responsive design.
| | Collapse this transcript |
|
|
1. Aspects to ConsiderLooking at technology choices| 00:00 | One of the biggest challenges in a
responsive design project is choosing which
| | 00:04 | technologies you'll use.
| | 00:06 | This video will walk you through that
challenge, and provide you with a checklist
| | 00:09 | to help you plan your project.
| | 00:11 | Planning the technologies you would use is
important for a number of reasons.
| | 00:15 | First, it affects who can work on your project.
| | 00:18 | If you have a team of designers, for
example, it's important that your workflow
| | 00:22 | is not centered around coding.
| | 00:24 | It also affects the timeline of your
project. If you have to change course
| | 00:28 | mid-project, your project will
likely be unprofitable, and frustrating.
| | 00:32 | Additionally, different technologies
may require more production or planning
| | 00:36 | time. It also may affect
your role in the project.
| | 00:39 | You might serve as a lead on certain
projects using one technology, and on
| | 00:44 | projects using unfamiliar technologies,
| | 00:46 | you may have to contract out work.
| | 00:48 | For these reasons, the technology plan
should be assembled early in the process
| | 00:52 | in order to gain the most benefit.
| | 00:55 | At the time of recording this course,
here are some of the technologies that are
| | 00:58 | currently available.
| | 01:00 | Responsive design is becoming more
popular, so these technologies are only
| | 01:04 | beginning to scratch the surface.
| | 01:06 | Now let's break the technologies
into who is likely to work on them.
| | 01:10 | The common element in the design-friendly
technologies is that they're centered
| | 01:14 | around mature design applications;
| | 01:16 | usually either InDesign, or Flash.
These applications include advanced drawing
| | 01:21 | and typography tools, and generally
speaking, they lend themselves to rapid
| | 01:26 | development through the use of visual tools.
| | 01:28 | As new products enter the market, and
mature over the next several years, some of
| | 01:32 | the technologies on the right that
are largely coding based may become more
| | 01:36 | friendly to designers.
| | 01:38 | In some cases, utilizing one of the
designer-friendly technologies may mean
| | 01:42 | sacrificing certain functional features
in the end product, but the trade-off is
| | 01:46 | that the project gets done
on time, and within budget.
| | 01:49 | For instance, if you're using the
Adobe Digital Publishing Suite, you will be
| | 01:54 | limited to the options that have been
built in, but it will allow you, as the
| | 01:58 | designer, to produce content
quickly for tablet devices.
| | 02:02 | Let's look at some real world projects
in which technologies might be applied.
| | 02:06 | First, Company A is a large educational company.
| | 02:09 | They purchased iPads for their entire
sales force. Their creative department is
| | 02:13 | in charge of creating
materials for the sales force.
| | 02:17 | They have a staff of 24
designers, and one developer.
| | 02:20 | These projects will include a lot
of graphics, and they will have short
| | 02:23 | timelines, and in the future,
they may want a Web version.
| | 02:27 | In this case, HMTML5 will be a great
solution, especially for the Web, but this
| | 02:31 | team does not have enough developers,
| | 02:33 | so we need to start by looking
at design-friendly technologies.
| | 02:36 | Everyone on the team has some
familiarity with InDesign, but DPS is priced to
| | 02:41 | benefit large companies with lots of
subscribers, and this project is really
| | 02:45 | only targeting a few
hundred internal salespeople.
| | 02:48 | There is also kind of a
sign up process for DPS,
| | 02:51 | and it doesn't make a lot of sense for
an internal project, and while not every
| | 02:55 | designer in the group is familiar with
Flash, there are a handful, and Flash will
| | 02:59 | allow the designer and developer to
work in tandem, producing animation and
| | 03:03 | graphics, and Flash professional
makes it possible to export an iPad app.
| | 03:07 | Using an Apple Enterprise Developer
License, the project can be distributed
| | 03:11 | internally, and a SWF can be
easily produced later for Web viewing.
| | 03:16 | The responsiveness of this project will
depend on what the developer programs in.
| | 03:20 | Company B wants to publish their
lead fashion magazine to tablet devices.
| | 03:24 | They have a customer base that's
used to paying for their product.
| | 03:27 | They have six designers, and no developers.
| | 03:30 | This is a perfect situation for Adobe DPS.
| | 03:34 | Designers can add
interactivity using panels in InDesign.
| | 03:38 | Once their custom app has been approved
on the respective app stores, they can
| | 03:41 | push new issues to their subscribers.
| | 03:43 | The paying customers help to
cover the cost of DPS. While this product
| | 03:47 | isn't highly responsive, there are
some responsive capabilities in DPS.
| | 03:52 | Company C is a small parts manufacturer
with one designer on staff, and no developers.
| | 03:58 | The president of the company will be
manning a tradeshow booth in two weeks.
| | 04:01 | He found a great deal on USB drives
with the company logo, and he wants to
| | 04:05 | distribute these drives at the booth with
marketing materials already installed on them.
| | 04:10 | In this case, an interactive PDF is an
easy way for the designer to add a little
| | 04:14 | more pizzazz to that marketing giveaway.
| | 04:16 | This PDF will still be readable on
mobile devices, but will only include the
| | 04:20 | interactivity and animation in the
Desktop version of Adobe Acrobat.
| | 04:25 | Because the primary distribution of this
piece is on USB drive, it will likely be
| | 04:29 | plugged into a desktop or laptop computer.
| | 04:32 | This project isn't particularly
responsive, but it serves its purpose, and
| | 04:36 | its quick to produce.
| | 04:37 | Company D is a software startup. The
company was founded by four programmers, and
| | 04:42 | they contract design help when they need it.
| | 04:44 | At some point in the future, they
want to have a Web version of their app,
| | 04:48 | but for right now, their
main market is a smart phone.
| | 04:50 | Because software is their product,
they want to take full advantage of the
| | 04:53 | native capabilities found on each device.
| | 04:56 | So for Company D, custom programming a
separate iPhone and an iPad app makes the most sense.
| | 05:02 | Their product is responsive overall
in the sense that it provides something
| | 05:06 | specific to each operating system.
| | 05:09 | At the same time, it's not responsive in
the sense that they've programmed once,
| | 05:13 | and they can use it everywhere.
| | 05:15 | Company E is a midsize beauty
products manufacture, with a strong but
| | 05:19 | outdated e-commerce Web site.
| | 05:21 | There's a Web department with
four designers, two developers, and a
| | 05:25 | database specialist.
| | 05:26 | The leadership of the company is
interested in updating the Web site for the
| | 05:29 | customers who are viewing it on mobile devices.
| | 05:32 | In response, the Web team puts
together in HTML5 Web site that changes size
| | 05:36 | and shape, depending on the user's
screen, thus making it easier for
| | 05:40 | customers on mobile devices.
| | 05:42 | This project is highly responsive in
that the team has designed one site that
| | 05:46 | will alter itself to fit the user's environment.
| | 05:48 | As you can see from these five
situations, technology can determine the team
| | 05:53 | you use, and sometimes the team and the
time you have available can determine
| | 05:57 | the technology you use.
| | 05:59 | Here are some other
factors in technology planning.
| | 06:02 | As we have discussed, the
technology in play can greatly determine the
| | 06:05 | trajectory of a project.
| | 06:08 | To help examine all of the important
factors, I've provided a Web site with an
| | 06:12 | interactive checklist to help you
determine which technology might suit your project.
| | 06:16 | By adjusting the values on the
checklist, you'll see different
| | 06:19 | recommendations on the right.
| | 06:21 | You should now have a solid
understanding of how technology choices will
| | 06:24 | impact your projects.
| | 06:26 | You can use the checklist provided, or
you can create one of your own to help you
| | 06:30 | plan your new projects.
| | Collapse this transcript |
| Understanding scaling| 00:00 | Size is the first and most obvious aspect of
your design that will need to be responsive.
| | 00:05 | So how will your design
scale across different screens?
| | 00:08 | A mobile device can easily be rotated,
while a typical computer screen cannot.
| | 00:13 | So each mobile device actually has
two different pixel dimensions: one for
| | 00:17 | portrait, and one for landscape.
| | 00:19 | While the mobile browser is fixed in
its screen size, a desktop browser can
| | 00:23 | actually be scaled to any size
smaller than the screen that resides within.
| | 00:28 | The fixed dimensions on the mobile
device theoretically should make it easier to
| | 00:32 | design for than a traditional computer.
| | 00:35 | However, there are literally thousands
of devices out there, with all kinds of
| | 00:39 | different dimensions.
| | 00:40 | Even within a single company, like
Apple, their newer devices have different
| | 00:43 | pixel dimensions than their recent ancestors.
| | 00:47 | Even within a single mobile device,
there is additional variation, depending
| | 00:50 | on whether your experience will
take the form of an app, or a Web site.
| | 00:54 | An app, as shown on the left, can claim
dominion over the entire screen, whereas a
| | 00:58 | Web site still has to leave
some room for browser navigation.
| | 01:02 | Additional levels of screen resolution
have been introduced on mobile devices.
| | 01:06 | A typical computer has a resolution of 72
pixels per inch, or ppi, and in some cases, 96 ppi.
| | 01:13 | The retina display on the
iPhone 4 has a resolution of 326 ppi.
| | 01:19 | That means a 150 pixel wide image would
span about 2 inches on ye olde computer
| | 01:24 | screen, and less than half
an inch on your new iPhone.
| | 01:27 | HTML5 has introduced the viewport
metatag to deal with some of these variations
| | 01:32 | in screen size and resolution.
| | 01:35 | The default behavior on a mobile device
is usually that the Web page gets scaled
| | 01:39 | down to fit in the tiny screen.
| | 01:42 | Here I am on the iOS simulator.
| | 01:43 | I am going to pick on myself a little
bit. Here's a site that I'm responsible
| | 01:47 | for that has not been designed responsively.
| | 01:49 | So, I am on the blog link right now.
| | 01:51 | If I switch to the games link, watch
the menu, and see how it scales with
| | 01:55 | the entire Web site.
| | 01:56 | Everything is shrunk down.
Because I, the designer, haven't provided
| | 02:00 | instructions to the device,
| | 02:01 | the device is trying to make the best
guess for the user, so it tries to fit all
| | 02:05 | the content in the screen,
assuming that's what the user would want.
| | 02:09 | When planning for smaller screens,
you have a few different options.
| | 02:12 | The first option is literally to scale.
| | 02:15 | As I mentioned, scaling is the default
response, but that doesn't mean you can't
| | 02:19 | consciously dictate how certain element scale.
| | 02:21 | Some elements, such as buttons, should
actually be scaled up for readability,
| | 02:25 | and touch interaction.
| | 02:27 | Here's a great example of responsive site.
| | 02:29 | As I scale down, the buttons actually
get bigger, and more obvious, so they are
| | 02:34 | really easy for someone
to touch with their finger.
| | 02:37 | Sometimes it makes sense to simply
omit elements from the desktop experience
| | 02:41 | when displaying on a mobile device.
| | 02:42 | Some behaviors are omitted by the device itself.
| | 02:45 | For example, hover states work well with
a mouse-based interaction, but there is
| | 02:49 | no hover state on a touchscreen.
| | 02:51 | So most information that was tucked
away in a rollover state will be lost on
| | 02:55 | a mobile interaction.
| | 02:57 | Here I am in Chrome;
| | 02:58 | I'm looking at
Yet Another Mobile Boilerplate.
| | 03:02 | One of the easiest ways to create a
responsive design is to start off with a template.
| | 03:06 | In the default desktop version, this
template includes the capability of having
| | 03:10 | submenus that show up on a rollover.
| | 03:13 | When the site is scaled down,
or viewed on a mobile device,
| | 03:16 | that rollover disappears.
| | 03:18 | The menu is now accessible
from a click or touch interaction.
| | 03:23 | Alignment adjustments are probably
the most common and useful techniques
| | 03:26 | in responsive design.
| | 03:28 | As the screen gets narrower, elements
that were arranged side by side can be
| | 03:33 | lined up vertically.
| | 03:35 | The user then accesses those
items by scrolling down on the page.
| | 03:39 | Sometimes it makes sense to
change your method of display entirely.
| | 03:43 | Suppose you have several menu items;
stacking them vertically may be
| | 03:47 | impractical, because of the amount
of scrolling the user has to do.
| | 03:51 | This template takes care of that. As
you resize the browser, or view this on a
| | 03:55 | mobile device, the menu items actually
get collapsed into a single list box.
| | 04:00 | It's very difficult to design for each
new device that comes out, so the trick
| | 04:05 | is to focus on the devices that your
target audience is most likely to use, and
| | 04:10 | then have some wiggle room
in between those targets.
| | 04:13 | Now that you've taken the scale of your
target screen into account, it's time to
| | 04:17 | consider the different modes of user
interaction available to each device.
| | Collapse this transcript |
| Understanding interaction mediums| 00:00 | The second major element that will
affect your responsive design is the
| | 00:03 | interaction medium, or how the user
will interact with the experience you're
| | 00:07 | designing, be it mouse, keyboard,
stylus, touchscreen, voice activation,
| | 00:12 | webcam, or GPS positioning.
| | 00:15 | The modes of interaction available to
the user will have a tremendous influence
| | 00:19 | on how you create an effective design.
| | 00:21 | Devices with touchscreens have grown
tremendously in popularity, and shown no
| | 00:25 | signs of slowing down.
| | 00:26 | There are several additional
considerations when designing for touchscreens.
| | 00:31 | Because there is no cursor on the touch
device, it's more difficult to determine
| | 00:35 | exactly where the user is clicking.
| | 00:38 | Therefore, any interactive elements
should be more forgiving on a touch device.
| | 00:42 | The Apple guidelines suggest that
buttons be no smaller than 44 pixels square.
| | 00:47 | This is necessary so that the user can
easily tap on items with their finger.
| | 00:52 | You may also need to reconsider any
interaction that relies on double-clicking,
| | 00:57 | right-clicking, or keyboard shortcuts,
as these inputs will be difficult to
| | 01:01 | accomplish on a mobile device.
| | 01:03 | With limited screen real estate, you
might consider using a heads-up display,
| | 01:07 | or HUD, to only display information that is
directly relevant to what the user has selected.
| | 01:12 | On the left, you can see Gmail on
the mobile device in its normal state.
| | 01:18 | On the right, I've selected an item.
| | 01:20 | At the bottom, you can see it now
displays options that are relevant to the
| | 01:24 | message I selected, such as
archiving and deleting the message.
| | 01:29 | You may also want to consider adding
interactions that are touch-friendly.
| | 01:32 | For example, if your screen has linear
navigation, you might use back and next
| | 01:37 | buttons, but you might also
consider enabling swipe navigation.
| | 01:41 | Users of mobile devices have become
familiar with this type of interaction, and
| | 01:46 | will probably expect it in your designs.
| | 01:49 | When targeting mobile devices, there
are a few other items worth considering.
| | 01:52 | For instance, on the mobile device,
each browser window fills the entire
| | 01:56 | screen when it opens,
| | 01:58 | so windows can't be open side by side,
and viewed at the same time, as they are
| | 02:02 | on a desktop computer.
| | 02:03 | Here I have an interaction where I can
actually communicate between two browser
| | 02:07 | windows, and see them at the same time.
| | 02:10 | Additionally, if your desktop browser
is anything like mine, you've got all
| | 02:14 | kinds of useful plugins for ad blocking, Web
development, and simple things, like PDF viewing.
| | 02:19 | Mobile browsers don't generally
support plugins, so viewing a PDF means
| | 02:24 | downloading the file
locally, and leaving the browser.
| | 02:28 | You can take advantage of visitor
statistics, like those in Google Analytics, to
| | 02:33 | understand which devices are
being used more to visit your site.
| | 02:37 | That will help you determine which devices
to target, and which features to focus on.
| | 02:42 | When possible, you should design your
site so that it will be viewable and
| | 02:46 | mostly functional on even
the most basic browsers.
| | 02:49 | When a site that is designed for newer
browsers works well on older browsers,
| | 02:54 | it is said to degrade gracefully, meaning some
features fall away, but the site does not break.
| | 03:00 | Consider including fallbacks, like Flash
video, for cases where someone's browser
| | 03:05 | does not support HTML5 video.
| | 03:08 | This is also generally known as
progressive enhancement, and will probably
| | 03:12 | require the collaboration of your developer.
| | 03:15 | If you consider the interaction medium
upfront, along with the scaling covered
| | 03:19 | in the previous video, you'll be able
to design your experience with confidence,
| | 03:23 | and increase the likelihood of
satisfying your clients, and their end-users.
| | Collapse this transcript |
| Planning for typefaces| 00:00 | Typography has always been among
the designer's most important tools.
| | 00:04 | In the past, Web designers have been
restricted to a tiny set of Web safe fonts.
| | 00:09 | This has been a long-standing
frustration in designing for the Web.
| | 00:13 | Flash files and PDFs have always had
the ability to embed fonts, as well as
| | 00:17 | subsets of fonts, making them
preferred formats for designers who need more
| | 00:21 | control over their type.
| | 00:24 | Modern Web browsers have now adopted
the @font-face CSS rule, which allows you
| | 00:29 | to embed a font file in your Web page.
| | 00:32 | Even with the font-face rule, HTML
doesn't offer fancy micro control over line
| | 00:37 | breaks, ligatures, and kerning, but
this is still a major step that the Web is
| | 00:42 | taking in the designer's general direction.
| | 00:44 | The designer will still have to try
and balance control with responsiveness.
| | 00:49 | Before you pause this course, and
switch over to your HTML Editor to start
| | 00:53 | embedding fonts, I must
warn you of a couple catches.
| | 00:56 | The first one is licensing.
| | 00:58 | Those fonts you have on your
computer were not licensed to be on the Web.
| | 01:02 | Because it's easy to open
your HTML source code;
| | 01:05 | it makes it possible for others
to download fonts from your page,
| | 01:08 | so you'll need to know about the restrictions
placed on typefaces that you're using,
| | 01:12 | so you're not in violation
of any licensing agreements.
| | 01:15 | A good place to learn more about this
topic is the Adobe Web Font Licensing FAQ.
| | 01:21 | The second catch is that not every
browser supports the same formats,
| | 01:24 | and the formats that are supported may
not be the ones that you're using in your
| | 01:28 | design applications.
| | 01:29 | So even if your font is properly
licensed, it's not as simple as copying the
| | 01:34 | font from your computer, and
embedding in your Web page.
| | 01:37 | Thankfully, there are a couple of
services available that will help you with
| | 01:40 | both licensing, and multiple formats.
| | 01:43 | Font Squirrel is an online tool that
allows you to upload font files from your
| | 01:47 | Desktop, which it then converts into
all of the required formats that you need,
| | 01:51 | and provides you with CSS, and sample HTML.
| | 01:55 | This is super handy, but you'll still
have to monitor the licenses yourself.
| | 02:00 | Typekit is a subscription-based
service that allows you to embed fonts in
| | 02:04 | your pages in such a way that it's
very difficult for someone else to
| | 02:07 | download the font files.
| | 02:09 | Typekit essentially takes care of the
formatting and the licensing for you.
| | 02:13 | You can choose from any of the fonts in
Typekit's library, which includes many
| | 02:17 | of the professional fonts
that designers are accustomed to.
| | 02:21 | Google fonts is very similar to
Typekit, except that it's a service that
| | 02:24 | only offers free fonts,
| | 02:26 | so there's no subscription charge.
| | 02:28 | The downside is that you may not be
able to find the font that you're used to,
| | 02:32 | but you should be able to
find a nice looking alternative.
| | 02:35 | If you're not in charge of implementing
the fonts on the final experience, be
| | 02:38 | sure to talk with your developer about
the fonts you'd like to include, and be
| | 02:42 | sure to provide them with any
of the font files you might need.
| | 02:45 | And don't forget to carefully choose
the fallback fonts that are used in your
| | 02:48 | page for browsers that do not support
the @font-face rule, as they may have an
| | 02:52 | impact on your site's overall appearance.
| | 02:54 | Now that you are aware of these new
capabilities, you can put them to work
| | 02:58 | in your designs.
| | Collapse this transcript |
| Working with application states and nonlinearity| 00:00 | A responsive design is almost, by
definition, an interactive design.
| | 00:04 | Each time the user interacts with your
design, it must respond in a way that is
| | 00:08 | appropriate to its context.
| | 00:10 | In a digital experience, these responses
could be considered application states.
| | 00:15 | Here I am in the Wayback Machine
of the Internet archive. This is
| | 00:19 | Adobe's homepage from 1996.
| | 00:21 | Early web pages were quite static.
| | 00:23 | The only state changes occurred when
the user navigated to a different page, and
| | 00:27 | there was generally a gap
in between that navigation.
| | 00:31 | Eventually, there were state changes
at the level of individual objects in
| | 00:34 | the form of rollovers.
| | 00:37 | With the adoption of Flash, and later
Ajax, state changes became woven into every
| | 00:41 | aspect of a Web site, with no need to
leave the current page. Here I am in Gmail.
| | 00:45 | When I click on a message, the page is
instantly updated, with no delay, and no
| | 00:50 | whitespace in between.
| | 00:52 | Here I am in Google Docs.
| | 00:54 | I have a document selected, and when I
go up to change the folder settings of
| | 00:57 | that document, I get a
type of lightbox overlay.
| | 01:01 | This modal panel has several elements
that had to be designed, including the
| | 01:05 | background, the border, the buttons,
and the tree menu in the middle.
| | 01:09 | Designers sometimes overlook these
state changes when building a static mockup.
| | 01:13 | The developer, however, cannot
avoid these state changes when building a
| | 01:17 | functioning experience.
| | 01:18 | A developer who is lacking information
will often be forced to guess as to the
| | 01:22 | appearance of these missing application
states, which will lead to a very unhappy designer.
| | 01:27 | Designing with application states in
mind means extending beyond the two
| | 01:31 | dimensions within your image editing software.
| | 01:33 | You might also need to think about
what's layered on top of the current
| | 01:36 | application state, as well as what
will happen to the experience over time.
| | 01:41 | As a designer who is responsible for
the visual elements, it's important to
| | 01:45 | mentally walk through the steps
yourself in order to consider the
| | 01:48 | additional states that appear.
| | 01:50 | How will those states look and
function on your target devices?
| | 01:53 | Here is a Google document
opened in the desktop browser.
| | 01:56 | If I go up to the Share button, I'll
get a modal panel that allows me to share
| | 02:00 | the document with other users.
| | 02:02 | Now here is that same panel laid
out in several different sizes.
| | 02:07 | On the mobile portrait size, as well as
the mobile landscape size, the modal panel
| | 02:12 | does not fit within the viewport.
| | 02:15 | The panel does fit within
the small tablet portrait,
| | 02:18 | so this design works well at the level of
the tablet, but does not fit on a smartphone.
| | 02:24 | If you don't explicitly design these
aspects, someone or something else will.
| | 02:29 | You should also consider how one
state transitions to another state.
| | 02:32 | Does that new state fade in, or
does it push something else off?
| | 02:36 | Here is a standard slider used by developers.
| | 02:39 | It has 16 different transition states.
| | 02:42 | As a designer, you might think about
which states fit your design best.
| | 02:45 | Here is the final site from Chris
Converse's iPad Web App course on Lynda.com.
| | 02:52 | Note how he has even accounted for how the
elements transition when the device is rotated.
| | 02:57 | I'll simulate that by
scaling the Web browser down.
| | 03:02 | There are also some additional
state changes that you might consider in
| | 03:05 | your responsive design.
| | 03:06 | Here is a demo of a product I'm working on.
| | 03:09 | In certain cases, it might be useful
for the user to have back and forth
| | 03:13 | navigation, such as on a tablet device.
| | 03:17 | In other cases, such as when the user
is on a desktop machine, I might want to
| | 03:21 | provide links, so that user can jump around.
| | 03:26 | Here's one of my favorite running sites
that also includes a lot of photographs.
| | 03:29 | When you click on a photo in the
blog post, it opens up a lightbox with a
| | 03:34 | gallery of all the
photographs in that particular post.
| | 03:37 | From here, you can navigate from photo to
photo, and you can also easily return to
| | 03:42 | the post by clicking
anywhere in the background.
| | 03:46 | You may also want to think about how you're
styling simple components in your design.
| | 03:50 | Here's the jQuery mobile ThemeRoller.
It allows you to style the user
| | 03:54 | interface elements within
your Web site or application.
| | 04:00 | Now that you're thinking in terms of
application states, you can include them in
| | 04:03 | the mockups you provide to the developer,
and you should run into fewer unpleasant
| | 04:07 | surprises later in your project.
| | 04:09 | I will walk you through several ways
to mock up and communicate application
| | 04:13 | states in the Design Solutions
chapter, and we'll cover user experience more
| | 04:17 | broadly in the next video.
| | Collapse this transcript |
| Designing with empathy| 00:00 | There's one last thing to cover before
moving into the next section, and that's
| | 00:03 | the importance of
empathy in a responsive design.
| | 00:06 | The success of any project's goals,
whether they be communicating a message, or
| | 00:10 | selling a product, will depend
heavily on the user experience.
| | 00:14 | If the user is frustrated with site
navigation, or content that is not appearing
| | 00:18 | properly, there is a good chance they
could leave your site, and close your app,
| | 00:22 | and never come back.
| | 00:23 | A good way to save yourself some time and
effort, as well as ensure the success of
| | 00:27 | your project, is to identify issues
early by putting yourself in the user's shoes.
| | 00:33 | The first step is to determine, who is
the user? What devices will the user
| | 00:38 | view the experience on? For what reason will
they be viewing the site, or using your app?
| | 00:42 | These critical questions should be
answered early in your meetings with the
| | 00:45 | client, so that you can determine
your target audience before you begin
| | 00:49 | designing the experience.
| | 00:52 | Once you have a picture in mind of your
target audience, you can begin to imagine
| | 00:55 | how they might use your experience.
| | 00:57 | Everyone involved in the project
will have certain interests to satisfy.
| | 01:01 | As the designer, you will
be the user's spokesperson.
| | 01:04 | If the design helps the user, it'll help
satisfy your client's interests as well.
| | 01:09 | Think about Amazon's 1-Click
experience, and how it translates into an
| | 01:13 | easier user experience.
| | 01:15 | Amazon spent a great deal of money
getting this functionality figured out, but
| | 01:18 | in the end, it paid off in their
user experience, and their bottom line.
| | 01:23 | At the beginning of the project, before
even simple wireframes exist, this will
| | 01:27 | largely be an imaginative exercise.
| | 01:29 | Try to walk yourself through the
potential user experience one step at a time.
| | 01:34 | How do you get from one page to the next?
Will this navigation be frustrating in
| | 01:38 | any way? What are your expectations
when you reach to this page?
| | 01:42 | Imagine you're on a touch device; do
you expect to be able to scroll when you
| | 01:45 | swipe, and is that built in to your design?
| | 01:49 | Take what you find from this imaginative
exercise, and talk with your developer
| | 01:53 | about making your design seamless.
| | 01:55 | As you work through the stages of the
project, be sure to test the experience
| | 01:58 | yourself with the target devices if
possible. Because you will likely be
| | 02:03 | designing novel experiences,
| | 02:04 | there may not be a rulebook available
to tell you how many pixels a toolbar
| | 02:08 | should be, or how an element should
transition. This is where empathy can help
| | 02:13 | improve your designs.
| | 02:14 | Keep your target users and their
experience in your head as you continue through
| | 02:18 | the steps of your responsive design workflow.
| | Collapse this transcript |
|
|
2. Job Roles and CommunicationExploring each role in the responsive design process| 00:00 | Responsive design can make the end-user's
life easier, but it can make the job
| | 00:04 | of those creating the design
much more complex.
| | 00:07 | By understanding the distinct roles
covered in this video, you can know where
| | 00:11 | your contributions will be most
effective, and it may help you find a career
| | 00:15 | niche that is appealing to you.
| | 00:17 | With the increasing complexity in digital
designs, specialization have emerged to
| | 00:22 | serve very specific needs.
| | 00:24 | Many of these new
specializations have their own acronyms.
| | 00:26 | These specialized topics can be associated
with a single job role, or even an
| | 00:31 | entire department of people.
| | 00:33 | What once was essentially a two person
workflow involving a designer handing off
| | 00:38 | to a developer now may
involve a rich rainbow of roles.
| | 00:41 | The information architect
plans the flow of information.
| | 00:45 | The user experience designer considers
the user's psychology, and storyboards
| | 00:50 | interaction, which the user interface
designer incorporates into the visual
| | 00:54 | elements of the experience, which the
interaction designer then snaps together
| | 00:58 | before passing the project
to the front end developers.
| | 01:01 | Each one of these roles is more
or less a specialized designer. These
| | 01:05 | specializations crop up to meet the
growing complexity of these design projects.
| | 01:10 | Even if you're not a designer, or a
developer, knowing that these specializations
| | 01:14 | exist will help you find the
right talent for the right projects.
| | 01:18 | As a designer, whether you realize it
or not, you're constantly faced with
| | 01:22 | decisions about whether to
specialize, or to generalize.
| | 01:26 | Your work situation will have a heavy
influence on your ability to specialize.
| | 01:31 | The more people on your team, the
greater opportunity for specialization.
| | 01:34 | If you're the only designer at your
company, and are responsible for all of the
| | 01:38 | tasks described, you will have
little choice but to be a generalist.
| | 01:42 | In any field, be it law, medicine,
academics, or design, the specialists will tend
| | 01:48 | to have the career advantage, because
more focus can be devoted to a single area.
| | 01:52 | Greater specialization also
requires more efficient communication.
| | 01:56 | As more cooks are added to the kitchen,
it's important to make sure everyone is
| | 02:00 | working from the same recipe.
| | 02:02 | Understanding eachother's roles,
and speaking a common language is key.
| | 02:06 | By common language, I
don't mean English or French.
| | 02:09 | I'm talking about how the same
words can have different meanings in
| | 02:12 | different disciplines.
| | 02:14 | Commonly used phrases, like back-end
development, can be used by different people
| | 02:18 | to mean very different things.
| | 02:20 | Visual designers commonly refer to
anything they can't see onscreen as back-end.
| | 02:25 | To a developer or interaction
designer, however, back-end development
| | 02:29 | specifically means server-side and
database related code, rather than the
| | 02:33 | client-side code, like JavaScript.
| | 02:36 | Be aware that vocabularies
will diverge as your team grows.
| | 02:40 | There's nothing wrong with this
shift, but it will require a concerted
| | 02:43 | effort during meetings and material handoffs
to ensure that everyone is on the same page.
| | 02:50 | In the next couple of videos, we'll
look at how designers and developers can
| | 02:54 | better understand each other.
| | 02:55 | For now, you should have a sense of just
how broad the job spectrum can be, even
| | 03:00 | within the design phase for
a responsive design project.
| | 03:04 | As you work on your projects,
you can pay attention to how you're
| | 03:07 | addressing each of the specialized
areas with your own efforts, or in
| | 03:10 | collaboration with others.
| | Collapse this transcript |
| Designer, meet developer| 00:00 | Unless you're comfortable implementing
the many aspects of the responsively
| | 00:03 | designed Web site, or mobile application,
you will likely be handing your visual
| | 00:07 | design off to a developer to
create the final product.
| | 00:11 | Designer/developer workflows are
notorious for communication breakdowns.
| | 00:15 | So let's dive in to the developer's
mind, and see what we can find out.
| | 00:19 | Nearly all projects these days
require a developer, especially when it comes
| | 00:23 | to responsive design,
| | 00:25 | so it's important that you're able to
communicate your ideas to the developer.
| | 00:29 | By understanding what's important to a
developer, and how he perceives his work,
| | 00:33 | the designer can avoid being surprised
by how the design has been implemented.
| | 00:38 | Start by pretending that you are a
developer, and you've just been handed a
| | 00:41 | mockup in Photoshop.
| | 00:42 | You have to turn this mockup into a
Web site, but don't worry if it's new to you;
| | 00:47 | I'll walk you through it.
| | 00:48 | First, try to forget that you
care about how the design looks.
| | 00:51 | Your job is to make it function.
| | 00:53 | You need to figure out how this set of
elements will fit together in an HTML structure.
| | 00:58 | You're concerned with matters of efficiency,
like, can this menu be reused? Can I
| | 01:02 | replicate those rounded corners with CSS?
| | 01:05 | Your job is to piece it all together.
| | 01:08 | You start by looking at the background color.
| | 01:10 | You don't necessarily care that it's a shade
of tan, or how it works with the other colors.
| | 01:15 | You're concerned about aspects like, is
it a solid? Does it have a repeating
| | 01:19 | pattern? Or, is that a single image?
| | 01:21 | Look at how the columns are laid out.
| | 01:23 | Will those have to shrink
as the screen gets smaller?
| | 01:26 | Will the navigation be standard
throughout, or will it vary on each page?
| | 01:30 | As a savvy developer, you are
always looking to reuse items.
| | 01:34 | There's a Share button at the bottom
of the page, but the designer didn't
| | 01:37 | provide a rollover state.
| | 01:38 | Does it have one? Does this trigger
some kind of pop-up? Is this the actual
| | 01:43 | button the designer even wants to be
used, or is this just a placeholder for
| | 01:46 | some kind of a widget?
| | 01:47 | Okay, you can take a
break from being a developer.
| | 01:51 | I don't want you to get a stress headache.
| | 01:53 | After diving into the thought process
for a brief moment, can you see how color,
| | 01:57 | type, element alignment, and other
design concerns might be the last thing on
| | 02:01 | your mind as the developer?
| | 02:03 | The developer has a whole host of
practical problems to solve as he works his
| | 02:07 | way through the page.
| | 02:09 | Some of them are familiar, and have
quick solutions, and some of them require a
| | 02:13 | great deal of thought and creativity.
| | 02:15 | Ambiguous elements, like the sharing
button, can slow this process down. In
| | 02:19 | many cases, the developer will try to
solve the problem with his best guess, and
| | 02:23 | move on to other problems.
| | 02:26 | Design allows for a meandering path;
testing ideas, and trying things on. The
| | 02:31 | designer might have tested many
colors and layouts with several variations
| | 02:35 | before arriving on the final design.
| | 02:37 | The developer, on the other hand,
already has an end goal in mind when he is
| | 02:41 | presented with his design.
| | 02:43 | The designer can debate with her colleagues
about whether her design "works",
| | 02:48 | but if the developer is working on a
contact form, and it does not send an e-mail
| | 02:52 | when submitted, his code does not work
in a very literal sense, and he cannot
| | 02:57 | convince anyone otherwise.
| | 02:59 | When given a choice to solve a problem
with a measurable outcome, or to solve an
| | 03:03 | abstract problem, like eliciting a
specific emotional response from a design, a
| | 03:08 | developer will always choose the
problem with the measurable outcome.
| | 03:12 | If you can communicate the aspects of
your design to a developer in these terms,
| | 03:17 | he will be in a better
place to address your concerns.
| | 03:20 | Also, take care to explain your
ideas, with the reasons behind them, using
| | 03:24 | visuals when possible.
| | 03:26 | Recall the problem that I noted in
the last video, using words that may have
| | 03:30 | different meanings for
the developer, like back-end?
| | 03:32 | If you add a visual explanation,
there's less chance of a misunderstanding.
| | 03:37 | So back in the Photoshop file, we can
help the developer along by including
| | 03:41 | specifics about how the Share button works.
| | 03:44 | Now that the designer has stood in the
developer's shoes, the next video will look
| | 03:48 | at what the developer can do
to understand the designer.
| | Collapse this transcript |
| Developer, meet designer| 00:00 | Just mentioning the word developer to
a designer usually elicits one of two
| | 00:04 | strong emotions: great
appreciation, or great frustration.
| | 00:09 | In order to create mutual appreciation,
it's first essential to understand what's
| | 00:13 | important to the designer.
| | 00:15 | Color is right at the top of that list.
| | 00:18 | The colors in the designer's
mockup are not suggestions.
| | 00:21 | They are exact specifications.
| | 00:23 | Another key component for
a designer is typography.
| | 00:27 | Typefaces also help to determine the
mood, and the level of professionalism in an
| | 00:31 | interactive experience.
| | 00:33 | Color and typography are issues of
importance across the board in all designs,
| | 00:38 | so each one will have its
own video later in the course.
| | 00:41 | Image quality and alignment are two
designer issues that present a special
| | 00:46 | challenge in responsive design, because
element positioning and element scaling
| | 00:50 | will potentially change on different devices.
| | 00:52 | Image quality is important, because it also
reflects upon the professionalism of the design.
| | 00:57 | The designer is more likely to notice
pixelization than the developer, because
| | 01:02 | the designer is constantly working on images.
| | 01:05 | Pixelization may not be noticeable to
everyone who views the site consciously,
| | 01:10 | but much of the success of a
design operates at a subconscious level.
| | 01:15 | Alignment is how design creates
order from chaos, or vice versa.
| | 01:19 | The designer aligns objects to
direct the viewer's eyes to certain key
| | 01:22 | elements on the page.
| | 01:24 | The question becomes, which alignments
are essential to maintain as the design
| | 01:28 | responds to different viewports?
| | 01:31 | When do you scale an element? When
do you swap an element? When is it
| | 01:34 | appropriate to omit an element entirely?
| | 01:38 | Any questions in this area absolutely
demand a conversation with the designer.
| | 01:42 | When in doubt, don't guess;
ask the designer.
| | 01:45 | It might help to think of talking
with designers as another programming
| | 01:49 | language that you can learn.
| | 01:50 | While it's important to ask questions
as you're implementing the final design,
| | 01:55 | it's even better to have input
and feedback before that point.
| | 01:58 | The final design reflects a huge
commitment on the designer's part,
| | 02:02 | so asking for changes at that
point will be more difficult.
| | 02:05 | Try to meet with the designer
early on to help guide decisions.
| | 02:09 | If you can participate in the
early client meetings, all the better.
| | 02:12 | Give yourself a chance to make
suggestions before anything is set in stone.
| | 02:16 | If you're able to understand what's
important to a designer, and you can
| | 02:20 | participate in the communication process,
this will put you in a position where
| | 02:23 | designers and clients are
begging to work with you again.
| | Collapse this transcript |
| Working with clients, producers, and decision makers| 00:00 | It's also important to communicate
with all the non-designers, and the
| | 00:03 | non-developers involved in your
projects, these include clients, producers,
| | 00:08 | project managers, and other decision makers.
| | 00:10 | These are the people who request the
projects, pay for the projects, manage the
| | 00:14 | schedules, and generally take care of
all the businesses that designers and
| | 00:18 | developers often prefer to avoid.
| | 00:21 | As a designer or a developer, it's easy
to think that you know better than the
| | 00:25 | client, and sometimes you do,
| | 00:26 | but that doesn't mean you don't still
have things to learn. Who would pay for
| | 00:30 | you to do what you enjoy if
there wasn't a client there?
| | 00:33 | If you neglect clients because you
think you know better, they may not be
| | 00:36 | there in the future.
| | 00:38 | You may think that a producer or a
project manager has it easy; just keeping
| | 00:41 | track of deadlines in a spreadsheet,
or setting up meetings in Outlook.
| | 00:45 | But if you were to start your own
business, and you were the only one to do
| | 00:49 | these jobs, you would find it very
difficult to do what you are doing now, be it
| | 00:53 | design, or development.
| | 00:54 | Talking to clients, calling vendors,
setting schedules, and crunching numbers
| | 00:58 | might soon overtake you.
| | 00:59 | Good project managers make
you better at what you do.
| | 01:03 | They reduce distractions, and they allow you
to gain more practice at honing your craft.
| | 01:08 | If you can learn what's important to
them, as well as to your clients, they can, in
| | 01:12 | turn, make you even better at what you do.
| | 01:14 | Let's look at some of the topics that we
designers and developers usually avoid.
| | 01:18 | I promise it will be
brief, and relatively painless.
| | 01:22 | The project manager is generally in
charge of the schedule, and setting
| | 01:26 | milestones to help collect materials that are
necessary for the project. How can you help?
| | 01:30 | If you are going to miss a milestone,
try to let the project manager know ahead
| | 01:34 | of time, so that they can
adjust the schedule accordingly.
| | 01:38 | Ultimately, the client dictates the
schedule. How can you help with that?
| | 01:42 | Focus on the underlying reason for
the deadline. Is there a conference that
| | 01:46 | this is being premiered at, or is the client
setting a deadline simply because you asked for one?
| | 01:50 | Try to have this conversation with the
client early. It's much easier to give them
| | 01:55 | a no about some particular deadline
before the client has committed money.
| | 01:59 | At that point, maybe you can
readjust, and work something out.
| | 02:03 | In terms of budget, you should work
closely with the project manager to determine
| | 02:07 | how much time and effort is involved.
| | 02:09 | Clients, project managers, and producers
will likely to have more knowledge as to
| | 02:13 | where this particular experience fits
into the larger narrative of the company.
| | 02:17 | This is probably the area where the
client will know much better than you.
| | 02:21 | The current project exists within
the larger context of the company's
| | 02:25 | products and services.
| | 02:26 | By listening to the business people, you
can ensure that what you've created fits
| | 02:31 | into that larger context, which
will make you look smarter in the end.
| | 02:35 | It's helpful to recognize your own expertise.
That's where you have the most to offer.
| | 02:39 | Business people often comment
about design elements, like color.
| | 02:43 | Learn to understand
what's behind those comments.
| | 02:46 | Sometimes they will suggest something
as specific as a particular typeface.
| | 02:50 | What they are really trying to get at
is something else, but they just don't
| | 02:54 | know how to describe it.
| | 02:55 | The classic book on negotiation, Getting
to Yes, suggests finding the underlying
| | 03:00 | interests, rather than arguing
with the other person's conditions.
| | 03:03 | In this scenario, the client's
condition might be, I read this article on
| | 03:07 | Palatino; it's supposed to
be the most readable font.
| | 03:10 | We should use Palatino in this project.
| | 03:12 | As a savvy designer, you are sitting
there thinking, a lot more went into your
| | 03:16 | font choice than that, but there's
no convincing the client that his
| | 03:19 | condition is wrong.
| | 03:20 | With a little thought, and some gentle
questioning you can find the underlying
| | 03:24 | interests that motivated the
client to make this suggestion.
| | 03:27 | It turns out the client is
very concerned about readability.
| | 03:31 | Now you can address the issue of
readability, rather than argue about a
| | 03:34 | particular font, or insert the font, and
fume about that incident to coworkers. By
| | 03:39 | addressing the client's interests, the
client will be happier, and you will feel
| | 03:42 | more respected for your skills.
| | 03:44 | The same rules also apply when
meeting with producers, and project managers.
| | 03:48 | So again, meet early, and ask questions.
| | 03:51 | The trick is to balance
delegation with participation.
| | 03:54 | Delegate the tasks like scheduling, so you can
focus on what you do: design, or development.
| | 04:00 | Participate throughout the project, so
that you're not unpleasantly surprised later.
| | 04:04 | If you understand what's important to
the people who make the wheels turn, you
| | 04:08 | can ask smart questions,
and provide better services.
| | 04:11 | The side benefit of pleasing this
group is that they are usually the
| | 04:14 | ones in charge of wages.
| | 04:16 | In this section, I have discussed why
it's important that designers, developers,
| | 04:20 | and business professionals all communicate.
| | 04:22 | The next three chapters will cover the
important aspects of each role in depth.
| | Collapse this transcript |
|
|
3. Design Considerations for DevelopersPlanning your colors| 00:00 | Color is one of the essential building
blocks of design. It's as integral to a
| | 00:05 | designer's layout as an if/then
statement is for a programmer's code.
| | 00:09 | A developer who understands the importance
of color in a design will have a much
| | 00:13 | easier time communicating with designers.
| | 00:16 | A particular color is as important as
a particular note in a piece of music.
| | 00:20 | A color scheme is as
important as the key of that music.
| | 00:24 | The key determines the emotional response
of the listener. A minor key creates a
| | 00:28 | sad mood, whereas a major key
generally creates a much happier mood.
| | 00:33 | The color palette on the left, with the
strong red, orange, and yellow might evoke
| | 00:37 | something like a street sign,
or a traffic light,
| | 00:40 | whereas the softer colors on the
right might evoke autumn leaves.
| | 00:44 | A good designer uses their intuitive
sense, as well as some algorithms found in
| | 00:49 | their design tools, to create colors
that work together in a particular way.
| | 00:53 | The underlying harmony is governed by
mathematical relationships between the
| | 00:57 | components and colors, just as the
underlying harmony between musical notes is
| | 01:01 | governed by the mathematical relationships
of the tones that make up the notes.
| | 01:06 | Here I am in Adobe Illustrator. This
might be a way the designer starts out
| | 01:10 | a project; putting some color swatches
together that evoke the right emotion for the design.
| | 01:16 | So I might start off by just trying
to eyeball something that works well;
| | 01:20 | adjusting the color.
| | 01:22 | In addition to that, I have a whole
bunch of tools that reflect the mathematical
| | 01:25 | properties in the underlying colors.
| | 01:28 | So I can actually go up and choose a
complementary color, and you can see it
| | 01:32 | actually works pretty well
with that original color.
| | 01:35 | I can also use the Kuler panel to
go through palettes that people have
| | 01:39 | already put together.
| | 01:40 | Any old red will not do, just as a B flat
is not a substitute for a B on the piano.
| | 01:46 | When a developer changes colors, it's as
if the transcriptionist has changed the
| | 01:50 | composer's notes when copying
them to a clean sheet of paper.
| | 01:54 | While your skills and duties as the
developer go far beyond transcription, it's
| | 01:58 | important to recognize
that color is not negotiable.
| | 02:02 | So let's take the red from the original
palette on the left, and all of the other
| | 02:06 | autumn colors from the palette in
the middle, and look what we have there.
| | 02:10 | We have a very ambiguous emotion. It's
not stoplight; it's not autumn leaves.
| | 02:14 | This may seem subtle at first, but try
looking at the colors for a little while.
| | 02:19 | In addition to the colors that the
designer has chosen, she is also often
| | 02:22 | obligated to stay within the company brand.
| | 02:25 | The designer is the steward of the brand,
| | 02:28 | so when the colors of a Website do not
match the branding guidelines, it reflects
| | 02:31 | poorly on the designer.
| | 02:33 | Onscreen are some examples of brand
guidelines. You can see, they are very
| | 02:37 | specific in the print colors and the
online colors that the designer is able to use.
| | 02:42 | If the designer has not made the colors
easily accessible to you, ask for hex colors.
| | 02:48 | If you're working with a designer who
is unfamiliar with the Web, make sure
| | 02:51 | they're working in RGB, rather than CMYK,
which is the color space that they would
| | 02:56 | normally use for print design, so that
they're not surprised by how the colors
| | 03:00 | are converted to the Web.
| | 03:02 | You can dramatically increase the
chances of success by paying careful attention,
| | 03:06 | and talking with the designer about color.
| | 03:09 | The success will be reflected in your
working relationships, as well as the
| | 03:13 | efficiency of the production cycle.
| | Collapse this transcript |
| Understanding typefaces| 00:00 | Typefaces are nearly, if not equally,
as important to a designer as color.
| | 00:05 | Typefaces also help to determine the
mood, and level of professionalism. Compare
| | 00:10 | the typefaces of the two Web pages onscreen.
| | 00:13 | The Web page on the left mimics its
theme of measurement and analysis with
| | 00:18 | the typefaces used.
| | 00:19 | The one on the right plays off
the creepiness of the film festival.
| | 00:23 | Typefaces can affect the type color of
a screen. The best way to see type color
| | 00:28 | is to squint at the screen.
| | 00:30 | See how the image on the left is much
darker than the image on the right, even
| | 00:34 | though the content is basically the same?
| | 00:36 | Type color can affect the
entire feel of a Web page.
| | 00:40 | Typefaces for the Web are an area
where the designer will probably need more
| | 00:44 | guidance than they do with color.
| | 00:46 | Talk with the designer about type
options early on, and what they might need to
| | 00:50 | do about font embedding.
| | 00:52 | The designer is likely to choose a
typeface early in the design process, so you
| | 00:57 | want to make sure you have the
conversation with them before then.
| | 01:00 | Fallback fonts should be chosen
by the designer.
| | 01:03 | The designer may not be familiar with
fallback fonts, so if they haven't provided
| | 01:08 | any, it might be an
opportunity to start a conversation.
| | 01:10 | If the designer is unfamiliar with
font embedding, you can point them to Font
| | 01:15 | Squirrel, Typekit, or Google Fonts.
| | 01:19 | The designer may also be restricted by
the brand to only use certain typefaces.
| | 01:23 | This is another area to tread very lightly.
| | 01:27 | Alignment of type is just as important as
it is with other elements on the screen.
| | 01:32 | Typefaces are just one area where a
designer's intensions may not be clear. In
| | 01:36 | many cases, the designer may not
realize that something is missing, and might
| | 01:40 | not even know to ask.
| | 01:42 | One of the central themes of this
course is to communicate, rather than make a
| | 01:45 | guess when something is unclear.
| | Collapse this transcript |
| When in doubt, ask| 00:00 | The most powerful action you can take
in your relationship with the designer
| | 00:04 | is to ask questions.
| | 00:06 | In most projects, a designer
hands off a mockup to a developer.
| | 00:10 | Here's that example in Photoshop again.
| | 00:12 | The developer uses whatever pieces of
the file are available, often creating
| | 00:17 | missing assets when necessary.
| | 00:19 | In this particular example, it has
several layers, which is very handy, but it
| | 00:26 | just as easily could have
been a flattened file.
| | 00:28 | The developer still has to go
through and figure out specific aspects.
| | 00:33 | Does this newsfeed stay this width
| | 00:35 | as it grows or shrinks?
| | 00:37 | Does that heading point to the full story?
| | 00:39 | Does the banner at the top link to the homepage?
| | 00:43 | None of this is available in the Photoshop file.
| | 00:45 | Inevitably, the designer's mockup
will lack aspects of the final product.
| | 00:50 | Otherwise, no more work would be required.
| | 00:53 | When faced with the gaps between the
mockup and the pieces required to complete
| | 00:57 | the final product, developers often
fill in the gap with their best guesses,
| | 01:01 | and the developer usually isn't even
aware of this step, because the missing
| | 01:05 | piece seems so obvious to insert.
| | 01:07 | Take this example in Dreamweaver.
| | 01:09 | I've got a live view here with a button
that has no active state when it's clicked.
| | 01:14 | So the developer might take it upon
himself to add an active state with a color
| | 01:20 | that he thinks makes sense.
| | 01:27 | But the designer hasn't
had any say in this choice.
| | 01:32 | If you can learn to recognize gaps
which are critical to the design, you can
| | 01:36 | save yourself future revisions.
| | 01:38 | Critical gaps are those that span the
categories discussed earlier in this chapter,
| | 01:43 | like color, typography, alignment, and scaling.
| | 01:46 | If you think the designer has left
something out that pertains to one of these
| | 01:50 | categories, ask the designer
for their input before proceeding.
| | 01:54 | 99 times out of a 100 a designer would
prefer to answer a question, instead of
| | 01:59 | seeing an unexpected result.
| | 02:01 | Imagine the text container onscreen is the
result of scaling down on a mobile device.
| | 02:07 | Notice how the body copy no
longer lines up with the heading.
| | 02:10 | This should be a red flag to you,
because it's one of the elements that's
| | 02:13 | important to the designer.
| | 02:15 | Because of the added complexity in a
responsive design project, you will likely
| | 02:20 | encounter more of these gaps, like
scaling issues, and design items that don't
| | 02:24 | translate well into a mobile environment.
| | 02:27 | By learning to recognize gaps, and ask
questions early, you can save yourself
| | 02:31 | from future revisions.
| | 02:33 | Additionally, this habit of asking
questions will likely help your interactions
| | 02:36 | with other colleagues, as
well as outside of work.
| | Collapse this transcript |
| Meeting with designers early in the process| 00:01 | As a developer on responsive design
projects, it's essential that you attend
| | 00:05 | early planning meetings
| | 00:07 | in order to help steer the projects
in directions that make sense from a
| | 00:11 | technical point of view.
| | 00:13 | Everyone present at early meetings
benefits from the chance to establish good
| | 00:17 | working relationships, as well as a chance to
get ahold of the entire context of a project
| | 00:23 | before it's been sped up by the
stress of an impending deadline. Developers
| | 00:27 | benefit from early
meetings in a few specific ways.
| | 00:31 | It gives you a chance to build functional
prototypes sooner, so that you'll be
| | 00:35 | less likely to be blindsided by a
difficult request that comes late in the
| | 00:38 | schedule, such as rewriting code in a
different language to work with a specific server.
| | 00:44 | An early meeting is also a
chance to make technical assessments.
| | 00:47 | In other words, it's a chance to say
no early, as well as present alternatives
| | 00:53 | before it is promised to the client.
| | 00:56 | Perhaps the features that the client
has requested can only be achieved with
| | 01:00 | a specific programming language, which isn't
available on the client's choice of server.
| | 01:05 | Since the project is not yet under way,
the client is able to make some calls,
| | 01:09 | and find an alternative server.
| | 01:11 | An early meeting is also a preferable
time to ask for necessary resources.
| | 01:17 | Perhaps you need to hire a
contractor, or purchase more server space.
| | 01:21 | This gives the client and the project
managers a chance to budget for these
| | 01:24 | resources, or to ask for a
more affordable solution.
| | 01:27 | There is more flexibility for large
shifts at the beginning of a project.
| | 01:33 | If you're not already invited to early
meetings, find out who is in charge of the
| | 01:37 | schedule, and ask to be included.
| | 01:39 | These early meetings are often
referred to as kickoff meetings.
| | 01:43 | Once you are in the meetings, it's
also important that you're proactive.
| | 01:46 | Even if you are shy, you are likely a very
smart person, capable of learning new skills.
| | 01:51 | Speaking at meetings, and negotiating
project specifications is another skill to learn.
| | 01:56 | It will pay off as much or more as
learning a new programming language.
| | 02:00 | After the meeting, let designers and
project managers know it was helpful to you,
| | 02:05 | and ask to be included in the future meetings.
| | 02:08 | Not only will your input benefit clients,
there will be times when the designer
| | 02:12 | can benefit from your suggestions
on how the design can be implemented.
| | 02:15 | Perhaps you can set up the files so
that they are easier to revise in the
| | 02:19 | future, or provide the client with
better search engine optimization.
| | 02:24 | You might also have suggestions like
single page navigation in order to have a
| | 02:28 | faster user experience, just like Gmail.
| | 02:31 | Once you have a seat at the table,
you're in a much better position to advocate
| | 02:35 | for the approaches that you
think make the most sense.
| | 02:38 | Imagine how much easier that will be.
Instead of getting handed an impossible
| | 02:41 | task, with an impossible deadline,
you get to help direct the project.
| | Collapse this transcript |
|
|
4. Development Considerations for DesignersUnderstanding what to provide to developers| 00:00 | Knowing what to provide your developer
colleagues can greatly increase your
| | 00:03 | chances of successfully
handing off your designs.
| | 00:07 | One of the most terrifying segments
of a project can be the handoff of
| | 00:11 | designs to a developer.
| | 00:13 | Once the developer has posted the final
mockup, they no longer have control, and
| | 00:17 | it's up to someone else
to realize their designs.
| | 00:20 | It's common to hand off a design to a developer
as a single image file; often a Photoshop file.
| | 00:26 | If the mockup is static, but the end
goal is a responsive design, this creates a
| | 00:30 | gap that the developer must then fill in.
| | 00:33 | The handoff is your opportunity to have
a say in how your experience will look
| | 00:38 | across different devices.
| | 00:40 | It would be impractical to try and cover
every gap by mocking up every single device.
| | 00:46 | Instead, you can provide a roadmap
that guides the developer on how to treat
| | 00:51 | different types of gaps.
| | 00:53 | As a designer, you can use your
visual skills to create guidelines for the
| | 00:57 | developer, just as you do when
you create visuals for your client.
| | 01:01 | One particularly effective method for
mocking up responsive designs for clients
| | 01:06 | is using Samantha Warren's Style Tiles.
| | 01:09 | Style Tiles are a great way to show your
concepts off to a client without overly
| | 01:14 | investing in small details.
| | 01:16 | If you look at the Style Tiles
Web site, you'll see some examples.
| | 01:21 | This example is really broad, and a
great starting place for sharing your
| | 01:25 | information with the client.
| | 01:26 | Style Tiles are a great starting place
to share your overall vision with the
| | 01:30 | developer, but you also want to
provide some specific details about how your
| | 01:34 | design will respond to different screen sizes.
| | 01:38 | You can compile these specifics into
a set of guidelines to produce a style
| | 01:42 | guide that is similar to what major
companies use as branding guidelines.
| | 01:45 | I will cover this type of style
guide, along with more examples, in the
| | 01:49 | design solutions chapter.
| | 01:51 | With a sense of what to provide with
your mockups, you can now be more confident
| | 01:55 | that your handoff to the
developer will be a smooth one.
| | 01:58 | The next few videos will focus on
specific strategies in designer to
| | 02:02 | developer communications.
| | Collapse this transcript |
| Working with pixel values| 00:00 | A potential sore spot in handing off a
design to a developer is when the pixel
| | 00:05 | values that the designer has included
in the mockup have not been maintained
| | 00:09 | in the final piece.
| | 00:11 | It's important to embrace fluid layouts,
or the ability for your Web site to scale
| | 00:16 | to different screen sizes
in your responsive designs.
| | 00:19 | It is fluidity, after all, that will
classify your design as responsive.
| | 00:24 | Joshua Sortino's portfolio does a
wonderful job of varying as the viewport changes.
| | 00:29 | As I scale the browser down, you can
see that the site does a fantastic job of
| | 00:34 | filling whatever space is available.
| | 00:36 | The great variability between devices
that might display your experience means
| | 00:41 | that your environment is uncontrolled.
| | 00:44 | You may want to consider the reasons
you chose your original pixel values.
| | 00:48 | For instance, in this design, the
margin between the logo and the main heading
| | 00:53 | was created to align the
heading with the body text below.
| | 00:56 | As the design has responded to accommodate
a smaller screen, however, the body
| | 01:01 | copy is shifted to the left, and that
original reason for the exact pixel value
| | 01:06 | is no longer relevant.
| | 01:07 | So it's really the alignment, in
this case, that needs to be optimized.
| | 01:12 | If you're not yet convinced that
pixel perfection is a thing of the past,
| | 01:16 | consider the following.
| | 01:17 | In addition to having both portrait
and landscape orientations, mobile devices
| | 01:22 | also have varying pixel resolutions,
so 50 pixels will display at completely
| | 01:27 | different real world
sizes depending on the device.
| | 01:30 | For example, the new Apple retina
displays have doubled the resolution of the
| | 01:35 | previous generation.
| | 01:36 | So your site could potentially display
at half the size, or twice the size, and be
| | 01:41 | pixelated, depending on the settings.
| | 01:43 | So you want to make sure to test
multiple generations, and talk with your
| | 01:47 | developer about these type of settings.
| | 01:50 | In addition to the varying resolutions,
there's also a capability to
| | 01:54 | automatically display Web pages at
completely different zoom levels, so one pixel
| | 01:59 | in your layout could
represent 3.5 pixels on the screen.
| | 02:04 | Zoom discrepancies can be managed to a
large extent with the viewport meta tag,
| | 02:08 | but the fact that this capability exists,
and it zooms in by default, should give
| | 02:13 | you some pause when it
comes to pixel perfection.
| | 02:16 | The Clean Air Challenge Web site, for example,
does a great job of embracing a mobile design.
| | 02:22 | As the viewport shrinks, the site
begins to look and function much more like a
| | 02:26 | mobile app, with large
buttons, and a vertical layout.
| | 02:32 | A better way to think about pixel
values in a responsive design is to think of
| | 02:36 | them as minimums and maximums.
| | 02:38 | For example, instead of having an exact
margin value of 15 pixels that applies
| | 02:42 | to any device, consider having a minimum
value that works on a smartphone, and a
| | 02:47 | maximum value that works well on a
large screen, and then perhaps having some
| | 02:51 | values in between. That way your design
will accommodate a wide array of screen sizes.
| | 02:58 | Another approach to positioning and
scaling is to think in terms of relative
| | 03:02 | sizing, such as percentages,
or ems, instead of pixels.
| | 03:06 | Relative sizing allows child elements
to grow or shrink with their container.
| | 03:11 | On this Web site, there's a comparison
of absolute pixel values at the left, and
| | 03:16 | relative percentage margins at the right.
| | 03:19 | You can see that the relative percentage
has scaled much better, and the comments
| | 03:23 | are nested in a much nicer way.
| | 03:27 | There's also an example of
relative font sizing.
| | 03:31 | By using ems or percentages to scale your
fonts, your entire design can scale together.
| | 03:37 | By starting with flexible expectations
about pixels, you can save yourself a lot
| | 03:42 | of frustration, and gear your
instructions to the developer in a manner that
| | 03:46 | better suits a responsive design.
| | 03:49 | In the Design Solutions chapter, I'll
walk through several ways to capture and
| | 03:52 | communicate your ideas in a
flexible, but clear manner.
| | 03:56 | For now, it's helpful to begin
thinking outside of the pixels.
| | Collapse this transcript |
| Testing| 00:00 | There are several advantages to testing
your design throughout the stages of a project.
| | 00:05 | Functional testing is the designer's
opportunity to see what the developer's
| | 00:09 | implementations will look like,
prior to the final delivery, while the
| | 00:13 | stakes remain much lower.
| | 00:15 | This will also give the developer
more time to ask questions about how the
| | 00:19 | design might function.
| | 00:21 | Functional testing is targeted, and
specific. Rather than building your entire
| | 00:26 | experience, instead, functional testing
involves building a prototype of just a
| | 00:31 | single element, or feature,
such as a style dropdown box.
| | 00:35 | So, here's an example of a
functional test for a Web site.
| | 00:39 | The goal here is to see
how the page scales.
| | 00:43 | So, already, as I'm scaling, I notice
that the big image at the top doesn't line
| | 00:48 | up with the menu items, or the header.
| | 00:50 | That might be something, as the designer,
I'd like to point out to the developer.
| | 00:54 | The developer can be updating this, and
working on this as I'm creating the final
| | 00:58 | design. And I can see how
it scales all the way down.
| | 01:03 | Another functional test might involve
swipe functionality, and how it fits into
| | 01:07 | your navigation scheme.
| | 01:09 | The functional prototype can be built
with simple wireframe boxes, or stand-in
| | 01:13 | graphics, depending on
the goal of your test.
| | 01:16 | If you're presenting the clients,
wireframes, and placeholder graphics help
| | 01:20 | put the focus on the functionality,
and not the look and feel of the
| | 01:23 | individual elements.
| | 01:25 | In addition to the advantage conferred
on the designer, functional testing also
| | 01:30 | helps spread out the developer's time,
rather than squeezing in much of the work
| | 01:34 | near the end of the project when
all of the design has been complete.
| | 01:37 | Here is a representation of how a
traditional designer-developer workflow might
| | 01:42 | look in terms of the hours spent
across the length of the project.
| | 01:46 | And here's how the time looks when the
designer and the developer work together to
| | 01:49 | create functional prototypes over
the entire course of the project.
| | 01:53 | Your functional prototypes may also
provide more opportunities to receive client
| | 01:58 | feedback before the design
has been solidified.
| | 02:01 | Including functional testing in your
schedule will make your designs more agile,
| | 02:05 | and your collaboration more fluid.
| | 02:07 | Meeting early is an essential
first step in the testing process.
| | Collapse this transcript |
| Meeting with developers early in the process| 00:00 | Meeting in the initial stages of a
project is advantageous for everyone
| | 00:04 | involved, but there are specific
reasons a designer should ensure that the
| | 00:08 | developer is involved
at those early meetings.
| | 00:11 | Functional testing is part of a broader
category that I'll refer to as fewer surprises.
| | 00:17 | The more involvement the developer has
with the designer, as well as the client,
| | 00:21 | the more informed the
developer will be about the project.
| | 00:24 | The developer's input at these meetings
will help to set the client expectations,
| | 00:28 | as well as the designer's expectations.
| | 00:31 | This will also lead to fewer
surprises when the project is complete.
| | 00:35 | By closing the feedback loop
between the designer, the client, and the
| | 00:39 | developer, you can cycle through
drafts of ideas and revisions much faster.
| | 00:44 | Imagine you're under a deadline with
a publisher to write a book that will
| | 00:47 | have your name on it.
| | 00:48 | When you hand in the version that will be
printed, would you rather it be draft 1, or draft 3?
| | 00:53 | If you can accelerate the drafting
process with a couple of meetings, you won't
| | 00:57 | have to do this work later in the
project, and your final project will be more
| | 01:01 | polished as a result.
| | 01:03 | Lastly, meeting early can help you
commit to only what you can deliver.
| | 01:07 | If the designer and the developer are
meeting, as well as testing prototypes,
| | 01:11 | they will know exactly what can be
delivered to the client, so you won't have to
| | 01:15 | backpedal from any hasty promises.
| | 01:18 | Because of the added variables introduced
by flexible layouts, and functionality,
| | 01:22 | communication becomes even more
critical in a responsive design.
| | 01:26 | If your developers are not yet included
in kickoff meetings, and the design
| | 01:30 | meetings that follow, let the project manager
know that you want to include the developer.
| | 01:35 | Now that I've covered the advantages of
inner-office communication, the next
| | 01:38 | chapter focuses outward,
at client communication.
| | Collapse this transcript |
|
|
5. Client CommunicationsSetting expectations| 00:00 | In addition to communicating early
and often with your team members, it's
| | 00:04 | important to explain the ins and outs of your
responsive design solutions to your clients.
| | 00:09 | This extra layer of communication
provides a degree of protection against
| | 00:13 | unpleasant surprises later in the
project, and will hopefully save you from
| | 00:17 | some unnecessary rework.
| | 00:19 | There are two important areas that
you need to focus on when initiating a
| | 00:23 | responsive design project with the
client, especially a client who may be new
| | 00:28 | to responsive design.
| | 00:29 | The first area is functionality.
| | 00:32 | The client should be made aware early
in the process that the experience you
| | 00:36 | are designing will look and feel different
on different devices, and why this is the case.
| | 00:41 | Don't be afraid to spell out things that
you assume the client may already know.
| | 00:46 | You might be surprised how much
the client has not yet considered.
| | 00:49 | After all, they are probably spending their
day thinking about different subjects entirely.
| | 00:54 | When possible, try to share mockups
for different devices in different screen
| | 00:58 | sizes, so your client is not
surprised when reviewing the final product.
| | 01:03 | Schedule a few early reviews of the
functional design before committing too
| | 01:07 | many development hours.
| | 01:09 | The client will feel good knowing you
have a working prototype, and you will feel
| | 01:13 | confident that you have their blessing.
| | 01:15 | I will cover some techniques to create
responsive design mockups in the Design
| | 01:19 | Solutions chapter, so that you can
include visuals in your client discussions.
| | 01:24 | Budget is the second most important
area in client communications, and I will
| | 01:28 | cover that in the next video.
| | Collapse this transcript |
| Understanding budgets| 00:00 | The additional thought involved in
creating a responsive design usually
| | 00:04 | translates into more time and cost than
that involved in a traditional Web site.
| | 00:09 | Be sure to discuss potential costs
with your client up front to ensure that a
| | 00:13 | responsive design
experience fits in their budget.
| | 00:17 | A client will generally say yes to
every cool feature you propose; that's until
| | 00:22 | they have heard the price.
| | 00:23 | At that point, they may have such high
expectations of what the experience should
| | 00:27 | be that even though they can't afford
it, they have lost interest in a cheaper
| | 00:31 | solution, and the project can stall.
| | 00:34 | Clients always want the latest and the
greatest, but they often don't realize
| | 00:38 | that there's no bells and whistles
button in Photoshop; at least not yet anyway.
| | 00:42 | Talented people are required to connect
all the pieces of a responsive design.
| | 00:47 | More people translates into more cost.
| | 00:50 | The added functionality involved in a
responsive design means more development
| | 00:54 | time, and more browser testing as well.
| | 00:57 | Truly responsive designs will almost
necessarily require a developer's touch, and
| | 01:02 | generally speaking, developer's
time costs more than designer's.
| | 01:06 | All that said, if your client does have
the budget, and the desire, there is an
| | 01:11 | argument to be made that a good
responsive design is a bargain.
| | 01:14 | After all, it's a single design, rather
than one for every device out there.
| | 01:20 | In most cases, it will be helpful
to anchor your price projections by
| | 01:23 | providing alternatives.
| | 01:25 | For example, contrast the cost of a responsive
Web site with the cost of a Web site,
| | 01:30 | plus an Android app, plus an iPad app.
| | 01:33 | Your responsive Web site will
probably look inexpensive when compared to
| | 01:37 | developing several custom solutions.
| | 01:40 | You may also find it useful to break
the pricing down into component parts.
| | 01:44 | It's likely that some features may be
more important to the client than others.
| | 01:49 | If a less important feature has a large
price tag, it may be an easy item to cut.
| | 01:54 | If you can reach a consensus with
your client on the budget, and the
| | 01:57 | functionality before you've committed
too much time, you will hopefully feel
| | 02:01 | safer moving forward on the project.
| | Collapse this transcript |
| Incorporating follow-up meetings| 00:01 | A post-launch wrap-up meeting is a great
way to evaluate the success of a project.
| | 00:06 | These meetings can take place internally
with your own team, as well as with your client.
| | 00:11 | After a project is completed, and your
Web site or mobile app is live, you are
| | 00:15 | probably ready to move on, and do
something completely different, but the
| | 00:19 | information that you collect in a quick
wrap-up meeting is invaluable in helping
| | 00:23 | you to improve future projects.
| | 00:25 | Because a responsive design project
is generally more complex, there's
| | 00:29 | potentially a lot more to
learn with a wrap-up meeting.
| | 00:32 | Here are some topics that
you might discuss internally.
| | 00:35 | How did the project go?
| | 00:37 | Did the technology work well?
| | 00:39 | Do we need to hire more people?
| | 00:42 | Did you spend too much time working late?
| | 00:43 | It may not always be a pleasant task
to relive any failures that occurred
| | 00:47 | during a project, or to relive any
difficult interactions with a client, but
| | 00:52 | hopefully evaluating these experiences
will save you from repeating any
| | 00:56 | mistakes in the future.
| | 00:58 | These meetings can also be celebratory.
| | 01:00 | When a project has gone well, you can bask
in the success with your colleagues, and
| | 01:04 | try to understand what went right,
so you can do it again in the future.
| | 01:08 | External information gathering can
take a couple of different forms.
| | 01:12 | You could send an online survey
to your clients.
| | 01:15 | This would ensure that all the clients
were asked the same questions, and you
| | 01:18 | could then compare responses
between clients.
| | 01:21 | If the survey is anonymous, the client
may be more honest about problem areas.
| | 01:25 | By having an actual meeting with the
client, you will also be able to gather more
| | 01:29 | subtle information from their tone,
and perhaps their nonverbal cues.
| | 01:33 | If you have willing clients, you
could have a meeting, as well as collect
| | 01:37 | survey information.
| | 01:38 | Whatever method you choose, collect
your information promptly while it's still
| | 01:42 | fresh in the client's mind.
| | 01:43 | Here some topics you might discuss externally.
| | 01:46 | You might want to ask the client what
they thought of your service. Could you do
| | 01:50 | anything better? What kind of
aspects do they think you could improve?
| | 01:54 | Talk with your project manager about
including wrap-up meetings in the schedule.
| | 01:58 | Before engaging the client, and perhaps
even at the beginning of a project, write
| | 02:01 | down a set of goals about
what kind of feedback you'd like.
| | 02:05 | In other words, figure out how you will
measure success when the project is complete.
| | 02:10 | In your first responsive design project,
your goal may simply be to create a
| | 02:14 | beautiful, working, responsive experience.
| | 02:16 | In your second responsive design
experience, you might have a little bit
| | 02:20 | more confidence, so you may try to make this
project more cost-effective than the first.
| | 02:25 | These are goals that you can then
assess with your internal wrap-up meeting.
| | 02:28 | As you get more projects under your
belt, your goals may start to focus more
| | 02:32 | specifically on the client, and the project.
| | 02:34 | For example, perhaps you're interested in
repeat business with a client you admire.
| | 02:39 | You have just completed your first
project. You can then check your success in
| | 02:43 | the external wrap-up meeting by asking
the client, would you come back to our
| | 02:47 | firm for your next project?
| | 02:49 | By determining your goals at the beginning
of a project, you will know exactly
| | 02:53 | which questions you need to
ask at the end of the project.
| | Collapse this transcript |
|
|
6. Design SolutionsCreating diagrams| 00:00 | The first aspect that will need planning
is the overall flow of the experience.
| | 00:05 | You can diagram the flow of user experience
on a whiteboard, or using flowchart
| | 00:09 | software, like OmniGraffle,
or Microsoft Visio.
| | 00:13 | In Web design, these diagrams are
generally referred to as site maps.
| | 00:18 | By starting with your user flow, you
will know exactly which navigational
| | 00:21 | elements need to appear on each screen.
| | 00:23 | For example, you may have a linear flow,
where the user clicks next in order to
| | 00:27 | advance through each screen. Or you
may have a nonlinear navigation, where the
| | 00:32 | user can jump to any page at any point,
in which case, you might have a menu bar.
| | 00:37 | Once you have a draft of your diagram,
you can set a meeting with the rest of
| | 00:42 | your team in order to get feedback.
| | 00:43 | The developers can help you with how
the navigation might work, and let you know
| | 00:47 | if there are any improvements
you can make,
| | 00:49 | to ensure that the navigation
that you've envisioned can be
| | 00:52 | feasibly accomplished.
| | 00:53 | If the navigation is complex, you may
want to begin with functional testing to
| | 00:57 | ensure that what you have
envisioned can be accomplished.
| | 01:00 | With your team on board, you can set a
meeting with your client to make sure that
| | 01:03 | they approve of where the
project is going.
| | 01:05 | Getting client feedback at this stage
can save you from last minute revisions,
| | 01:09 | and help you to set your client's
expectations early in the process.
| | 01:13 | For the purposes of this course, you
only need to have a basic understanding of
| | 01:17 | the diagram stage, and why
it's important your workflow.
| | 01:20 | To dive deeper on this
topic, check out OmniGraffle5:
| | 01:23 | Creating Website Maps and
Wireframes on Lynda.com.
| | 01:28 | A solid diagram with everyone's buy in
can guide you through the next couple of
| | 01:32 | steps in your project, and allow you
to start wireframing individual screens
| | 01:36 | with more confidence.
| | 01:37 | I will cover wireframing in the next video.
| | Collapse this transcript |
| Creating wireframes| 00:01 | By the time you've reached the diagramming
and wireframing stages of a project,
| | 00:05 | you should probably have a good idea of
which devices you are targeting.
| | 00:08 | Reaching the stage will probably
involve a combination of client input, and
| | 00:12 | internal decision making that
results from your technology planning.
| | 00:17 | A wireframe is a simple, no frills sketch
of what your experience will look like.
| | 00:21 | The no frills part is key, because the
goal of wireframing is to save you time.
| | 00:26 | Many designers do lose wireframing their
head, or skip this stage altogether, and
| | 00:31 | it works just fine in many projects.
| | 00:33 | However, wireframes are an essential
piece of the responsive design puzzle.
| | 00:38 | Wireframes will help you test multiple
layout solutions, as well as communicate
| | 00:42 | those solutions with developers
and clients.
| | 00:45 | It's better to keep your wireframes
simple, because any window dressing can cause
| | 00:48 | confusion with the client
about how the final site will look.
| | 00:52 | For instance, if you have a piece of
stock art as a placeholder, the client may
| | 00:56 | focus on the stock art, trying to make
comments about whether they like the art
| | 01:00 | or not, rather than
focusing on the layout.
| | 01:02 | If your wireframe is simple,
there is nothing but layout.
| | 01:05 | There are several applications
available to help you with wireframing.
| | 01:09 | Adobe Fireworks is a great tool for
prototyping, because there are several
| | 01:13 | components that are already
built in the common library.
| | 01:16 | You can take those components,
and quickly customize them.
| | 01:21 | The downside is that some of these
components can be a little buggy.
| | 01:24 | Adobe Photoshop has a great deal of
control; the downside with Photoshop is that
| | 01:35 | you have to do all of it yourself.
| | 01:37 | There isn't a lot of pre-built
artwork for wireframing.
| | 01:39 | Balsamiq mockups is probably my
favorite tool for wireframing.
| | 01:44 | The great thing is that the visuals are
so simple, there is no way to confuse it
| | 01:49 | with the final product,
| | 01:50 | and nearly any type of Web element that
you can think of exists as a component
| | 01:54 | that can be customized.
| | 01:57 | And then there is classic pen and paper.
Drawing your wireframes out certainly
| | 02:01 | won't be confused for the final sight.
| | 02:03 | To dive deeper on wireframing, check
out Website Planning and Wireframing;
| | 02:07 | Hands-On Training on lynda.com. There
is an entire chapter on wireframing.
| | 02:12 | Because wireframes can be designed fairly
quickly, I highly recommend creating a
| | 02:17 | wireframe to cover each of your
target devices, and then talk with your
| | 02:21 | developers and your clients to get approval.
| | 02:23 | Once your wireframes are built and
approved, you can start designing the
| | 02:27 | visuals of your experience.
| | Collapse this transcript |
| Building a responsive style guide| 00:01 | The true test of your workflow occurs when
the design is handed off to the developer.
| | 00:06 | Historically, this step has been
fraught with frustration. Comp sheets are a
| | 00:10 | great way to use your visual communication
skills, to ensure that your design
| | 00:14 | is understood and implemented
by the developer.
| | 00:17 | The term comp is short for
comprehensive design, or composite design.
| | 00:22 | In a designer/developer workflow, the
comp is a designer's most powerful tool for
| | 00:27 | visual communication.
| | 00:29 | Traditionally, comps are single image
files that indicate to a developer or a
| | 00:34 | client how the design
should look when it is complete.
| | 00:36 | Unfortunately, a single image file does
not provide enough information regarding
| | 00:41 | how an experience will
respond to varying screen sizes.
| | 00:45 | The question becomes, how do you communicate
your responsive design to the developer?
| | 00:50 | Style Tiles are a great starting point.
| | 00:53 | They help you focus on the design
elements, or the ingredients, rather than
| | 00:57 | producing fixed images.
| | 00:58 | But you'll need to provide the
developer with more information in order to
| | 01:02 | complete the final project.
| | 01:04 | It would be impractical to
design for every possible setup.
| | 01:07 | For instance, it's probably not necessary
to create separate mockups for devices
| | 01:12 | that differ only slightly
in their pixel dimensions.
| | 01:15 | So what's the solution?
| | 01:17 | Put together a style guide similar to
what corporations use for branding that
| | 01:21 | allows for interpretation,
with clear boundaries.
| | 01:24 | Your responsive style guide should
include necessary design elements, such as
| | 01:28 | color, typefaces, any UI elements, such
as modal dialogs, any logo treatments,
| | 01:35 | or anything else that is
relevant to your design.
| | 01:37 | If you've planned well, and met with the
developer all along, very few aspects of
| | 01:42 | the style guide should come as a
surprise when you make the final handoff.
| | 01:46 | Your application will likely have to
respond to different modes of interaction.
| | 01:51 | Will it use mouse interaction? Touch?
Audio? DPS? Camera? Accelerometer?
| | 01:59 | Communicating these problems between
a designer and a developer has been a
| | 02:02 | problem for a long time,
| | 02:04 | but it's even more extreme in the case
of responsive design, because you have to
| | 02:08 | take into account different modes
of interactions on different devices.
| | 02:12 | Designers aren't necessarily used to
thinking about multiple states, like hovers,
| | 02:16 | and click states, but a thorough
responsive style guide should cover those
| | 02:20 | elements as well, so the
developer won't have to make guesses.
| | 02:23 | There is yet one more gap you may
want to elaborate on as you hand off the
| | 02:27 | design to the developer.
| | 02:28 | What happens over time? Do elements
enter the screen? Do they fade away?
| | 02:33 | You may decide to include additional
animation in a responsive design project
| | 02:38 | when and where your design
is responding to a change.
| | 02:40 | For example, when your experience is
viewed on a tablet, and it's rotated from
| | 02:45 | portrait to landscape, or vice versa,
you may wish to animate the elements into
| | 02:49 | their new positions.
| | 02:51 | You should include these type
of thoughts in your style guide.
| | 02:54 | And most importantly, your responsive
style guide needs to show how your design
| | 02:58 | will be rendered on your target devices.
| | 03:01 | With your responsive style guide in
hand, you can now sleep a little easier as
| | 03:05 | you hand off the design to the developer.
| | Collapse this transcript |
|
|
7. Team IntegrationAcquiring skills| 00:00 | You're probably aware by now that
working in digital media requires constant
| | 00:04 | growth and learning.
| | 00:06 | There are three directly motivating
factors to acquiring new skills: the
| | 00:10 | possibility of greater pay, more
career options, and the chance to enjoy
| | 00:15 | your daily work more.
| | 00:16 | If you can find something within your
work that you really enjoy, you will
| | 00:19 | naturally seek ways to improve your skills,
which will make you more valuable to an employer.
| | 00:25 | There are also secondary benefits of
acquiring new skills, such as the ability
| | 00:29 | to take new types of projects, and new
clients, and improved workflow, or reduce
| | 00:34 | costs from no longer having to
contract out a certain skill.
| | 00:38 | So when does it make
sense to take on a new skill?
| | 00:41 | If you are busy,
will it make you less busy?
| | 00:43 | It might help to figure out a
particular problem before settling on a
| | 00:48 | particular solution.
| | 00:49 | For example, do you have to contract
out simple CSS edits on an ongoing basis?
| | 00:55 | Maybe it's worth learning some basic CSS.
| | 00:57 | How soon will you see a benefit?
| | 00:59 | Well, in the case of learning the CSS,
you'll probably see a benefit immediately.
| | 01:03 | Will I enjoy this more? That's
probably the most important question. Perhaps
| | 01:08 | there is no immediate need, but if
you're really interested in learning to
| | 01:11 | animate, that's as good reason as any,
because your interest will help motivate you.
| | 01:16 | You can learn new skills by taking online
courses, like what you're doing right now.
| | 01:21 | It's also great to attend conferences, and
seminars, and learn from those around you.
| | 01:25 | One final consideration when
looking at what you'd like to learn:
| | 01:29 | technologies come and go. If you focus
on learning new techniques instead, you
| | 01:34 | will transcend passing technologies,
and you will be more equipped when the
| | 01:38 | next hot technology comes along.
| | Collapse this transcript |
| Hiring staff| 00:01 | At a certain point there's only so much
one person, or two people can do. You may
| | 00:05 | need to look at acquiring staff for
your team, and the complexity of responsive
| | 00:09 | design jobs may necessitate
greater numbers than you are used too.
| | 00:14 | How will you know when it's time to hire?
| | 00:16 | Well, the verge of collapse is a good
indicator. It might be that some of your
| | 00:20 | services are lacking.
| | 00:21 | The founder of Balsamiq Studios noticed
that he couldn't maintain the same level
| | 00:24 | of customer support without
hiring more people.
| | 00:27 | The need to hire people can be an
indication of growth. You may ask yourself
| | 00:31 | questions like, is this the recurring
need? And do you have ongoing work, or more
| | 00:36 | projects scheduled in the future?
| | 00:38 | There are a few factors to
consider in hiring staff.
| | 00:41 | Do you work in a small
company, or a large company?
| | 00:44 | Are you self-employed?
| | 00:45 | What kind of hiring
policy does your company have?
| | 00:48 | Will you be able to search remotely, or
will you be limited to local talent only?
| | 00:54 | Which new roles will you hire for?
| | 00:56 | If your current employees are wearing
multiple hats, you may have to figure out
| | 01:00 | how to divide up the roles.
| | 01:01 | When you determine that you need to
hire staff, talk to your manager and HR about
| | 01:05 | the hiring process of your company,
and let them know you have a need.
| | 01:09 | Don't assume they know your team is
overworked; they may be focused on other things.
| | 01:14 | Depending on the company, and the
economic situation, you may have to hire a
| | 01:18 | temporary worker first. This can make
it slightly harder to find candidates.
| | 01:23 | If there is no budget for new staff
members, or your needs or intermittent,
| | 01:27 | hiring a contractor for a short period
of time may be an effective approach.
| | 01:31 | I'll cover contractors in the next video.
| | Collapse this transcript |
| Working with contractors| 00:00 | Contractors can provide a great stopgap
when you have specific needs in your project.
| | 00:05 | Unlike an employee, you or your
company won't be paying payroll taxes, or
| | 00:09 | insurance, or providing equipment,
or software for a contractor.
| | 00:13 | Because the contractor foots their
own expenses, a contractor's rates will
| | 00:17 | generally be higher than what
you'd expect to pay an employee.
| | 00:21 | All the expenses associated with an
employee reflect the longer term commitment
| | 00:25 | between the employer and employee.
| | 00:27 | If you have a specific non-recurring
need, like a custom video player for one
| | 00:31 | Web site, a longer term commitment
just doesn't make a lot of sense,
| | 00:35 | so this would be a good
situation to hire a contractor.
| | 00:38 | It may be that you'd like to know how
to build a custom video slideshow, but
| | 00:42 | you're too busy with your existing
duties to watch tutorials, and learn this new
| | 00:46 | skill before the project is due.
| | 00:48 | You may find that specific needs like these
come up more in responsive design projects.
| | 00:53 | Planning will help you locate
resources before the eleventh hour.
| | 00:56 | There are many places to find contractors
online. There are specific sites
| | 01:01 | dedicated to both designer
resources, and developer resources.
| | 01:05 | Cultivate relationships before you need them.
| | 01:08 | Another great resource to find contractors
are conferences specific to your workflow.
| | 01:13 | That way, when the need comes up,
you know exactly who to call.
| | 01:17 | Generally, you'll have a less contact
with a contractor, because they probably
| | 01:20 | won't be working in your office,
| | 01:22 | so you need to make sure that you have
clear and detailed mockups, and you stay
| | 01:26 | in communication. This will help
you save on costs with contractors.
| | 01:30 | Strategic use of contractors can help
you meet your clients' responsive design
| | 01:34 | needs, as well as help your team
through the busier months of your calendar.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:01 | Before we go, I just want to give you a
few more resources to help you with the
| | 00:05 | responsive design workflow.
| | 00:06 | Whether you're a designer, or a
developer, A List apart is a great general
| | 00:10 | resource for all things for
responsive design.
| | 00:14 | You can also find several great articles
on Smashing Magazine. And whether you
| | 00:21 | are a designer, or a developer, make sure
you check out David Hogue's Interaction
| | 00:25 | Design Fundamentals course.
| | 00:28 | Much of this course has been about
improving workflow by having the designer and
| | 00:32 | the developer understand each other better.
| | 00:34 | So in that spirit, I've put together
some design resources for developers, and
| | 00:39 | some development resources for designers.
| | 00:41 | So if you are a designer, you can
check out these courses on Lynda.com.
| | 00:46 | You don't have to understand everything,
but going through and getting the
| | 00:49 | general idea will definitely help
you in working with the developer.
| | 00:53 | You can check out Joe Marini's Mobile
Web Design & Development Fundamentals,
| | 00:58 | James Williamson's HTML5:
| | 01:00 | Structure, Syntax, and
Semantics, and James Williamson's CSS:
| | 01:05 | Core Concepts, and these should give
you some good ideas as to what the
| | 01:08 | developer is working on in
a responsive design project.
| | 01:13 | And if you are a developer, I highly
recommend going to the library, and getting
| | 01:17 | a basic book on design fundamentals.
| | 01:19 | The Elements of Graphic Design by
Alexander White is an excellent resource, as
| | 01:24 | is Graphic Design School by David Dabner.
| | 01:28 | And if you're looking for a quicker
overview, there are some great articles
| | 01:31 | by Garr Reynolds; one Graphic Design
Fundamentals, and another on Why design matters.
| | 01:39 | Thanks for watching, and
good luck on your projects!
| | Collapse this transcript |
|
|
