Flat Design for HTML5 Applications

Are you already making data applications that are responsive and mobile ready? Another way to make your data applications more usable, clear, and contemporary is to consider the concepts of minimalism and flat design. Regardless of whether you incorporate these design trends subtly or boldly, staying aware of a few common practices will allow you to surpass user expectations and create a pleasant user experience.


Introducing New DGLux5 Workspace Themes

We are introducing two new workspace themes to our users. Our belief is that we should provide tools that allow users to create beautiful, data-driven applications and a modern, advanced workspace that simplifies the development experience. With the the new DGLux5 Dark theme and DGLux5 Light theme, you can experience the user benefits of flat, minimalist design as you create your applications.

Experiment with the new themes until you find the one you like best. 

  • Default Theme : The classic experience that you are used to.
  • DGLux5 Dark Theme : A flat, minimalist theme with dark colors. The dark colors are relaxing for the eyes if you look at screens all day.
  • DGLux5 Light Theme : Another flat and minimalist look, this time with light colors. The light colors can help you envision your final design, if it has a light background.

About Flat Design

Flat design has been quite the trend recently and with good reason. Before flat design, UIs heavily used shadows, light sources, and decorative elements to mimic real-world objects. As more users became more sophisticated, they no longer needed UI design to mimic real life. In fact, 3-D effects and other imitations can sometimes be confusing or can become a distraction from the items that matter most. The clearest designs today are often very clean and simple without beveling or any other extra ornamentation. On the other hand, shadows and other mimetic elements can be useful, to help users tell the difference between content and UI controls, for example. Think of flat design as the intelligent consideration of which kinds of mimicry to keep and which to discard.

 

 

About Minimalist Design

While flat design reduces the amount of real-world imitation such as 3-D effects, minimalism is about reducing all kinds of clutter to make the visual experience easy and clear and make your application lighter in weight and higher in performance. Minimalism encourages you to use a fair amount of empty space, a small number of contrasting colors, simple icons, consistent alignments, crisp edges, and generally one or two sans serif fonts. Not only do these practices create a clearer, more pleasant experience, but they also are often more lightweight, improving loading times and element resizability.

Iconography

Choose the most appropriate symbols or images to represent subjects and allow them to beautifully complement your design theme. We can’t stress this enough...think clean and SIMPLE. Adding too much detail to icons can “overdo it.”

Typography

As mentioned earlier, sans serif is the preferred font type for achieving modern, flat design for your application. Additionally, paying attention to leading and tracking is extremely important. Leading is essentially vertical spacing between lines of text while tracking is space between characters of a word. Making some adjustments in these areas by a few pixels can definitely change the look and feel of your application. In some cases, increasing the leading and/or tracking can minimize the negative space...to your advantage!

How to Adjust Leading in DGLux5

In the Text and Font Property section, there is an Advanced sub-section. Click on the expand icon, and you will see the “leading” property. Here you can adjust the amount.

How to Adjust Tracking in DGLux5

In the Text and Font Property section, there is an Advanced sub-section. Click on the expand icon, and you will see the “tracking” property. Here you can adjust the amount. 

All in all, enjoy the new workspace themes, research other flat designs and start diving into some advanced text properties to fully experience the limitless design capabilities that DGLux5 has to offer.

Additional Tips & Tricks for Flat and Minimalist Design with DGLux5

  • Instead of shadows or gradients, experiment with setting off important elements using a bright color or some empty space.
  • Use responsive layout techniques to create a “card layout” of widgets, to visualize your data in simple, clear chunks.
  • If you use Absolute layout in a group, turn on snapping to ensure that item alignment is consistent. Inconsistent spacing can be a distraction.
  • Use mostly neutral, low-saturation, or low-brightness colors. (You can turn down color saturation and brightness using sliders in the color editing dialogs in DGLux5.) Then, introduce a limited palette of one bright color for UI controls and one or two more for important information like chart series.
  • Make your icons simple and flat. Instead of designing new icons, you can save time by using an icon font.
  • Ask someone to look at your application with fresh eyes: what do they see first? Is there anything that draws their eye without a purpose?