Edge Reflow as a prototyping tool

Hi everybody,
I'm working on the wirefames of a website that has to be responsive.
I wanted my client to be able to navigate these wireframes on a mobile or a tablet.
So I give a try to software like Justinmind Prototyper or Axure.
I'm not using them for long but I'm finding they are big piece of software!
I'm thinking Edge Reflow would be the better choice not only for designing but also for prototyping if it would include a way to simulate dropdown menu (for desktop website) or slidepanel menu (for mobile website).
Wait and see, may be it is planned for next version.
Best regards
Simon

Hi LARV
Edge Animate just publishes the usual HTML/JS/CSS stuff.No dependency with drupal.

Similar Messages

  • Edge Reflow vs Axure for Rapid Prototyping?

    We are looking for the best solution for rapid prototyping from wireframe stage, ability to incorporate a solid base of interactions, and of course ability to be responsive. It also needs to be something easily sharable for the ability to quickly UAT designs at all stages of UI development. So far Axure has owned this market, with an extensive functionality capability. We have been demo'ing Edge Reflow CC for a couple months now, and have definitely felt some pain points in the swiftness of creating layouts, as well as limits in functions that can be emulated. We have been through the Lynda tutorials, and I think, if we're going to invest in Edge Reflow, I think we need a more advanced dive into complex functionalities within Reflow. Is this type of training material available somewhere? Is there material on how complex Reflow can get?
    Many Thanks for your attention!

    i'm also interesting about this question: axure vs reflow for wireframing, mockup and prototyping.
    some people use reflow + brackets pluging....

  • SVG with PNG fallback, Responsive, EDGE Reflow & Animate integration

    I mentioned this on the Muse Facebook, and they said I should post it here... I think Muse is an awesome program. But I really, really would love to see these features. Any of them good enough to make it to the sketching table?
    1. SVG with PNG fallback support (for Retina displays)
    The problem with Hi-Res displays on Tablets, phones and laptops is that the web is becoming awfully ugly. You need to zoom to fit webpages, and when they fit, the JPG's and PNG's become blurry. Since displays are increasing resolution year after year and pixel density is becoming a real issue, on phones (like the HTC One) or laptops (Macbook Retina or Chromebook Pixel).
    Wouldn't it be great if we could use vector SVG for new devices for sharp a crisply logo's on every screen. And with that instantly use an automatic PNG-fallback option for older browsers. This would signifantly upgrade any website made with Adobe Muse and the Web in general if you ask me! I've done some research and I found this website very useful considering this issue: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
    2. Responsiveness (Adobe EDGE reflow integration)
    Adobe Reflow is amazingly promising. What if (instead of making different websites for every device) you can export a website to Adobe Reflow to make the design instantly responsive.
    3. Beter Adobe EDGE Animate integration
    EDGE Animate is a great program, especially with the codes and actions which you cna integrate. The only problem is sometimes I want an animation to start playing when I'm at that part of the page, not after when it's done loading. Overall the integration is so-so, and it's doable to add an animation to Muse, but these tweaks could upgrade it from great, so turbo-awesome!
    Which brings me to my next point:
    4. Dynamic Content Loading (Load on view)
    Isn't Muse a great tool for making one-pages?! I love it for that, and I do love one-pages. The problem is that it can take a while to load when it's becoming more complex. Is there a possibility to add a feature when thing are loaded when you scroll? Which is fairly often used on blogs and stuff.
    5. Horizontal Parralax Scrolling
    Since the latest update I've been pretty hooked on the functions of parralax scrolling and what it could do in a usefull way. The problem is that it doensn't work for horizontal scrolling. The objects can move horizontal (when scrolling vertical). But there's no option to add an effect when scrolling in a horizontal direction.
    What do you think? Any of these interesting enough to develop?

    I would love all of the features in this post. But you must post it in the Idea section of the forum so people can vote for your ideas.

  • Fireworks to Edge Reflow?

    I know Adobe don't like Fireworks but I'm hoping that they will have a workflow from FW6 to Edge Reflow. Is there any info on this?
    Photoshop is great for image editing but it sucks real hard for web and mobile design, I just can't use it for that sort of work. I still find it mid-boggling how many people have FW installed and yet use PS for all their web and mobile design work. Unbelievable.

    The output is bad, but it doesn't have to be, so I'm wondering which steps in building the FW layout in a particular way are most onerous.  If you had to put all the elements you want to appear in a div together in their own sublayer, would that be too bad?  What about naming elements in a particular way to specify how they get output?  What if you had to use a special div auto shape instead of a rectangle to draw backgrounds and things?
    I tried this process with great excitement when FW became able to export CSS-based layouts but the results were terrible so I abandoned it and just went back to producing the layouts as they were required visually. Your ideas are on the right track in terms of setting up the FW page and getting good output (with a better engine). Personally, I don't like to use lots of layers and never use sub-layers (selecting objects on the canvas in FW is so easy), so the sub-layers approach is less appealing but I do like the idea of a DIV auto shape. It would have to act as a container and be able to 'hold' the elements inside it, including other DIVs and possibly tables. I think shapes and text (content) should be styled using FW styles which would be converted into CSS styles (does it already do this? I haven't checked).
    I think to really test the integrity of this process would require some more thinking and scenario-based documentation, which I would gladly do if you were interested in doing something in this space. I love FW and use it every single day.
    That would require rebuilding it from the ground up, but I also believe that a graphics app built on an HTML renderer is the future, since you get layout reflows and rich styling for free.  Reflow is nowhere to having sufficient tools for even a very basic drawing app (not that that's what it's trying to be right now).
    I totally agree re the graphics app on HTML renderer which is why I'm so interested in moving the design and layout process onto a real HTML layer right from the start. This includes interactivity as well eg. rollovers, content flips, sliders etc. etc. ER immediately made me think like this but as you say, it's miles away from it and I don't expect Adobe to go to that place.
    John, if you're interested in pursuing any of these ideas, I would be delighted to provide input and research into any effort. I am a UI designer/strategist for a web-based CRM/CMS company.
    Cheers
    Paul

  • Business Catalyst and Edge Reflow

    Will there be a way to utilize the responsive layout tools in Edge Reflow with modules in Business catalyst?

    https://www.google.co.nz/search?q=how+to+do+responsive+web+design&oq=how+to+do+responsive+ web+design&sugexp=chrome,mod=0&sourceid=chrome&ie=UTF-8

  • Edge Reflow CC showing as installed, yet it is not.

    Hey Eveyone,
    So I've been at this all day, yet things just seem to be getting worse. So far:
    Tried to sync up Reflow CC with Photoshop CC with no luck. Re-started, re-downloaded, re installed and again, no syncing was possible. Searched for a plug-in people mentioned I could manuallly install, no luck finding. Chatted with support, and was told to call as I needed more of a "specialized techinal support". Called, spoke to nice man who was supposed to transfer me to a "specialist" who could further assist me, but after 40 mins of waiting on the phone, I hung up. Re-started, re-downloaded, re installed AGAIN, only this time Edge Reflow promped and error message when I tried opening it: "...Environment No Longer Supported...".
    Went back to scowering the internet and forums in hopes to find the solution, but nothing I haven't tried was coming up, so I went ahead and deleted CC off of my computer using the the Adobe Creative Cloud Cleaner Tool and went ahead and re-downloaded, re-installed again, only to find that once I opened CC, it shows Edge Reflow as installed, yet It's not on my computer!
    Although Edge Reflow isn't one of the main tools (yet) in my workflow, and I know It's still in beta, I'm already pretty frustrated with the whole process so far in terms of getting it to work. It looks like it has a lot of potential and really wanted to give a try...
    Any suggestions or help with this, would be greatly appreciated.
    Thanks.

    Hi JMarsh,
    Please follow the steps mentioned in the kb: http://helpx.adobe.com/creative-cloud/kb/aam-lists-removed-apps-date.html and try installing again.
    Regards,
    Romit Sinha

  • How to uninstall Adobe Edge Reflow after installing Adobe Edge Reflow CC

    After installing Adobe Edge Reflow CC via Creative Cloud I have noticed I still have Adobe Edge Reflow on my machine.
    There is no specific uninstaller in Applications/Utilities/Adobe Installers
    So how do I uninstall it?

    Jarrid it sounds like you may be having more severe issues since this is the second program you are now stating you are not able to uninstall.
    I would recommend you uninstall all currently installed Adobe Creative software using the uninstallers in Applications/Utilities/Adobe Installers folder.  Once this is done you can use the  CS Cleaner Tool to verify a complete removal.  You can find details at CS Cleaner Tool for installation problems | CCM, CS6, CS5.5, CS5, CS4, CS3 - http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html.

  • A Sneak Peak of Adobe Edge Reflow | Adobe Edge Reflow | Adobe TV

    Adobe Edge Reflow is our latest and cutting edge tool to help you create responsive layouts using standards-based CSS. Check out this video where Senior Product Manager, Jacob Surber, will share with you Reflow's design philosophy and core features.
    http://adobe.ly/QQ6dbJ

    I'm confused on how these new Edge products will work into the product line in relation to Dreamweaver. Dreamweaver CS6 has some very effective responsive web design capabilities which I am using heavily, but it seems like with Edge Reflow and Edge Code, Adobe might be steering things in a different direction.
    I am a developer, and spend a good portion of my days in Dreamweaver. I've also got a substantial investment on Dreamweaver extensions. Can you shed some light on how Edge products are meant to complement or compete with Dreamweaver? It seems like you need to sell Dreamweaver and the Edge products to the same audience. How's that going to work?

  • Introduction to Reflow | Adobe Edge Reflow | Adobe TV

    In this video Evangelist Paul Trani takes you through a new tool Adobe is working on called Reflow. Reflow allows designers to create and style layouts and then make that same layout responsive, allowing it to work across desktop, tablet and mobile devices. Download Adobe Edge Reflow Preview from the Creative Cloud today and give us your feedback through the Adobe Forums or on Twitter: @Reflow @PaulTrani
    http://adobe.ly/12cnyEN

    also will this work with external stylesheets that you can load into the program. for instance, there could be an FTP section where you can put in FTP addresses for various websites. You log into the FTP for a site, it loads all of the external CSS files, and then you can start tweaking the CSS that's already available in them visually, add breakpoints, etc. instead of starting from scratch.

  • Is it planned to add feature for creating tables and lists in Adobe Edge Reflow?

    First of all, thank you very much guys for all your work!
    In my opinion Adobe Edge Reflow is missing quite important features, like creating tables and lists. For me it's a reason why I can't switch to Reflow. Any plans for implementing these? Is there any place where I can see the list of planned feature implementation? Didn't find it.

    Missing tables is a big one for me too, especially when doing data-grids. My last prototype was using multiple responsive data-grids where I used the simpler essential/optional hide column approach, instead of stacking or scrolling the data. I had used Reflow in the past for basic content prototypes... but had to do this one by hand... took longer. Using divs for this did not collapse properly in all the browsers, plus the back-end team use widgets that only generate tables. Here is the example:
    http://www.topwebworks.com/assets/test/prototype/riocompass_prototype_v1

  • Suggestion: Adding a "Pages Panel" in Edge Reflow, similar to Adobe Fireworks

    Hello Adobe Team:
    I realize ER is mostly to set up fluid layout prototypes, which so far I'm loving this software.  Especially the feature of your align panel. 
    But, I have a suggestion that I would love to see implemented in the near future. 
    Allowing for more than one File to be opened in ER
    Adding a "Pages Panel" similar to the Fireworks pages panel
    Master Page
    Pages

    Thanks for the suggestion!  I filed a Feature Request in our public github at: https://github.com/edge-reflow/issues/issues/38
    If you have a free github account, feel free to add additional feature requests there.  Posting them here is fine, too!

  • How to add links and rollovers from an exported Edge Reflow HTML in Dreamweaver?

    Hi,
    Thanks to the very helpful community I have found the way to get my HTML file from Edge Reflow.
    Upon opening the HTML file in Dreamweaver, the CSS, Java scripts are wonderfully linked. However, I am not experienced enought to manipulate the divs to get a rollover or add links to the layout.
    Eg. Sticky Navigation bar on the top, how do you add rollovers and links?
    All help is very much appreciated.
    Thank you for your help in advance!

    Hi Chris,
    your plan for Reflow sounds good. Versioning is probably the most adaptable way to integrate it with the rest of the workflow.
    What I think is still missing, on the simple side, is link creation and management inside Reflow.
    Of course, considering you have just introduced multiple pages, this feature shouldn't be far...
    About Dreamweaver, I've been a faithful user for years but now it's definitely old for some uses.
    Just to say, if I open the responsive page I just created in Reflow with DWCC in Live View, something basic as background gradients are completely missing. Well, I'm not going to use it for this kind of work.
    Do you know for what DW is still a great tool? Email Newsletters, since they still have to respect old standards that no one else uses anymore.
    For all the rest I definitely prefer the editor/IDE way: SublimeText and other tools.
    They're faster, more apt to the task and, similarly to the Adobe Edge line of products, made with the same technologies they help to work with.
    In the future, who knows... Maybe, you should put in development a "Dreamweaver Edge" version and drop the old one, a little clunky even if recently revarnished  ;-)

  • What is the difference between Edge Animate CC, Edge Code CC (Preview), and Edge Reflow CC (Preview)?

    Also, what does the (Preview) mean?  Does it mean that a newer version will become available soon?

    Hi All,
    Preview releases means that our team acknowledges the limited functionality of the application. Our goal is to provide community members an opportunity to try out the application and we encourage everyone to provide us with feedback.
    Edge Animate lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile with ease.
    Edge Animate FAQ
    Edge Reflow allows responsive designs faster and create high-fidelity prototypes through media query breakpoints, precise CSS layouts, grouping and more. Edge Reflow now connects directly to Photoshop CC, allowing you to go from static design to responsive comp in just one-click.
    Edge Reflow FAQ
    Edge Code is a lightweight code editor for web developers and designers working with HTML, CSS, and JavaScript. Edge Code is built to work with browsers, speeding up development time by displaying changes to the code directly on the screen.
    HTML, JavaScript, CSS editor | Download free Adobe Edge Code CC (Preview) trial
    Regards,
    Devendra

  • What Edge Reflow should keep in consideration

    I've been following Edge Reflow for some time now, have used it to showcase developers my mockups, and have even used it in some rather large projects. Although currently mostly unusable to me for production in the current Preview, there is a lot you can do with it. The demand of responsive layout is no longer an option in my opinion, its what everyone expects. I've looked everywhere to try to find something similar, and recently came across a few sites that pull off what Edge is trying to do. So for the developers currently working on this or other Designers that need a good reference, here are some sites that I hope Adobe can bring into the Edge-Reflow-Photoshop workflow.
    http://www.webflow.com/
    http://froont.com/
    https://www.easel.io/

    My point with the post was not so much a single or multiple features within the other products, but rather the ease of use and intuitive design. The current design approach in Reflow at first seems VERY simply, until you begin actually moving your responsive elements around and realize its completely rearranging the DOM (of course, after reading multiple threads you realize there is a solution to it). The  current Preview generated css is buggy and produces countless lines of **.123i482gg86dedsdfweflkj** infinite gibberish, not presenting me with a recognizable ID or class that I can later manually edit. The APPROACH of simplicity, the clean css, the ease of use, is the "feature" I'm pointing out to devs and designers alike in the above referenced. Wether the tools are browser apps, desktop software, web apps or whatever other list the can pertain too is not so much the point. I think Adobe has definitely taken the right approach with Reflow and looking to integrate with its current services. These tools cater to the designers. Most web devs already know how to configure a responsive web project and what code they need to make it happen, but in my experience (not putting anyone down here) lack a sense of composition and aesthetic principles. I'm not trying to to say that all web devs are colorblind angry geeks on green vga terminals that demand code knowledge for validation of a designers skills. My point is simply that intuitive tools which Reflow is intending and the afformentioned help a designer better navigate and explore aesthetic boundaries that other UI tools cannot provide, and therefor bring the reference of well executed projects currently being used and available as a landmark to where I believe Adobe should compare itself to.

  • Edge Reflow... et al

    So, have recently stumbled on the Edge workflow/solution/whatever... and am very confused!
    What exactly is this about?
    Is it:
    1. An alternative tool / application to DW?
    2. Just a design aid? In which case how does one export the code to DW for fine tuning?
    3. I gather it's based on 'Brackets'. In which case, how does it differ from the free downloadable Brackets at http://brackets.io/ ?
    4. Etc., etc., etc.
    Grateful for any elucidation, explanation and elaboration...
    Cheers,
    S

    More for you -
    How is Edge Reflow different from Adobe Muse or Dreamweaver?
    Edge Reflow is a responsive design tool with a fluid grid layout UI with features to adapt design based on the properties of the viewing device. Muse has adopted the alternate design approach, which allows the primary layout to be manually adapted for other devices.
    Dreamweaver is primarily a code editor, and the fluid grid layout feature is intended to provide developers with a way to generate publishable HTML code for their responsive design. Edge Reflow is a highly visual tool with features for designers to quickly ideate and mock-up different design comps for various devices and view their results on various targeted screens. Unlike Dreamweaver, Edge Reflow does not provide coding features so designers must extract generated CSS code for implementation and deployment.
    (taken from a post here - http://www.webdesignerdepot.com/2013/04/an-introduction-to-edge-reflow/)

Maybe you are looking for