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.
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.
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.
Another important item is the font we use for our products.
Web: Open Sans - https://goo.gl/NgC64m
OnPremise: Segoe UI (windows native)
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