Posts Tagged ‘Workflow’

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

How To Prototype UI Animations In Keynote

Whether it’s playful refresh states, subtle icon movements or complex transitions, beautiful animation is all around us. Once considered an aesthetic luxury, animation is now used so commonly in modern web and mobile applications that entire websites are dedicated to UI animation patterns.

Animating In Keynote

While animations may have great visual appeal, they also make app experiences more intuitive and engaging. Animation can make an app feel more fluid and responsive by providing feedback on user interaction. This means that, for designers, creating authentic animations is increasingly becoming a part of the job description.

Read more...

Product Design Unification Case Study, Part 2: “Burger-Driven” Framework

In the first part of the case study about Mail.Ru Group product design unification, I described our first approach — a mobile web framework. Aside from creating a unified visual style and interaction principles for a dozen services, we've also transformed our design process from the classic "prototype → design mock-up → HTML → implementation" approach for every screen, to a modern and more efficient framework-based approach.

Product Design Unification Case Study, Part 2:

In this second part I'll show how we have improved the same technology to embody larger versions of these products and made our "Bootstrap on steroids" more powerful. In the spring of 2012, our business unit acquired 11 content-based projects: Auto, Events Guide, Health, Horoscopes, Kids, Lady, Moto, News, Sports, TV, and Weather. Many of them are very successful in their market niche in Russia; however, they each have their own history, often with outsourced designs that led to inconsistencies.

Read more...

Become A Command-Line Power User With Oh-My-ZSH And Z

The command line is increasingly becoming a part of every web developer's workflow. With tools like Grunt, Gulp and Bower leveraging the increase in productivity that comes with working in the command line, we are seeing it become a much more friendly and comfortable place for beginners and experts alike.

Terminal Theme: Agnoster

This article provides insight into some of the best tools to use in your day-to-day workflow in the command line and gets you started with a totally customized setup.

Read more...

A Simple Workflow From Development To Deployment

In this article I’ll be taking a look at how to build a simple yet robust workflow for developing sites that require PHP and MySQL. I’ll show you how to use Vagrant to create and run a web server on your own computer, with the version of PHP your live site runs. I also demonstrate a process for using a hosted service to deploy files in a robust way to your live server.

A Simple Development to Deployment Workflow

This article is for you if you currently have no way to test your PHP and MySQL sites locally, or use something like MAMP or XAMPP. The second half of the article will help you move away from uploading files using FTP to a process that is far less likely to cause you problems.

Read more...

Rapid Front-End Prototyping With WordPress

Prototyping is one of the best things that can happen within a project, yet it is extremely underutilized. Prototyping makes a project better suited to users, elevates user experience, increases the quality of your final code, and keeps clients happy.

Rapid Front-end Prototyping With Wordpress

The problem is that developers often see prototyping as a waste of time, since high-quality prototypes take considerable effort to make. I want to show you that by using WordPress, highly interactive prototypes with great visuals are not at all that difficult to make.

Read more...

Efficient Image Resizing With ImageMagick

Responsive images have been keeping us on our toes for quite some time, and now that they are getting traction in browsers, they come with a scary problem: the need to efficiently resize all our image assets. The way responsive images work is that an appropriately sized image is sent to each user — small versions for users on small screens, big versions for users on big screens.

Super-Efficient Image Resizing With ImageMagick

It’s fantastic for web performance, but we have to face the grim reality that serving different sizes of images to different users means that we first need to create all of those different files, and that can be a huge pain.

Read more...

Fitting After Effects Into A UX Workflow

We all aim to be as agile as possible in today’s fast-paced web design world, while also remaining thoughtful of the end user and those we work with. After Effects is a great tool that enables us to quickly visualize and test robust animation patterns throughout web design, share those with the development team and clients, and even test variants with users to get quick validation on a design before it goes into production.

Fitting After Effects Into A UX Workflow

Web design transitions and animations, like parallax scrolling, hidden navigation, swiping, pull to refresh, transformations or really any UI transition, are great to prototype in After Effects. In this article, we will be scratching the surface of how to fit After Effects into your UX Workflow, and we’ll share details, advice, experience and links that you could use as influence and thought starters in your next project.

Read more...

Extending In Sass Without Creating A Mess

The @extend directive in Sass is a powerful directive that facilitates the sharing of rules and relationships between selectors. However, it can produce undesirable side effects if it is not carefully implemented. Thankfully, there are many strategies for using @extend effectively that can prevent these side effects and produce clean, organized CSS.

Extending In Sass Without Creating A Mess

By examining @extend in detail and exploring these various strategies, you can accurately predict exactly what happens when you use @extend, and make more informed decisions about when to use a @mixin and when to use @extend, to ensure optimal organization and to restrict unused styles in your style sheets.

Read more...

An In-Depth Overview Of Living Style Guide Tools

Following the market's demand for minimalistic and consistent UIs, and the growth in modular web development, we tend to pay more and more attention to documentation and the efficiency of designer–engineer workflow with each project we undertake. Also, since the documentation process is often the weakest spot for modern web teams, we're constantly looking for the right tools to help us.

An In-Depth Overview Of Living Style Guide Tools

Living style guides help front-end developers transform front-end codebases into well-described pattern libraries with the minimum of effort. But to make them really efficient, we need to choose the proper tools — so let’s have a closer look at what our community has to offer.

Read more...

Automating Style Guide-Driven Development

Style guides — especially living ones — are useful in many aspects of development and maintenance, so it’s little wonder that developing them has become a highly recommended and a popular practice. But even with the clear benefits, taking the necessary steps to create and start using style guides is easier said than done, as quite often the challenge is cultural, requiring changes in people’s mindsets.

Automating Style Guide-Driven Development

In order to make the transition as painless as possible, equipping yourself with the most helpful tools and automating as many steps as possible become important. These living style guides promote a systematic approach to composing layouts, which used to be just a task within the user interface development process. Incorporating style guides into the development process places importance on the tools used to build the component catalogue.

Read more...

↑ Back to top