Archive by Author

Adobe Flash Catalyst and Flex for Designers with Rob Huddleston

20 Jun

Books by Rob Huddleston

Adobe Flash Catalyst

Catalyst is middleware. Start in Illustrator or Photoshop, then pull in project using Catalyst. Convert to Flex project, then go to Flash. Catalyst does have very basic drawing tools and could be used for wireframe or a very basic prototype. Biggest challenge will be training designers to create things in Illustrator or Photoshop that will work well in Catalyst. Fireworks has the ability export as .fxg file which can be imported into Catalyst. It’s important to remember, Catalyst is a 1.0 application. It’s stable, but there are obvious capabilities that are missing.

Complete round tripping with Illustrator and Catalyst. A plug-in is needed for Photoshop and Catalyst and it’s not as seamless. Catalyst is creating code, Flex projects are written in ActionScript and MXML.

Best Practices for Designers

  • The web is not print, as different from print as video is from print.
  • Design for interactivity.
  • Don’t overuse interactivity. Realize when you’re enhancing and when you’re making something obnoxious.
  • Stay organized. Become obsessed with meaningful layer names. Rename layers, group them logically.
  • Plan your layer structure.
  • Use a naming convention. Figure out logical naming convention and stick to it.
  • Do not link to external files.
  • Design assets to be duplicated. Come up with a way in your naming convention to notate these.
  • Create outlines for text with filters and effects and text with uncommon fonts.
  • Do the right things in the right order in Catalyst.
  • Use components in Catalyst, everything in Catalyst becomes a component.
  • You don’t have to be a Flex developer, but understand Flex.

Other thoughts on Flash Catalyst best practices

Adobe Flash Catalyst CS5 best practices

Developers are from Mars, Designers are from Venus with Chad Udell

19 Jun

What is the difference between us?

Let’s start with some generalizations.

  • Developers are killjoys, squashing creativity to make a deadline or taking the easy way out to implement features within an application.
  • Designers are fun, but reckless, they create great work but aren’t concerned with the bottom line.

A little reality please.

We all want to create really cool stuff that delights our users. We must work together, have a rudimentary understanding of each others disciplines.

Change is needed. Designers need to be more practical and be able to move on when goal is achieved. You must remember the scope of the project. Developers use a mantra of release early, release often. This might be something designers could learn from. Web applications are evolving and things can change post-launch, or in phases. Developers must realize that design does matter. Nothing will ever be completely resolved, Wabi-sabi. If code can be agile, why can’t design be?

Integration Points

Process

Do you have a process? Having a defined process will get you much farther ahead of the game than someone who hasn’t gotten started. “Four D’s,” Define, design, develop and deliver. These four points must communicate throughout every step in the process. It’s the job of each group on the team to define what they need to get their work done effectively.

Workflow

Do developers produce wireframes, do designers? Which is appropriate? If designers are in communication with client and understand their needs, it’s more appropriate to have them do wireframes. If developers keenly understand client expectations and have regular communication with client, they should design or create wireframes. There are times when it’s appropriate for developers to lead a project and others when a designer is appropriate.

Integration Points

File organization and directory structure. We shouldn’t be arguing over how things are named. Directory structure is not a battlefield, but try to make naming make sense and shouldn’t include names, version numbers, dates, etc. Deep Thoughts On File Naming Conventions.

Versioning

You will need to sell the benefits of this to your designers. Maybe it’s not the best idea. Versions is user-friendly SVN for Macintosh. Service called Assembla does hosted versioning, ticketing, hosted workspaces.

Taxonomy

Standardize the way you talk about things. Do we call them wireframes, block diagrams, something else? Do designers know what vectors, arrays, objects, etc. are? Are you using a lot of jargon? Art history language?

The Perfect Prototype with John Farrar

19 Jun

Workflow is all about solving problems.

“Nobody knows what they want, until they see it.”

jQuery UI Themes recommended.

Site Design

