Reflow – my top 10 features

Reflow – my top 10 features

Six weeks ago, Adobe released a preview of Adobe Edge Reflow in the Creative Cloud. If you are a web designer, and if you want to design responsive websites, then you should try Reflow. I’ve met a lot of designers who are struggling with CSS, especially since the rise of responsive web design. Although it’s still in preview, Reflow is a fantastic enabler for web designers. It’s also a fantastic learning tool to understand CSS and a precise prototyping tool to validate an experience with your customers and your team. The team has just released a new preview (preview 2) with amazing new features. That’s why I recorded this video to share with you my top 10 features.

Video – Adobe Edge Reflow – my top 10 features

This video is also a good way to discover the philosophy of Reflow.

My top 10 features

#1 Style HTML elements

Advanced color picker to create CSS gradients

Advanced color picker to create CSS gradients

Create awesome designs using CSS like never before. The native web surface in Reflow provides the precise and intuitive controls you need to turn your vision into reality. The professional color picker lets you define CSS gradients. You can also drop shadows (and combine shadows to create complex visual effects), set rounded corners, add background images with scaling constraints… The CSS code is generated in the background; you don’t have to be a CSS expert.

#2 Style text elements

Adobe Edge Web fonts are free and directly available in Reflow to create design with richer typography.

Adobe Edge Web fonts are free and directly available in Reflow to create design with richer typography.

Add richer typography to your projects using Edge Web Fonts integration. Visually browse a vast web font library and style using CSS. Since preview 2, simply highlight text from within a text block and style using any CSS property.  This freedom enables designers to create without having to think about structure first, but instead focus on their design vision.

#3 Export CSS

Design and style your HTML elements using the Reflow panels. Then get the CSS code for each element of your page.

Design and style your HTML elements using the Reflow panels. Then get the CSS code for each element of your page.

At any time you can extract the CSS code from your project to share it with a web developer. Just focus on the design, Reflow will generate the CSS properties for you in the background.

 

#4 Create and manage media queries (RWD)

Visual media-query breakpoints at the top of your page.

Visual media-query breakpoints at the top of your page.

Reflow is the best tool to adapt the design of your page to different screen resolutions. Place media-query breakpoints wherever needed to customize designs for different screen sizes.

#5 HTML preview in Chrome

At any time, generate a HTML preview

At any time, generate a HTML preview

If you want to share your responsive prototype with a customer or your team, you can simply create an HTML preview for Chrome. Check this page directly generated from Reflow: http://creativedroplets.com/samples/inspire/inspiring-vibes_preview.html. Reflow is not a production tool (like Dreamweaver)–it’s a tool for designers–but this HTML preview is a great feature to understand how responsive code works. You can trust what you design in the tool, because Reflow is built with HTML, JavaScript, and CSS! So it’s a pure WYSIWYG experience (What You See Is What You Get).

#6 Advanced layout

More freedom to create advanced layouts

More freedom to create advanced layouts

In terms of layout, one of the most frequent requests Adobe has received from web designers is the ability to leverage absolute and fixed positioning. This is now possible since preview 2.

#7 z-index

Control the depth of your elements with the z-index property

Control the depth of your elements with the z-index property

The z-index property specifies the stack order of an element. Web designers used to produced advanced layouts with bitmaps. With Reflow, using relative positioning and the z-index property, you can create advanced layouts such as a cover flow or a ribbon.

#8 Element naming

Rename your elements and check with the tree panel

Rename your elements and check with the tree panel

You must organize your page for yourself, or for the web developer that will use your Reflow project and extrude the CSS properties. Since preview 2, you can name your elements. This helps to keep your projects organized, especially as they grow more complex.

#9 Add / Remove parent

Add of remove parent elements without destroying the design of your page.

Add of remove parent elements without destroying the design of your page.

This is a new feature introduce in Preview 2. When you design a web page, it’s hard to anticipate the architecture of your page. Usually, a designer starts with DIV containers, and adds some elements. But you can judge that some containers are useless and confusing. And sometimes, you’ll realize that you need a parent element (to drop a shadow on a group for instance). This feature adds and removes parents without destroying the design of your page. It’s priceless. Thanks to this new feature, you can create a neat, light ,and clean architecture.

#10 You can try Reflow today!!!

Download and install Reflow from the Creative Cloud. It's free!

Download and install Reflow from the Creative Cloud. It’s free!

You can download and install Reflow Preview 2 today for free! If you are not a member of the Creative Cloud, get a free membership, visit the “Apps” section and download Reflow!

 

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

1 Comment

  1. Cool walk through. I had missed the remove parent feature. Great stuff.

    I noticed in your design you were not making use of “auto” for div heights or position. This is what truly allows your page to reflow as you resize. Not just at the media query points but throughout your resizing within any break-point.

Submit a Comment

Your email address will not be published. Required fields are marked *