How do I draw elements?

#8

I couldn't disagree more. Making something approachable is key to adoption. If the tool isn't approachable to new users, then, at least for myself, I'll just stop using it

#9

had the exact same experience, it's not obvious and intuitive.. if you need an explanation how to use basic things in a program, it feels like it's badly designed.

you need at the very least:

  • vector tools like the pen tool and pathfinder
  • basic shapes
  • and other things I can't think of right now
#10

Hmmm.

Right.

Ok.

Kinda expected some basic drawing tools.

Lines, boxes, ovals.

#11

I like basic shortcuts too. But if in the next version you don't put them, at least auto open Help Window on fisrt run.

#12

So this topic "how to draw elements" has become the most viewed (next to official posts) and also has the most replies. This really speaks to the importance of good UX. This tool has really focused on bringing new features and capabilities and has almost completely neglected user experience. @ryan @kevin I think a key thing to remember is that this tool is not for simply "designers" it's for practitioners of UX. That being said - it's imperative that there is some consistency, recognition, visual salience, hierarchy, proper mapping, the list goes on. Being disruptive or innovative often requires a form a market readiness. As much as you'd like to completely change the way people design, fundamentally, I think it's important to not completely throw out their current workflows and enable them to transition within your tool, because it's the best way. One simple way (as an example) would be to have a free form drawing tool. that allows you to click and drag an element on the screen where you want it. the current workflow requires 5 interactions to accomplish this.
1. press enter
2. select the element you just created (this should be auto)
3. select free form
4. edit top left xy
5. edit bottom right XY

something that basic should be two interactions tops. ie.,

  1. press f(freeform)
  2. drag on canvas

I have a lot of hope for the tool - but it has a lot of UX work needed.

#13

Just a thought on this is if it auto selected after hitting enter then if you hit enter again as if you had intended to create 2 squares on the same level (like it does now) wouldn't it nest that within the first square instead? Maybe an option would be to have the auto select but if you hold down cmd while hitting enter it creates a second square on the same level as the first rather than nesting.

#14

I like that - I also prefer key interactions to be on the left side of the keyboard - I tend to have my right hand on a mouse or trackpad - I can work faster if I can create elements with buttons on the left.

#16

if you ask me.. apart from basic shapes and a pen tool, it also needs:

  • a Zoom indicator with info in %
  • a way to add type
  • a way to access your components
  • a way to add more artboards

I believe people rarely use shortcuts, at least I can't remember most, make it easier for the user!

#17

@daniel.keller

I use shortcuts all the time. The important thing I think that has been communicated already is that tool icons act as the "joy ride" for new users, and that over time people switch to shortcuts. As an example I rarely use icons to perform actions in Sketch, and I instead rely on shortcuts. I use Runner all the time to access symbols, insert objects, etc.

I agree with it being an issue that key elements are missing (beziers, lines, shapes, etc.). It's something I communicated during an interview with Ryan. I imagine over time we'll see more functionality emerge in Subform. I look forward to offering my experience, and exploring their approach to solving problems.

#18

This actually kind of blows my mind. I have no clue how to draw elements and I can't directly manipulate them…if this isn't a top priority I'm not sure what is.

#19

@contact.meszaros Please see the Subform 101 for answers to your questions.

#20

Just because people adopt something as they become "pro users" does not mean you should implement that as best practice. There is a required learning curve that you essentially force on the user. Imagine if you made shortcuts for everything in photoshop - it doesn't matter if you are a "pro user" it would take you 10 years to memorize everything or you'd have to look it up every time. Allow people the time they need to learn the shortcuts.

#21

yeah, let's print out a huge paper sheet with all the shortcuts on it, because that's what I'd have to do to use this program..

#22

I believe regular tools are not included intentionally. To feel the exact limitations of developers. It makes sense actually. It's going to be a tough change after a decade use of regular design tools.

:sweat:

#23

Same here. I just spent the first 3 minutes looking at Subform thinking that my install was bad. I have to say, this is a very, very weird experience! Maybe the developers wanted to test some of the other layout stuff with us before even creating basic tools but... well... it's very strange.

#24

I've opened this application and the forum so many times and just shut it wondering what I am supporting. I'm going to dig a little deeper and answer the question: Is this thing just not ready to be used? Am I completely missing something? What was it again that got me excited about this? Is it a graphic program for engineers? Is this real life?

If I'm completely missing the point, it's on me, but it shouldn't be such a mystery to figure out. Is this supposed to help me with my work or be a game/ puzzle to unlock?

Truly frustrated

#25

Guys, basics should be (at least) familiar - its the innovations you can invent the workflow for. If I'm honest I'm not using Subform because its arrogant in assuming ill change my workflow because of it. Sketch felt familiar so I ditched Photoshop in a heartbeat for it.

#26

I completely agree. I wholeheartedly understand that a pro tool can take time to learn and that its a valid time investment, but for the sake of familiarity I would appreciate not having to relearn concepts that don't benefit from its new interaction pattern.

#28

To be honest, I do think new approach is needed when designing for UI. The "Photoshop" technique is more than a decade old. We didn't had digital screens so much in our lives back then.

Current workaround in design tools are really useful when you're designing for print etc. Because it's actually a simulation of a graphic designers desk. The "desk" never got any groundbreaking changes or updates until now. Currently we are trying to push a plane instead we can just fly it when designing for digital media. It's pretty clever to have a "simulation" of a digital... umm... thing. :sweat_smile:

If subform uses the similar UI or workflow like PS or sketch, than it would be just another clone -if it aimed to be a clone it didn't even needed a kickstarter for that. Mac's quartz graphic engine is doing pretty good already (which is used by sketch and keynote).

Oh, also there's another awesome tool "Affinity Designer". It uses the same methods and similar tools like PS, Sketch, AI etc. It's actually an adobe killer toolset. In case if you are actually in need of a similar work methods. (and yes, you can work on psd's and save as psd with it)

I do not expect Subform to be a clone. Most of us already have license for sketch, ps etc already, we don't need another clone :wink:

#29

I disagree here, because the new concepts are

  • not new at all
    • It is very similar to the concept of XML/HTML/CSS
  • faster to work with
    • the old "lets draw shapes" method (for lack of a better name) does not have inter-element context outside of z-index, and thus requires pushing pixels, which I see as a serious waste of time and an inefficiency that gets in the way of creativity. Subform reminds me of how the DOM works in web dev. And the DOM is all about how elements relate to each other. Subform enables you to design in this manner, visually, with point-and-click and use of simple constraints. I've been able to make things in subform that would have taken much longer with something like Sketch / Photoshop.

What's cool about Subform is with just a little bit of understanding of the CSS Box Model and the use of constraints, which is very similar to how Subform works, anyone can create UI's without pushing pixels around or writing any code.

If they can add responsive layouts to this thing (such as "hide this element on screen sizes smaller than 400px"), and element/text-wrapping without a parent of fixed width, it'll be solid.