How to design or layout faster

Freddy_Blockchain · January 21, 2019, 7:21am

Hello Wapplerfriends and @wappler_ambassadors I’m inviting you to share ideas how the process for designing wappler bootstrap layouts could be improved.

I’ve found some interesting ways and want to share what I like of these websites:

Shoelace

There is an interesting concept how the 12-columns will be handled. Its snapping and shows in a funny way how the layouts are shown on different screens.

http://shoelace.io/

Scripteden

You will find alot of pre ready components which you can change to your own needs.

Gridbox

FREE : You can design your template with premade components like pricing table, tables, signup, login forms, video headers, testimonials, portfolio or gallery and many more.

FREE, Advanced, not online: Lavish

Create Bootstrap Theme from Picture

Bootstrap Magic

Quickly customize your Bootstrap theme

Pixfort Demo

Quickly start with Template or custom Sections and choose your elements. Very nice and fast to work

https://pixfort.com/demo

Bootstrap Design Tools for specific elements

Menu’s
Carousels
Buttons
Breadcrumbs
Progress Bars

chrome-capture (6).gif967×598 4.53 MB

http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/

Its my favourite and changing an element can be done inline, which shows the propperties of it, like APP Connect on right side. Changing column width can be done with + and - which is quite good!

Wappler is great no question! But maybe not a bad idea to hunt for the next best feature and idea! I’m not sure what would be a good way to improve the design aspects from Wappler. But maybe you have an idea!

Additional helpful FREE / Opensource resources:

Froala

https://www.froala.com/design-blocks (Github Sources, Free Bootstrap Elements like

Call to action
Contacts Contents
Features
Footers
Forms
Headers
Pricings
Teams
Testimonials

GetFuelux Formbuilder

http://getfuelux.com/formbuilder.html
Useful for Drag&Drop Form Builder

George · January 20, 2019, 10:19am

Great research Freddy! I was coincidentally also investigating possibilities for making Wappler visual editing more easier.

I liked a lot the shoelace for the grid editing, but it is bootstrap 3 based and in bootstrap4 you are not that much limited by the 12 columns so the rows/cold editing has to be different.

As for the theming we already have theme manager in the planning for applying global styling and making design systems easier.

mrbdrm · January 20, 2019, 12:35pm

i actually see no issue with the way wappler handle this.
its easy and fast.

only wish we can have more freedom when moving elements in app structure

s.alpaslan · January 20, 2019, 2:49pm

Wowwww thanks @Freddy_Blockchain

Webjack357 · January 21, 2019, 12:29am

Hi George! I would like to share post I published few days ago - in answer to Freddy question about FlexiLayout software - about some very cool visual feature found in Flexilayout that could be implemented in Wappler, the Wappler way of course

Hi Freddy. FlexiLayout (FL) is a DW extension from XtendStudio (Since 2005) FL is a design tool no data management, it started basic and became a very complete tool with many useful visual features like:

Parallax background fx,
Gradient background color
Color picker
Web Fonts
Hover fx
and more.

And version 3 is very helpful with Predefined block of content and elements (see picture) structured by categories:

content_blocks.png417×659 8.79 KB

And when you navigate trough a category you see a list of different layout or dispositions with a preview for each one:

contact
contact.jpg1103×476 39.5 KB

pricing_table.jpg1010×473 44.7 KB

testimonials.jpg992×529 46.5 KB

And they grouped all standard elements (container, row etc.) grouped in a menu:

elements.jpg263×963 27.8 KB

So this is a very good tool to speed up the design part.

The only complain I would have is that it is very tricky to try to adjust each elements for different medias screen because when you change the padding or margin values for a specific screen size it randomly screw the one for other size, so you have to resize many times.
And one big problem is FL produce proprietary code.

Here is a website I built for a client: http://www.ravspec.net
Built entirely with FL.

It is a short overview but it gives a pretty idea of things that could be implemented into Wappler

Freddy_Blockchain · January 21, 2019, 6:04am

That is exactly the missing part of Wappler! What can I say! Woow! And what about this:

Having smth like Flexilayout would get rid of alot different feature requests in the actual forum
As you mention thats its not easy to fit screen sizes, maybe using smth like shoeloace.io in a combination.
image.jpg1125×606 118 KB
Also I really like that feature here:
image.png735×275 44.7 KB

Teodor · January 21, 2019, 8:22am

Well, we already have such tools in Wappler. The “add element” feature in Wappler is available right on your page, where you insert elements, so you don’t have to click in some panels to find them. Also the insert element feature suggests only the suitable elements for the current selection:

The Container/Row presets can be found in the properties panel, as soon as you add them (column or row):

Webjack357 · January 21, 2019, 4:01pm

Yes I see this, now Wappler handle the menu categories a lot better than before. More straightforward. Maybe it is because i am so used to design with FL that I find it faster to work with, but I have the feeling FL need less navigation and clicking than wappler. Like I said, it is probably me lol

Still there are features that are very well done and useful in FL and other visual tools (See my post and Freddy post above) you will see many great visuals elements and tools that could be integrated into Wappler specially if you want Wappler to be attractive and appealing to visual designers who are actually using apps like FlexiLayout, Wix, Webflow etc.

George · January 21, 2019, 4:24pm

Yes you should keep up @Webjack357 - Wappler grows massively each week no time for rest

norcoscia · January 27, 2019, 1:41pm

My 2 cents - if wappler worked like Blocs I would be very happy, I tried the demo and it is so easy to use and intuitive - check it out and please consider something like this for Wappler.

Gabriel · January 29, 2019, 4:54pm

@Webjack357 That looks like a beautiful extension, their offerings look really nice but it seems they stopped with CC 2015? Are they still in business or updating their extensions?

Webjack357 · January 29, 2019, 4:50pm

Good question as I was asking myself what is happening with ExtendStudio, in fact they do still provide support for all their products and they still provide updates and they sent a new template for Word Press few week ago (to work with their WordPress visual builder) but they have not develop new product or major updates since 2017.

Gabriel · January 29, 2019, 4:56pm

Thanks for the reply @Webjack357 I was just updating my post when you responded. Their stuff and site looks really nice, shame if they stopped with CC 2015 (the last version listed on their site).

Webjack357 · January 29, 2019, 5:03pm

Welcome Grabriel. I agree with you and it is sad when such a good company/products stop doing business, but at least they did not stop their costumers support.

Fortunately Wappler is here

Gabriel · January 29, 2019, 5:07pm

That true and very commendable.