Web Design Basics in Adobe Dreamweaver CC

Developing a new website

Before you begin any web design project for yourself or for a client, you need to answer three important questions:

  • What is the purpose of the website?
  • Who is the audience?
  • How do they get here?

What is the purpose of the website?

Will the website sell or support a product or service? Is your site for entertainment or games? Will you provide information or news? Will you need a shopping cart or database? Do you need to accept credit

Why You Need Responsive Design for Your WordPress Site

You’ve probably heard of Responsive Web Design (RWD),, the idea that your website will adapt to the screen on which it’s being viewed. Can you believe the first article published on it was written in 2010? The iPhone was 3 years old, Android was just picking up steam, and the iPad was about a month old at the time. Mobile interactions were important, but not completely in-your-face important. Now it’s the end of 2013 and designing for mobile could not be more important. There are countless articles, books, conferences, and stats to back up the fact that people are using the mobile web. We need to develop responsive sites no matter what platform we are using, weather it be static sites, a platform like Squarespace, or a Content Management System (CMS) like WordPress.

Some Stats

WordPress is an incredibly popular CMS; so popular in-fact that it powers almost 20% of websites. There are over 73,000,000 websites on WordPress.com alone– that’s not counting people who host their own version of WordPress. It’s estimated that in 2014, one quarter of new websites will be powered by WordPress. Finally, in a study of 100,000 websites using CMSs, WordPress

Animal, Vegetable, or Mineral? Steve Krug on Why Users Like Mindless Choices


  • It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.

Web designers and usability professionals have spent a lot of time over the years debating how many times you can expect users to click (or tap) to get what they want without getting too frustrated. Some sites even have design rules stating that it should never take more than a specified number of clicks (usually three, four, or five) to get to any page in the site.

On the face of it, “number of clicks to get anywhere” seems like a useful metric. But over time I’ve come to think that what really counts is not the number of clicks it takes me to get to what I want (although there are limits), but rather how hard each click is—the amount of thought required and the amount of uncertainty about whether I’m making the right choice.

In general, I think it’s safe to say that users don’t mind a lot of clicks as long as each click is painless and they have continued confidence that they’re on the right track—following what’s often

Learn Adobe Dreamweaver CC for Web Authoring Getting the Big Picture

Human beings are incredibly visual creatures. Our brains can process more information when we view a picture or

Sketching on the Go Fluid Freehand Sketching with Adobe Illustrator Draw

A versatile vector application for inking sketches and drawings on the go, Adobe Illustrator Draw lets you create freeform vector artwork using a brush, pens, and more. Layers provide flexibility. Via Creative Cloud, images created in Adobe Illustrator Draw can be exported to Adobe Illustrator CC .1.0 and later as vector files, with editable paths.

With Adobe Illustrator Draw, you can sketch using your finger, a passive stylus like the Wacom Bamboo Stylus Solo, or the pressure-sensitive Adobe Ink stylus.

In this project, we’ll focus on getting acquainted with Adobe Illustrator Draw and sketching freehand. I drew the Plumerias sketch shown in Figure 1 from my imagination.

The completed Plumerias drawing shows sensitive thick to thin lines drawn with the Brush tool, set off by a patch of color behind the flowers. I used the Brush tool to draw colored strokes in the center of the flowers. To isolate these elements of the drawing, I used layers.

Figure 1 The finished drawing of

Editing and Combining Shapes and Paths in Adobe Illustrator CC

Getting started

In Lesson 3, “Using Shapes to Create Artwork for a Postcard,” you learned about creating and making edits to basic shapes. In this lesson, you’ll take basic shapes and paths and learn how to both edit and combine them to

How to Become a UX Leader Understanding the Psychology of Users

After any amount of time in the web industry, you’ll most certainly hear a coworker or a boss or a client refer to your users as “dumb.” They talk about how we have to “dumb down” our application interfaces, design for “the lowest common denominator,” and try to make our applications “idiot-proof.” Once in a great while, someone says to try “the mother test,” banking on the idea that if our mothers can use our applications, anyone can.

Designers say it themselves once in a while. The really terrible designers say it repeatedly.

“Well, you can only hold their hands so much.”

