Missing Potential in the UI, it's Beta

Elements Feedback
1

I’ve been trying out Elements, following all the videos since the beginning, and leaving a lot of comments. In a nutshell, I think it missed a lot of potential. It’s just too noisy for me.

When Elements first came out, there were some components that were like pre-assembled sections. They were already set up for breakpoints and basic design. That’s missing now. There are way too many dependencies for building out a working website. Things that the designer is just supposed to know.

Maybe this isn’t finished yet, but as someone who knows most web standards but is new to building them out, this is really hard for me to use.

It’s not done yet, so I’ll keep waiting. But so far, as much as I think Elements has the potential to be revolutionary, it’s frustrating to use.

4 Likes
2

Just adding a +1 here, as every time I use it, I keep coming back to just how complicated Elements now feels. I constantly get lost in the Inspector (it doesn’t help that the order and naming of properties change depending on the Element), I still really don’t get the use-case for Globals as custom Elements covers 99% of what they do, adding fonts to a project is a frustrating experience, and working between the resources panel, node list, inspector and viewport is a tortuous game of “Where’s Wally” and whack-a-mole. There’s just too much to keep in your head.

Add to this the increasing need to learn Tailwind/CSS (custom classes, understanding theme settings, etc), and the Elements API (for custom components) I usually come to the conclusion that I’d be better off just working in code.

My goal today isn’t to build websites (anymore), it’s to create a space on the web where I can showcase and promote my creative work. Elements as it stands, requires me to know far too much about building websites—which takes away time I could be spending on my actual work.

I’m hoping things start to make sense/move in the right direction in the coming weeks/months, otherwise I’ll just write-off Elements and move on.

2 Likes
3

I must respectfully disagree to an extent.

Can Elements get complicated?? Yes, depending on what you want to do with it. I have spent several hours watching the videos and learning how to use it, as well as increasing my knowledge base around HTML, CSS and Tailwind CSS. I am not a coder, designer, web-designer or systems administrator. But I get Elements. It has clicked for me.

My goal with Elements is to duplicate my existing website using modern software so I can expand it as necessary. It was originally created using GoLive and hasn’t been updated or changed since. Until Elements, I haven’t found any web design software that I liked until Elements. None. Period. Tried and bought several.

With Elements I have steadily been re-creating my existing website, and am about 2/3 done. (It was larger than I remember).

Globals…I really like them. I also occasionally find them frustrating. (See also In Praise of Globals, but… which provides a very good description of some of the issues). All my page design is essentially the same. The background color is all the same. Created a Container, set a background color and all of its settings. Made it a Global and first thing that gets laid down on a page. All page headings should be the same size, color, spacing. Created it, made it a Global. Next thing that goes down on a page. Set to override text and I have my page heading. Wash, rinse and repeat.

Did I have to spend a few hours of time to learn about Elements and how to use it?? Yes. Did I have to learn about Tailwind CSS?? Yes, at least enough to let me understand how it fits into Elements. But I had to spend that time learning the other software that I tried, but this time, it clicked!!

The original website used tables to organize everything shown. In Elements, I am using CSS Grids. Took me a bit to wrap my head around them, but now goes quickly on the re-write. The initial rewriting will still be ugly (hat tip to @trinube ) but functional like the original. Phase II will be the prettification and responsive design phase. (although it may still end up ugly as I am no designer)

Are there still bugs that need fixing and areas of Elements that need some love?? Yes. Are there still some base components that I would like to see?? Yes. Are the Developers fixing things. Yes, they are. Is it perfect?? Nope, but then rarely is anything. Is it a useable product in its Beta form?? For me, yes it is. I am happy with both the product and the direction it is heading. I also look forward to its continuous improvement!!

5 Likes
4

Is it easier to build a house if you get pre-assembled cabinets, drop-in showers, and fully hung windows? You bet.

Is it more difficult to build said house if you have to hand-build all cabinets, put every piece of tile into the shower, and build your own windows from glass and wood? You bet.

The threads that have become common recently (where are the components?) actually speak to that difference. At its roots, Elements lets you build everything yourself (difficult). Globals/Components/Packs are the heart of the pre-built modularity that let you build out faster.

Here’s where I tend to agree with the ones asking for the components to come back: DESIGN is not really about nailing every nail and placing every tile. Design as we do with Web sites currently works best with building with common elements (pardon the pun).

We actually need both abilities to fully do our design jobs, as sometimes we need to build something unique or new.

Which brings me to a fear about Elements: if it strips down too much to the wood, nails, glue, tile, and other base materials—which is where the beta is today—I don’t think it will do well in the market because the bulk of Web design needs to be done quickly or by someone without the low-level knowledge.

I think Realmac is hoping that developers fill this area with components and packs, much like Stacks did for Rapidweaver. The problem here is that, as it sits today, Elements is less fleshed out for the quick and dirty design task and will become reliant on the developers from day one. There’s just too much dropping into the sidebar tweaking individual components that have complex interactions for Elements to survive the new or naive user purchaser. Moreover, I can’t currently rebuild my Web sites—and I’m a programmer all the way back to the mid-70’s across a lot of languages—without having to deal with every nail and every piece of wood, and that’s too much work at this point for me to actually use Elements to redesign everything. With the right components/packs, I’d tackle that project.

@anon68150607 wrote that he thought it might be better to just work in code. I’m not sure I’d go that far. But right now it feels like we’re using assembly language here, and not a language that “organizes” code even modestly, like C, let alone a modern object-oriented approach.

5 Likes
5