When you think of any web site, you think of something visual. If you’re going to have a perfect prototype, why not work with a technology where you can use templates, libraries and patterns and apply a skin to change the look. Clients will often push back. You can push back too, just do it in a friendly way, you’re managing the push back.

Skinning is more than personality. If you can take your prototype and you can apply your company skin, people are going to feel better. When you’re doing your skin design, it’s all about the persona of the company you’re designing for.

Page Design

Usability is not optional. We know what a page does because we created it, when someone else sits down to use our application, do they know what it does, why it exists?

Page Intelligence

These principles can be extended to ASP and other server side scripting engines. They are in the process of building a reference library for this.

Prototyping: A Component for Successful Projects with Chris Griffith

19 Jun

Prototyping is incomplete version of software being developed with a subset of features of the end product.

Why Prototype?

  • Proof of concept. Will an idea even work?
  • Design validation. Design is organic, so prototyping gives you an idea how something feels.
  • Management buy-in. Helps to create a shared vision.
  • Reduce misinterpretations. For stakeholders, developers, team members.
  • Save time and money. Find and fix process problems early. Overcome design imperfections – often, real world data will change design.
  • Power of show and tell.

Guidelines for Prototyping

  • Short timeframes. A day, a week. Get something out there, iterate often.
  • Build only what you need.
  • Don’t be afraid to throw it out.

Types of Prototyping

Low Fidelity – Quick to develop, allows for exploration of ideas, can be more difficult to conduct user studies, zero coding. Includes activities such as paper prototyping using pen and paper, OmniGraffle. Carolyn Snyder wrote the book on Paper Prototyping.

Medium Fidelity – More real user experience, longer design and development time, still limited functionality. Use tools such as Axure, simple HTML, Balsamiq, PowerPoint, Napkee.

High Fidelity – Closer to reality. Greater design requirements. More development time. Can serve as reference platform for other groups (Engineering, QA, Marketing). Use tools such as Ajax with HTML, Flash Catalyst, Flash Builder, Axure, Balsamiq.

User Testing

Put real people in front of your product or service.

Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems - Book

Pitfalls of Prototyping

Be aware of the fidelity trap.

“Looks Done to me! Ship it!”

Prototyping: A Practitioner’s Guide – Book

Designer to Developer Workflow Conference in Kansas City

19 Jun

D2W Sessions

D2W Keynote with Doug Winnie

Flash Platform, From Start to Finish – Book

“Workflow is about building a relationship.”

Building a relationship with those on your team, project stakeholders, and the project itself.

Design and development embody many different disciplines.

Design Disciplines

  • Visual Design
  • Layout Design
  • Interaction Design
  • Motion and Audio

Developer Disciplines

  • Architecture
  • Scripting and Coding
  • Data
  • Content and Structure

Each person offers a unique combination of these disciplines at varying levels. Design and  development must respect each other. Each of us have our own experience in both areas.

Adobe Creative Suite 5

Adobe CS Review allows stakeholder comments and feedback throughout the design process.

Adobe Flash Catalyst

Adobe Flash Catalyst has really nice features for building interactive prototypes and allows export to browser-based or Adobe AIR application. Click asset in Flash Catalyst and file opens in appropriate application. After edited and saved, content is updated in Flash Catalyst.

Adobe Flash Professional

Now can create mobile applications for mobile, including Android and other platforms.

Workflow Lab – Beta 2

Not a project management tool. Doesn’t have aspect of duration. Has ability to show time, but is a visual reference only. Create project workflows and define how team will work together. Link to web sites, local files or can export assets into a single folder and archive assets and workflow and how they came together. Once the project has started you can categorize different items within the project.

Dreamweaver

New features in Dreamweaver 5. HTML5, Media Queries, CSS Inspector, Improved Live View with Navigation and CMS Integration.

First Impressions – Home page content & design

16 Jun

What is the first impression of a customer who visits your web site? Today, I visited the Prudential home page where I was greeted with the content and imagery below.