Thing is, it’s not true. Our mothers are not so stupid that we can effectively use them as the litmus test for online idiocy. Nor is anyone else. Nor is it a good idea to fall for the hype of stupid users.

A lot of designers have become convinced at various points in their careers that even the people they respect, love, and admire turn into complete morons the second they open a web browser. And designers forget that even the smartest people they know are often no smarter than anyone else when it comes to using technology.

There are so many things

A Marriage Made in Illustrator

In the graphics world, we all know that Illustrator = vector and Photoshop = raster. It’s been that way since the dawn of digital graphic time. But as these tools have developed, there has been some cross-pollination of sorts.

I can’t tell you how many times I’ve wanted to create a postcard, website design, or whatever that required me to use both vector and raster elements. While Illustrator is definitely stronger at dealing with vector, you can also import raster images you create elsewhere and make certain transformations to them without leaving Illustrator.

In this article, I want to show you how Illustrator integrates raster content, and discover what we can and can’t do.

Placing and Updating Raster

First off, Illustrator is not meant to be a raster image editing program. That’s what Photoshop and other programs like it are for. But, it can place and link to image files like PSD, PNG, TIF, JPG, and more.

Placing images in Illustrator is almost identical to how you do it in InDesign. There’s even a shortcut for placement (Cmd+Shift+P or Ctrl+Shift+P). By default, images are linked when you place them. That means if the original image is edited in Photoshop, for instance, it can be updated

Adaptive Web Design Designing Experiences for People

  • “Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.”

The one constant on the Web is change. There’s always a new design fad; a new darling language, framework, or tool; a shiny new device to view it on; or new ideas of what it means to be “on the Web.”

It’s exceptionally difficult to wrap your head around an industry that is constantly in flux. It makes my head hurt, and if you’ve been working on the web for a while, I suspect you might feel the same.

Having worked on the Web for nearly two decades, I’ve seen the cycle play out over and over. Java applets, Shockwave, Flash, Prototype, jQuery, 960gs, Bootstrap, Angular, React…. Technologies come and go, but the Web remains. Screens went from tiny to huge and then back to tiny again, but the Web remains. Walled gardens were built and then torn asunder to make way for “app” stores and (yes) more walled gardens, but

Huge Time-Saving Features in Illustrator

Would I presume too much if I were to say you could stand to work faster in Illustrator? I could—and I wrote the book on Illustrator, literally. Illustrator is a big program with lots of tools and features, but we all get stuck in our ways, don’t we? In this article, I really wanted to expose a bunch of time-saving features in Illustrator—some widely used, some not so much—explain what each is, and point you in a direction where you could find out more if needed.

So let’s stop wasting time reading this opening, and get to saving time in Illustrator. The list of time saving features we will cover is as follows:

  • Layers
  • The Appearance Panel
  • Selections
  • Global Colors
  • Recolor Artwork
  • Graphic Styles
  • Blends


Yes, I had to start the list with layers. Why? Because although most of us have pretty good intentions when it comes to layers, we usually don’t live up to our own hype. How many times have you cursed at a file because you couldn’t somewhat quickly select a series of objects or you wanted to add a mask to only certain artwork? Well, layers are the unsung hero of Illustrator and, if used properly, can save you tons of time in the long

Top 10 Reasons Why Illustrator CC Is Great for Web Design

As a web developer, I work with a designer to create awesome (we think) sites for our clients. We use a variety of tools for concepting, wireframing, content creation, code generation—which is essentially our web workflow. We always seem to come back to the same tools, and Adobe Illustrator is one of them. Why? Didn’t responsive design kill the static design process? Not exactly. Did it make it harder? Yes. But Illustrator has tools and features that we use for a variety of reasons, from creating simple mockups (wireframing) or content, to full-blown responsive designs.

I’m not trying to convince you to switch tools. Your workflow may be the best for you. Maybe better than mine, but the way content is evolving on the Web—mobile optimized, leaner, cooler—we have all been taking a long hard look at the tools we use, to see whether they are the best choices for what we need to do.

Illustrator is part of our web workflow for these major reasons:

  • Resolution independence
  • SVG, PNG, GIF, JPG—no problem
  • Hosted and icon fonts
  • Pixel perfection (working with grids)
  • Wireframe or full-blown design—you decide
  • Plays well with raster
  • Symbols and other time-saving features
  • Existing framework integration
  • Generates interactive prototypes
  • Extracts CSS

