Posts Tagged ‘Techniques’

We are pleased to present below all posts tagged with ‘Techniques’.

Mojo Motors’ Responsive Redesign With Fireworks: Visual Design Stage

In the previous article in this series, I discussed our ideation and initial prototyping process. We covered details on how to use Adobe Fireworks to set up a responsive design wireframe, reusable components, prototypes and ways to share designs.

Mojo Motors' Responsive Redesign With Fireworks: Visual Design Stage

In this article, we’ll share how we used Adobe Fireworks in our iterative visual design process, along with other useful tips.

Read more...

Rethinking Responsive SVG

If you haven’t seen Joe Harrison’s responsive icons technique yet, you’ll most probably be impressed as much as I was when I first discovered it. In this article, I’d like to explore what we can do with SVG beyond “traditional” scalable vector graphics that are used to replace bitmap PNGs.

Rethinking Responsive SVG

In fact, we can see SVG as an independent module that encapsulates CSS for the customization of views as well as the responsive behavior that also encapsulates JavaScript for the interaction logic. Now, let’s dig a bit deeper into this technique.

Read more...

A Detailed Introduction To Custom Elements

You’ve probably heard all the noise about Web Components and how they’re going to change Web development forever. If you haven’t, you’ve either been living under a rock, are reading this article by accident, or have a full, busy life which doesn’t leave you time to read about unstable and speculative Web technologies. Well, not me.

A Detailed Introduction To Custom Elements

Web Components are a suite of connected technologies aimed at making elements reusable across the Web. The lion’s share of the conversation has been around Shadow DOM, but probably the most transformative technology of the suite is Custom Elements, a method of defining your own elements, with their own behavior and properties.

Read more...

Creating Responsive Prototypes With Adaptive Views In Axure RP 7

Responsive Web design has vexed people who build prototypes since the techniques came into use several years ago. While responsive design is an extremely elegant way to handle coding for multiple device types when executed with HTML and CSS, the prototyping tools available to UX professionals have not delivered testable or demonstrable experiences of the same quality. That changed recently with the adaptive views feature that is part of the new Axure RP 7.

Creating Responsive Prototypes With Adaptive Views In Axure RP 7

Creating responsive prototypes without writing code is now possible with Axure RP 7’s new adaptive views feature. The feature enables you to create one page in Axure RP with several “views.” The view displayed on a given device is determined by the width of the device’s screen.

Read more...

How To Make An Effective Style Guide With Adobe Fireworks

I started with style guides like any other obsessive-compulsive designer: with the desire to make it simple to maintain and grow a design. Plus, knowing which component to use in a given situation is nice, too, right? Since making this a regular practice, I’ve found it’s been like having a nice combination of a CSS class and a pattern library all in one.

How To Make An Effective Style Guide With Adobe Fireworks

One of the first questions, understandably, is why use Fireworks for a style guide? Well, for me, it’s mostly because of symbols and styles. Sure, you could use similar things in Photoshop, but I find Fireworks’ implementation to be smarter.

Read more...

Useful Learning Resources For Web Designers

Fortunately, learning is not limited to only a small minority of people anymore; it is not even limited to visiting a school or a university. The Internet makes it possible for us to distribute knowledge at a small price, and is full of resources to expand everyone's knowledge on an enormous variety of topics.

Useful Learning Resources For Web Designers

Since learning is a lifelong task that doesn't stop after pursuing a certain academic certificate, this round-up is not only dedicated to beginners. It's for everyone who wants to become an expert in a certain field or is simply curious about the Web and the latest tools and techniques around them.

Read more...

How To Build A CLI Tool With Node.js And PhantomJS

In this article, we’ll go over the concepts and techniques required to build a command line tool using Node.js and PhantomJS. Building a command line tool enables you to automate a process that would otherwise take a lot longer.

Build A CLI Tool With Node.js And PhantomJS

Command line tools are built in a myriad of languages, but the one we’ll focus on is Node.js. For those short on time, I’ve condensed the core process into three steps. This is the secret sauce to convert your Node.js script into a fully functioning command line tool. But do stick around to see what else I have to show you.

Read more...

↑ Back to top