HOW TO IMPLEMENT VISUAL DESIGN AND NOT DYING IN THE PROCESS 5 points to keep in mind

1. GRID SYSTEM

A grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Additionally, grid system code is project-agnostic giving it a high degree of portability so that it may be adopted on new projects.

THE BENEFITS

  • PRODUCTIVITY: They increase productivity by providing simple and predictable layout scaffolding to HTML design. The structure of a page can be formulated quickly without second guessing its precision or cross-browser compatibility.
  • VERSATILITY: They are versatile in how layouts can be constructed, being adaptable in varying combinations of rows and columns. They even support nested grids for more complex use cases. No matter your layout requirements, a grid system is almost certainly well suited.
  • RESPONSIVE LAYOUTS: They are ideal for responsive layouts. This is where grid systems reign supreme. They make it incredibly easy to create mobile friendly interfaces that are adaptable to different sized viewports.

BIZAGI GRID EXAMPLE

Every Bizagi product was designed based on 12 column grid (Desktop and Mobile). Frameworks like Bootstrap, Foundation, Skeleton or Pure css could be used as the base of project layout.

Management Console design - Environment Section

2. DIMENSIONS, PROPORTIONS AND COLORS

You have to keep in mind 3 important things before you start to implement a visual design.

  • Dimensions of the elements inside the visual.
  • Proportion with his environment.
  • Color scheme of the project (depends on the product).

Dimensions: the grid is a helpful element, because all the elements work within the grid. You don’t have to think about the element’s width, or even the resolution of the screen, you just have to check the markup in the html should be right.

Proportions: As developer you don’t have to worry about that. Every element in the visual is thinking and creating with detail. So just pay attention to Paddings, Margins and sizes (font size, min-heights, image sizes, etc); they are stipulated on our Zeplin and Invision deliverables.

Colours: Each product has its own color scheme.

Check out all color schemes for Bizagi Products.

3. BIZAGI ICONS

UX Team has delivered around 1500 icons that are available for use within the IT area.

Bizagi 11 icons: +900 unique pixel perfect icons created for Bizagi' latest release.

Bizagi Studio 11 icons

Find them at hilton: \\hilton\BizAgi\UX-UI\00 Bizagi\04 Resources/index.html

Bizagi font (regular and light): +400 pixel perfect icons for cloud products and web implementations.

Bizagi Font Icons

Find them at hilton: \\hilton\BizAgi\UX-UI\00 Bizagi\04 Resources\01 Font\bizagi-font.html

Also available at Sharepoint: https://goo.gl/TUoGnH

If you ever need a new icon (because after 1500, apparently people still want more), please contact us and we'll make it for you.

4. FONTS

Another important item is the font we use for our products.

Web: Open Sans - https://goo.gl/NgC64m

OnPremise: Segoe UI (windows native)

5. INTERACTIONS

Interactions provides context for the design by helping users know how to interact with it.

Interactions are also a smart tactic for delightfully distracting users during longer load times, keeping them engaged in what would otherwise be a frustrating experience.

  • Goal-driven design – Focus on personas, user scenarios and experience maps so that every interaction moves users closer to completing their goal.
  • Usability – Function must be intuitive and reliable before it can be fun for users. Provide only as many features as users truly need, then hone in on reducing the friction and cognitive load of each feature.
  • Affordances and signifiers – Form must reflect function since vision is our dominant sense.
  • Learnability – Interfaces that are consistent with existing designs and across all internal assets are more predictable, which means that they are easier to learn. Learnable interfaces, then, naturally feel more usable since less friction is involved.
  • Feedback and response time – Interfaces must respond promptly to users in a human (and humane) way so that the experience feels like a real conversation. You must approach interaction design as if it were human-to-human conversation, not as a machine that simply responds to what users do or say.

SOME INTERACTION DESIGN TECHNIQUES

  • Card-style layouts
  • Design elements that require physical actions such as swipes or clicks
  • Micro interactions, which are distinct moments that happen while using a website or app (think of an alarm bell or deleting an email)
  • Push notifications and reminders from websites or apps
  • Personalization and location tools so that every app or website feels like it was designed specifically for that user, creating memorable contextual experiences.
  • Quickly show or hide content with clicks or swipes
  • Hover effects and actions for secondary content
  • Transitions and loop functions between elements

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.