Let’s explore each of these 10 reasons in a

The Power of the Creative Cloud and Illustrator CC

With the June 2015 release, Adobe Illustrator is more connected than ever before to other Adobe apps using Libraries and the Creative Cloud. The recently introduced new features along with existing Creative Cloud features mean workflow enhancements for us all, as you’ll soon see.

In this article, you’ll take a look at all of cross-sharing capabilities that the Creative Cloud affords us when working with Illustrator.

Sharing Is Easy with Libraries

As a Creative Cloud subscriber, you’re given a certain amount of “cloud” storage for your content that can be accessed from within the Adobe applications, mobile apps, and more—basically anywhere. Saving content into your Creative Cloud folder syncs that content with the Creative Cloud and allow you to access it from anywhere.

While that is still the case, in late 2014, Libraries were introduced as a powerful way to create, categorize, share, and store your favorite colors, brushes, text styles, graphics, and vector images in one easily accessible place—the Libraries panel. Once again, your Creative Cloud storage lets you access your content from anywhere. The key feature of the Libraries panel is the ability to store not only artwork (files like an .ai file), but also colors, styling, and more in an easily

New Ways to Draw

When I used to think of drawing in Adobe Illustrator, all I could envision was the Pen tool—the mainstay of vector creation. But as Illustrator has evolved over the past few versions, new and improved ways of drawing have been added. No longer will you be judged for your Illustrator prowess based on how well you’ve mastered the Pen tool alone; now a host of other tools and methods are available.

This article examines some of Illustrator’s latest drawing features. We’ll look at the evolution of the Pen tool and explore the new Curvature tool. The Pencil tool also has some new tricks up its sleeve, and we’ll see it work its magic.

Let’s jump into each of these improvements.

Evolution of the Pen Tool

The Pen tool remained relatively untouched for version after version of Illustrator, but that situation changed recently. The tool has several new features and improvements that make it easier to use for drawing and editing.

The first major improvement (if you see it that way) is the addition of “rubber banding,” or the path preview. As you click with the Pen tool to add points to a path, a preview shows how the preceding path would look if you simply

Enhancing PDF Documents

You can modify PDF documents by rearranging, cropping, deleting, or inserting pages; editing text or images; or adding multimedia files. You can also add navigational aids such as bookmarks and links.

Examining the work file

You’ll work with conference materials for the fictitious Meridien Conference. The presentation has been designed both for print and for online viewing. Because this online presentation is in the developmental phase, it contains a number of mistakes. You’ll use Acrobat to correct the problems in this PDF document.

  1. Start Acrobat.
  2. Choose File > Open. Navigate to the Lesson04 folder, select Conference Guide.pdf, and click Open. Then choose File > Save As, rename the file Conference Guide_revised.pdf, and save it in the Lesson04 folder.
  3. Click the small arrow on the left side of the window to open the navigation pane, if it’s not already open.

Dreamweaver Meets the Challenge of Changing Times

Dreamweaver is the venerable warhorse of web development IDEs. It has outlived not only Microsoft FrontPage, which was released the same year (1997), but also FrontPage’s successor, Microsoft Expression Web. More recently, a challenge has come from Dreamweaver’s young stable mate, Adobe Muse, but Dreamweaver shows little sign of stepping aside, mainly because Muse and Dreamweaver target different markets. Muse is squarely targeted at designers who shudder at the thought of working with code, whereas Dreamweaver expects users to at least understand HTML and CSS, even if they don’t want to type everything manually. Most of all, Dreamweaver owes its longevity to the way it has embraced changes in web development. Just how much the program has changed is obvious as soon as you open a web page in Dreamweaver CC 2014.1.

Designing in the Browser Without Leaving Dreamweaver