was just thinking about something as simple as dropping text on a page…drop a container/grid/flex…add a text box…double click to start entering text…adjust margins padding to get where you want it…the program I use add text…start typing…move box to where you want…thats what it should be like…I got the beta in sept/agust and my first problem was the gallery not working as it should…here we are in Jan and it still aint working…this is probably my last month with elements…also another bug bare is typography…type a passage and say use paragraph…but I want it to be bigger as I go though the breakpoints bot I cant use typography unless I set h2 h3 h4 h5 etc at different sizes…theres no override in typography…the program im using by setting the typography I can alter the size but everything else stays the same font colour etc

2 Likes
6

Is there a way to merge this thread with this one . They’re essentially the same.

7

Thanks for catching this, @trinube ! Sorry I didn’t clue in when I first searched…the title didn’t really catch my attention as to the similarities with what I was posting!

To pull of of what @thominator said: "

if it strips down too much to the wood, nails, glue, tile, and other base materials—which is where the beta is today—I don’t think it will do well in the market because the bulk of Web design needs to be done quickly or by someone without the low-level knowledge.

I agree! Elements has the potential to be an alternative to the online builders, reaching a HUGE market of potential clients…but as it stands now, it feels like a fancy set of tools for boutique-devs.

Maybe I’m not the right client for Elements after all… ?

Time will tell!

8

Totally agree with you @bryanrieger . The left side panel is currently really not well designed. I also often fail when I add a new component to the viewport. It’s mostly anywhere but not at the place I want it to be. Then I have to go to the Node Browser and put it where it needs to be. Maybe a second level panel like in RW Classic with Stacks would be a good thing.

I am also missing them @Flash

Absolutely agree @sbchasin. I really like Globals. I would miss them working e. g. with footers or a navigation bar. And the difficulties are well mentioned in the linked post.

What is missing from my point of view is copy /paste for components/sections. I often develop something on one page and then want to reuse it on another side. Currently I make it a global, put it on the other page and de-global it.

But with all the downsides mentioned here in this post there are lots of things which are already greatly implemented. The Hover animations for example or the Transforms in general. The Filters are also great! I sometimes broke my fingers in Foundry 3 to get such effects. Its so easy in Elements :+1:

The deeper I crawl into Elements the better I understand the concept. In the meantime it really clicked for me!

Saying that, there’s really a way to go but I trust that Realmac will fix the UI stuff, as Rapidweaver was always a good example for a well designed software. Then adding some missing components (like contact form. modals, off-canvas etc.) and the version 1.0 would be perfect for me.

1 Like
9

Hey Guys,

I’ll do my best to sum up and address all of the points in this thread. If I miss anything in particular, just post a reply and I’ll do my best to answer. :smiling_face:

UI Layout

This is unfinished and a continued work-in-progress. We’ve identified a lot of the issues you’re all reporting, so we are keen to fix them. As always, it’s a balance between fixing bugs and re-arranging the furniture (as this is never a quick job).

However, late in 2024, we started working on a project to make the UI more flexible. What was going to be a simple/basic change turned into a bit of a monster. The good news is, things are looking really good, and I think you’re all going to be happy with what we’re doing. It doesn’t fix all the UI issues in one go, but we’ll get there step by step.

Pre-built Components

While the pre-built components were great, they were totally new components coded from scratch. They were very specific, and there was a lot of overlap with the base components we’ve built – i.e., you could build the same thing with the built-in base components (if you knew what you were doing).

So here’s the current plan. We’ll build these easy-to-use layouts (banners, cards, etc.) from the built-in components and ship them in the app as “pre-built templates”.

That way, if you need to tweak something in the design, it’s all there, and there are no limitations, but it will allow you to build an entire site VERY quickly.

tldr;

We’re making big changes to the UI and plan to ship “pre-built components” in the app. :tada: (it’s just going to take a bit longer).

Elements is in beta, and we’re still making big changes. I know that’s annoying as everyone just wants a finished product, but… to build the best web design software on the Mac that meets everyone’s needs, it’s going to take some more time…

Stick with us, and if we all keep pushing and polishing, I think Elements is going to turn out better than any of us can even envision.

And finally, we’re back to our weekly schedule of dev diary videos, so I can keep you all in the loop – look out for that on Tuesday as usual.

5 Likes
10

Calling them ‘templates’ rather than components makes a lot of sense, in that it presents them as far more approachable and malleable, whereas ‘components’ can (and often are) very complex and rigid structures.

Also, from a naming point of view saying “The basic ‘Banner Template’ can be used to create a wide range of banner designs using existing elements,” is a lot more approachable than saying “The ‘Banner Component’ can be customized using a number of (often limiting) properties…”

Templates feel like generally malleable/reconfigurable patterns built from existing elements, while components feel like specialized and complex black boxes.

The concept of templates is one that is much more familiar to many more people, and typically isn’t loaded (and open to misinterpretation) like ‘components’. Both are useful, but they do serve different purposes.

Now, if ‘Globals’ were ‘Global Templates’ that would make things much clearer. :wink:

Template = a collection of elements. ie. banner, header, footer, etc.
Global Template = a consistent collection of elements that can be reused, updated, and reconfigured throughout a site/project. ie. site header, site footer, promo banner, etc.

Components = bespoke (created either by yourself or 3rd parties) structures (ie: black boxes; html, css, js, hooks, properties, etc) focused on a specific task or feature with configurable parameters that can be adjust to better suit your needs. Cannot be created using basic elements and templates. ie. carousel, gallery, Hype animation, etc.

3 Likes
11

I like this. Consider it done!

3 Likes
12

Fantastic. I think this will make a big difference.

1 Like