Wireframing Tools
when we designing the UI we can use many design software. There are few software we can find to design UI. We call those tools wire framing tools. The formal definition of wire framing tools is “ Wireframe tools allow designers to quickly and effectively mock up an outline of a design as easily as possible” some of those Tools are,
Figma
Photoshop
XD
INVITSION
Editor X
Figma
Figma is a one great tool we can use for design UI for the applications. So why figma is great what are the advantages with figma.
- Collaboration in Figma Is Simple and Familiar.
- Figma Uses Slack for Team Communication.
- Figma Sharing Is Uncomplicated and Flexible.
- Embedded Figma Files Provide Real-time Updating.
- Figma Is Great for Design Review Feedback.
Figma is web base application but also desktop and mobile versions of figma is available you can download figma with following link.
Also another best thing of figma is figma have student packages for the verified institutions If you are currently studying in such verified institute you can get pro version of the figma for free go to website and press Get verified to find is you are eligible for student package . To visit education package you can use following link,
Figma has clear and easy managed interface. Any one can do their editing without pre knowledge about it. Figma is easy to learn and handle. Also when you get in to the figma you will see share button available in upper right Conner you can use that to share the figma interface with others there are edit and view option to select as you need.
Share option is one of the major feature in figma with this option user can share the figma interface with others. When sharing user can give edit or view options.
Typography
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
For create Typography for the project we can use pre design ideas and scales from internet to do that can use following link,
With this visual calculator you can give the base font size and select the scale you want then the fonts sizes according to your inputs will display. Then you can use those sizes to your own typography in the figma.
Colour Science
Color theory is the collection of rules and guidelines which designers use to communicate with users through appealing color schemes in visual interfaces.
There are 3 basic things you need to know about colour science
- HUE
Hue means the natural state of colour. It means the colour before the modification.
2. Value and the Saturation
Value is amount of light or darkness of the colour 0% is black and the 100% is white colour
Saturation is the intensity of the colour. Saturation is like Quality of the colour
3. 60 30 10 rule
When we doing any design we can use this rule to get better eye catching output. This rule explains how we should add colour to our design.
The major colour should use 60% and the secondary colour must use with 30%. All the other colors are should be in 10%.
Also when you selecting colors for the UI you have to think about colour manage also, Because we can not use colors as we want there are several methods for mix up colour In following diagram we can see how colour should be mix for designing,
Monochromatic. Color harmony is based on one color with various tones and shades of it.
Analogous. The scheme applies colors located right next to each other on the color wheel.
Complementary. It is the mix of colors placed in front of each other on the color wheel and it aims to produce high contrast.
Split-Complementary. This scheme works similarly to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red.
Triadic. It is based on three separate colors that are equidistant on the color wheel. Professionals recommend to use one color as a dominant, the others as accents.
Tetradic/Double-Complementary. The tetradic color scheme employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.
Hope this article is useful and give a clear idea about the Wireframing Tools and Techniques Thank you!