Dominating the left side of the screen is the huge new Extract panel, a dream come true for every web developer tasked with creating a web page from a Photoshop comp. The Extract panel enables you to upload Photoshop’s PSD files to the Creative Cloud, and it makes extracting images and CSS seem like child’s play. (We’ll examine the Extract panel in more

Optimize Your Web Animation Workflow

The animation code found on most sites is nothing short of a mess. If there’s one thing experienced motion designers miss about the old, ugly days of Flash, it’s a structured approach to motion design.

The contemporary approach to structuring animation code is twofold: leverage the workflow features of an animation engine (in this case, Velocity.js) to make your code more terse and expressive, and use code organization best practices so that it’s easy to modify your work later.

Say goodbye to deep-nesting JavaScript callbacks and to dirtying your stylesheets with unwieldy CSS animations. It’s time to up your web animation game.

CSS animation workflow

In an attempt to better manage UI animation workflow, developers sometimes switch from JavaScript to CSS. Unfortunately, once animations reach a medium level of complexity, CSS animations typically result in a significantly worse workflow.

Issues with CSS

While CSS transitions are convenient when used sparingly in a stylesheet, they’re unmanageable in complex animations sequences (for example, when all elements sequentially load into view upon page load).

CSS tries to address this issue with a keyframes feature, which lets you separate animation logic into discrete time ranges:

@keyframes myAnimation {
   0% { opacity: 0; transform: scale(0, 0); }
   25% {

Screen-based Thinking Let’s Make an App

I really don’t know when. Like all relationships, it seemed to happen in the blink of an eye—from the blur of whatever we were doing before, to a passionate, unquestioning love for the modern, handsome, beautiful interface of the moment: apps.

Maybe it was these gently whispered sweet nothings from all the way back in 2009:

“What’s great about the iPhone is that if you want to check snow conditions on the mountain, there’s an app for that.”1

Forget that the National Ski & Snowboard Retailers Association reported that only 2.6 percent of Americans actually downhill ski—or that they did so only about eight days a year2 when these nothings were first whispered.3 When we heard that siren song, nothing else mattered. Love and reason? Well, they’re like oil and vinegar.

The commercial continued. Our pulses quickened. “And if you want to check where exactly you parked the car . . .”

Don’t tease me. We all know how to end that phrase. Six beautiful trademarked words that may have unintentionally fenced in this generation’s limitations on technological creativity.

There’s an app for that.™

Forget that 780 million4 people in the world,

Web Design Basics for Adobe Dreamweaver CC

Developing a new website

Before you begin any web design project for yourself or for a client, you need to answer three important questions:

  • What is the purpose of the website?
  • Who is the audience?
  • How do they

Writing Functions and Closures in Swift

We’ve covered a lot up to this point in the book: variables, constants, dictionaries, arrays, looping constructs, control structures, and the like. You’ve used both the REPL command-line interface and now Xcode 6’s playgrounds feature to type in code samples and explore the language.

Up to this point, however, you have been limited to mostly experimentation: typing a line or three here and there and observing the results. Now it’s time to get more organized with your code. In this chapter, you’ll learn how to tidy up your Swift code into nice clean reusable components called functions.

Let’s start this chapter with a fresh, new playground file. If you haven’t already done so, launch Xcode 6 and create a new playground by choosing File > New > Playground, and name it Chapter 4. We’ll explore this chapter’s concepts with contrived examples in similar fashion to earlier chapters.

The Function

Think back to your school years again. This time, remember high school algebra. You were paying attention, weren’t you? In that class your teacher introduced the concept of the function. In essence, a function in arithmetic parlance is a mathematical formula that takes an input, performs a calculation, and provides a result, or output.

Mathematical functions

13 Nifty Things About Macaw The New Application for Designing Responsive Websites and Prototypes

Macaw (see Figure 1) is a new application for building responsive websites and prototypes visually. “New” in this case means less than a year old, having been released to the public in March 2014. You might have heard of its Kickstarter campaign, or read about it somewhere online, but statistically speaking, you probably aren’t familiar with Macaw yet. If you’re a working web designer or developer, and you’re interested in making responsive websites that work on many types of devices, you should absolutely check it out.

Figure 1 The Macaw UI, showing the macawbook.com project.

The Macaw website gives a nice glance at what sets it apart from the old-school visual web design applications, but in this article we’re going to dig a little deeper and talk about some of the other things that are exciting and interesting about Macaw.

1: Breakpoints

In responsive web design, we use CSS media queries to create breakpoints, which tell a browser, “Here’s a condition where we want to change things around in some way with CSS.” Breakpoints are most commonly based on the width of the window or device (for example, “when the browser window is at least 600 pixels wide, do this”). Writing media queries