First impressions of Prudential

  • This guy has a lot of money.
  • He probably doesn’t understand day-to-day life of an average American.
  • Does it really take this much space to say that Prudential is stable?
  • How does a picture of the CEO help to back up this idea?
  • Why is so little of the home page devoted to the activities one might come to the site to complete?

Prudential Home page on 06/16/10

What are your first impressions of Prudential?

Next, I visited the Principal Financial Group home page. While some would argue the Principal home page isn’t as visually appealing, just look at the number of things you can do from the home page.

First impressions of Principal Financial Group

  • I can do a lot of things from the home page.
  • The site is very information-rich.
  • There are multiple links to primary activities a user might come to the site to complete.
  • A few photos on the site, but I can figure out where to learn more about rolling over funds from an existing 401k plan.

Principal Home page on 06/17/10

What are your first impressions of Principal Financial Group?

Safari 5 and CSS3 Selectors – A near win!

8 Jun

Results from the CSS3 Selectors Test at CSS3.info

Safari 5 (5533.16)

From the 43 selectors, 41 have passed, 0 are buggy and 2 are unsupported.

Chrome 5.0.375.55:

From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported.

Firefox 3.6.3

From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported.

CSS3 Selectors Not Supported in Safari 5

CSS3 selectors not supported in Safari 5 are, :link and :visited. Why didn’t Apple get to these two CSS3 selectors prior to Safari 5 release.

IE6 nearing extinction? Not really, 2010 browser stats

2 Jun

CNN proclaims, Internet Explorer 6 finally nearing extinction

Except, not really. See below for latest browser statistics from our consumer/physician clinical information web site, which gets about 2 million visits or 5 million page-views per month.

Internet Explorer 6 — 9.7% in October 2010, down from 17.8% in January 2010.

2010 web browser stats by percent of visits

Note: Graph last updated November 2, 2010.

CSS3 Generators & Tools

13 May

If you’re trying to use CSS3 now, you might run into frustration when trying to figure out the vendor prefixes and subtleties that go along with it. Here are CSS3 generators and tools, I’ve found helpful along the way.

CSS3 Generators

CSS3 Tools

Visual Design Essentials for Non-Designers with Dan Rubin

13 May

Affordance

Something should look like what it does. If you over design you can break usability.

Rules

Fitts’s Law – Bigger buttons are faster.

It’s about balance and proportion.

Create patterns for margin and padding. Removes arbitrary decisions and ensures consistency.

Margin, padding and font-size are related to create a feeling of balance.

Patterns make it harder to make a mistake. Arbitrary decisions cause imbalance.

Are elements aligned along the left side, elsewhere?

Hierarchy communicates importance. Size explains hierarchy, larger elements are more important.

Color is more subjective, it’s more difficult to apply rules. Design solves problem, color tells a story.

Use photography to create color palette. Adobe Kuler allows this by uploading a photo.

Content

Design is about what best supports the content.

Most sites are based around text, unless you’re designing a photo gallery.

Relative text sizes create balance.

Leading = line-height in CSS

Range kerning = tracking or letter-spacing in CSS. Sometimes negative, has the most impact on larger type.

We read based on letter and word shapes.

Widows, fix using non breaking space between last two words in a paragraph. WIDON’T is JavaScript automatically does this.

Common mistakes

Line-height, there should be just enough space to differentiate one line from the next.

Improper treatment of emphasis. It shouldn’t distract the reader.

Hanging punctuation, use text-indent: on element

Primes versus quotes. “”  vs “  ”

Start without color to remain distraction free. Use as few visual elements as possible.

Grids

Another simple pattern to contain and organize content which allow design without guessing.

Nice, but only guides. Design doesn’t always have to align.

Simplify

Simple is often an improvement, often the best thing you can do is remove things.

Simplify the color scheme, typography and layout. Give typography structure, using relative type sizes.

Critiques

Critiques are good to help realize the easy things to fix.

Communicate your thoughts. Conduct with your team, and ask questions. Ask to see the goodness. Focus your efforts on what’s right, this will expose to you what’s not right and also what you need to protect in the design.

A good design critique.

← Older Entries
Newer Entries →