Modern web design tools

  • Started
  • Last post
  • 7 Responses
  • bocadeets

    I’ve been wanting to get back into web design, and know there’s some great tools out there that take the coding component away from the designer, like: Figma, Sketch and XD

    But in my search, I also found some stuff like this (some of which DO and DON’T plug into or interface with Figma / Sketch).

    https://webflow.com
    https://www.framer.com
    https://principleformac.com
    https://origami.design

    So now, I'm really confused.... can somebody explain to me what the “professionals” do nowadays, and what the difference is between these tools? At first glance, they all do similar things.

    Ideally, I'd like to design web and mobile pages and apps and show the "animation or interaction" to clients (as a working prototype) without having to do a lot of coding, and then hand everything off to a real developer.

  • ideaist0

    Illustrator/Photoshop & chill.

    • I think unless you move into a "workflow" using any of the above, keep it calm, cool and classic.ideaist
    • Show your client(s) flats; if their imagination(s) can't fill in the blanks, they should no longer be your client(s).ideaist
    • Gah, I sound so old and jaded in retrospect.

      : (
      ideaist
    • This isn't a static piece, it's interactive and you need to show how it WORKS not how pretty it is. PS/Illy is outdated af.zarkonite
  • akiersky0

    Each of those tools are more directed to adding interactions to your existing Sketch designs.
    Haven't used webflow, but it doesn’t seem as 'new' as some of the other tools.
    Framer and Principle are great for adding some animations to your Sketch files. Pretty simple interface, if you've used a video editor before it should be easy to pick up. Some good tutorials here:

    Origami is amazing, but has a steep learning curve. You can build prototypes that feel almost real, and use device sensors like gyros and cameras. It can also load data from external files or the web. You could almost make a complete app if you wanted to.

    If you're not tied to a design tool, I'd jump right into Figma. it has all the design features of Sketch, plus prototyping and animation.
    It's been a while since I've tried XD, but if you subscribe to Adobe, it's a great option to start that you've already paid for.

  • duckseason1

    Figma is what all the cool kids are using.

    Sketch used to be what the cool kids were using.

    XD is for folks too stubborn to quit Adobe. (/s)

    • I assume figma is for non-programmers and is bloated with unused code, right?dbloc
    • I think thats a safe bet. Ideally, you'd have devs you'd hand the files off to, and they would use the Inspect mode in place of redlines.duckseason
    • @dbloc no, not at all. Figma doesn’t pretend to write code for you. The Inspect mode is so developers can get specs. Saves a ton of time.nb
    • Thanks!bocadeets
    • Got it. So it's more of a wysiwyg for designers.dbloc
    • Love Figma! If you're doing any kind of design you should try it. Collaborative, free. Unique vector tools toonuggler
  • nb4

    First of all, OP, bear in mind that there is TONS of overlap across all the tools you mentioned. Some of the tools have been around a long time and were more necessary in the past. For example, only recently has Figma included animated prototypes. A couple years ago, you needed something else for animation.

    I’ll try to keep it short.

    Figma, Sketch, XD are UI design tools that have some basic prototyping and “smart” animations. This allows design and simple prototypes to be done quickly. There’s a lot you can do in Figma to show UI animations or interactions but it can get a little hacky to get it to look right. At the end of the day, the animation and prototyping in these tools is fast but limited.

    Some people want more powerful tools for prototyping (to make a more real looking or working prototype) so that’s where you get the Framer, Origami, etc. Here’s a quick breakdown of what you asked. This is just the main differentiator for each.

    Origami: created by FB to be a powerful prototyping tool for native apps. As mentioned by someone else, probably the most powerful mobile app prototyping tool. Not terribly difficult to learn, but if you’re making websites or just basic animation it is overkill.

    Framer allows more specific and complex prototyping for mobile and web designs. Sort of a hybrid code/design environment, although it no longer requires you to code. (It once did.)

    Principle allows more complex prototyping than Figma/Sketch/XD and is useful for mobile app prototypes. However, a lot of what Principle originally was made for can now be done right inside Figma.

    Webflow is a very different tool. It’s not just for prototyping. It allows you to design a responsive website with animations and launch it without knowing code. There’s also an e-commerce package for webflow. It’s not super easy to learn but some agencies use it if they don’t have engineers and want to launch experience-rich websites.

    So what do professionals use? Depends on their team, the scope of their product, and what level of prototype they want to test internally or show a client.

    You are on the right track of wanting to create designs with some interactions to show a client and then pass it off to a developer to build. This is a very common approach today. To do this, most people start the design and prototype directly in Figma/Sketch/XD and then if they can’t get the prototype to work the way they want within the app they started with, they look to one of these more advanced prototyping tools you mentioned, depending on their needs.

    To handoff, you would share “view only” access to the designs (for specifications) and share the prototypes to help the developers understand the intent.

    • This.duckseason
    • Cheers for taking the time to post this :)Gnash
    • Thank you!bocadeets
    • Nice summary, I would add that Invision has more advanced animation tools than the others.zarkonite
    • @zarkonite I think you mean Invision Studio. I haven’t looked at it since it came out and was similar to Sketch. Don’t know any teams using it.nb
    • If you’re still lost, just use Figma (or Sketch or XD are fine) and then mock-up advanced animations in any app you prefer, as needed.nb
    • I use AfterEffects for custom animations/transitio... There's a plugin called "bodymovin" that will export as .json for the devs.brandonp
  • bocadeets0

    Thanks everyone for your input!

  • hotroddy1

    I can only speak for web development but there is no replacement for understanding how html/css/js work.

    If you can't/don't code, you should, as a GUI platform isn't going to teach you anything.

    If you want to build compelling designs then you'll need to test JS frameworks/library (to see if it works with your vision).

    Testing ideas YOURSELF will inform you on whats possible and not rely on a developer that may compromise your designs.

    • thanks!bocadeets
    • +1 so much. A: you won't make promises in your design that are un-implementable IRL. B: try to find a good dev with an aesthetic sensibility --not easymonNom
  • nbq0

    that one is really promising and, open source:
    https://quant-ux.com/#/

    Oh and Editor X also: https://www.editorx.com/

    • These look cool, but also support my original post in that there are a ton of these tools that all do the same thing, and its hard to determine which onebocadeets
    • of them is the "adobe" of visual web design/mobile tools. The space for this type of software is really fragmented.bocadeets