MASTERING DYNAMIC LAYOUTS - THE 5 FRAMES PRINCIPLE


In the first 3 Episodes of Series 3, you have become familiar with dragging and dropping the various types of Dynamic Layouts on to your web pages. The natural next step is for you to tweak and configure each layout so that it becomes exactly how you prefer it. To advance your web design skills you now need to understand Frames and the design tools at your disposal within them.

Series 3. Episode 4: The 5 Frames Principle


When training people in MOBLE there is always a 'penny drop' moment when clients realise how much time can be saved with our methodology. It is important to consider that MOBLE is not another theme based website builder, it is a website builder for designing custom websites.

Custom Layouts can be designed in the Editor, without code and this is made possible on MOBLE with the Frames. If you were to compare this to Photoshop, Frames would be like Layers, in terms of code they are effectively the divs. Each Frame has a rich set of UI features, much like the tools you make have for designing in Photoshop, however, the tools on each Frame are specific to websites.

The tools on each Frame allow you to control background, images, videos, colours, padding, alignment, you can each elect which devices the frame can be seen on e.g. you could hide a frame on mobile and only show it on the desktop. Frames offer granular control and really allow your website to be customised as you like it.

To add more Frames you can simply click the  icon on the top left of a Frame. You can add as many Frames as you like, without restriction, you can even drag in new blocks and start to build grids on the MOBLE framework. The key is that you use Frames to build Layouts that you like, then you can save them to be used time and again.


DID YOU KNOW?

For the Frontend developers out there, you can create your own CSS classes and apply it via the Styles area. Back in the Page Editor, in the Frame tools, you can apply your Classes to bring you code to life right on the page. Therefore, you have a quick UI to add and customise anything, even if it's not in the MOBLE UI.

For example, without getting too far off track, MOBLE has recently introduced a class for 'circle' and 'shadow'. These classes can be applied to any Frame or Image to make a Circle with a shadow around it. Currently, we haven't made these classes available as check boxes in the Frame tools, we are still playing with such things now before we make the features available to all clients. However, if you go to the class box in the Frame tools (found under the ADV advanced tab), you could simply type in 'circle' and 'shadow'. You can see that the Frame or image instantly picks up the CSS and turns your Frame into a circle with a shadow. This might be more relevant if you applied the Classes to the actual image, and as you can see there is also a class box on the Image Component. So if you are a frontend developer have some fun you should be able to achieve anything by either giving them classes or just creating beautiful Layouts for them to drag onto the page.


So with all this flexibility could things get messy?

Certainly, with all of this functionality at your fingertips, if left unchecked, you could get very lazy by creating too many Frames and making the Editor a touch messy. Well that's fine, just like with any tool it's how you use it that creates the art and MOBLE is a canvas for you to play and experiment.

Though after countless training sessions with clients, we have developed a simple methodology to help beginners stay on track, to keep your pages clean free from clutter and with nice alignment. Here we look into the best practice methodology that we call the 5 Frame Principle.


The 5 Frame Principle

To view the 5 Frame Principle, open the Layouts drawer and start by dragging in a Layout from the Design category. Then flip into advanced mode to see the how many Frames are within the Layout. Now we will go through each Frame and describe some of the typical features to apply in each Frame.

Within MOBLE's base Design layouts there are alway 5 min Frames. Once you understand the typical things that you would edit in each Frame you will be a long way down the road of being a serious web design pro, so let's take a look at each Frame in this practical guide.


1. Row

The row is the outermost frame. You can see if you flip to Row mode, it lights up this Frame in mustard and when you're back in Advanced it is the outer Frame. Being the background of the Layout, typically this Frame is used for:

  • Background Image
  • Background Colours
  • Background Overlay
  • Background Video 
  • Padding and Alignment
  • Frame Height
  • Show on Devices - Desktop, Tablet, Mobile

This really is the backdrop to your layout. You can even fix the background so that when you scroll it fixes and text in the Frames above it will scroll over the top. So you could imagine each Frame in 3 dimensions with animated layers.


2. Inner Row

This is a special row that is mainly reserved for effects. Click the FX tab to view some of the effects. We also run through effects in Episode 7. Typical effects are:

  • Parallax
  • Shift
  • Reveal
  • Filters

 Though, this Frame can sometimes be useful to offer a touch more padding should you ever need it.


3. Outer Block

You can see when you flip to Block mode, that Blocks are highlighted in MOBLE's midnight blue. To help you organise, a little trick for the pedantic amongst us, you can also turn any Frame into a Block by typing in 'block' into the Class box, found in the 'Advanced' tab in the Frame Tools. This is a neat trick as now when you flip to Block mode, this Block will be accessible. Block view is nice as you can see Padding and Alignment, where Advanced mode really lets you get under the hood and see all over your frames, almost like you were looking at the source code.

So what is the outer block typical used for:

  • Fixed Width
    Sets the frame to a fixed max width. As standard to 1080px regardless of how large the device size.
  • Padding and Alignment
  • Background Image (occasionally)
  • Background Colour (occasionally)
  • Background Overlay (occasionally)

4. Block

The main Blocks can be seen clearly on Layouts with more than one column. I could drag in a two column design and here you can see the Blocks.

Therefore, blocks really help with organising your content. You really should try to focus on consistent Padding and Alignment between your block, then tweak the backgrounds to bring in the brand. All MOBLE design layouts are set to the same Padding and Alignment, so if you're a beginner there really isn't too much you need to do other than drag in the layouts and start editing content.

Though, for more advanced users, there is such granular control. You can even start to add effects to your blocks, like Reveal, Parallax and Shift.

  • Padding and Alignment
  • Background Image (occasionally)
  • Background Colour (occasionally)
  • Background Overlay (occasionally)
  • Effects

5. Inner Block

The main purpose of the inner block is really to house your content nicely. Since the Outer block contains the background colour or images, this is not required in the inner block. Often you only need to apply padding to the inner block.

The padding tool applies padding to the inside of the Frame and it is common for designers to use either a 16px wrap around the inside of the Frame, or a 64px wrap for a more spacious feel. If you hold 'alt' and click any of the padding widths it will automatically select the others. So you can have some fun while making your content neatly aligned and consistent throughout.

  • Padding


And that's it. It really doesn't have to be any more complicated than to follow this best practice, now go forward and enjoy, with this knowledge you really are steering the ship from here.


A bit of history

When building MOBLE we often considered reducing the functionality of what we would allow users to do in each Frame. We had a choice of either limit what users could do, in line with the 5 Frame Principle, or giving them full control to access all features in an unlimited amount of frames.

When user testing at training sessions we watched people learn and play, we found that after one quick training session, clients started to design with Frames in ways that we had never anticipated. The learning curve was seemingly shallow and this was so encouraging, that we decided not to lock it down and give full flexibility to all users without restriction.

So please consider the 5 Frame Principle. It will help you as a best practice guide to handhold you through the shallow learning curve to becoming an absolute web design pro.