When you step to UX track – role and responsibility includes
Posted on March 27, 2014 by Sameera Thilakasiri
- Contextual Inquiries
- Creating Affinity diagram
- Running a card sorting rest and preparing reports
- Conducting usability testing with paper prototyping
- Creating persona and scenarios
- User interview and observation recording
- Rapid prototyping
- Creating information architecture and site maps
- Providing visual guideline and themes for graphics designer
- Creating UI specification document
- Collaborating with creative, technology teams and business.
What is card sorting?
In essence, card sorting works as follows:
- Write down each topic on a filing (index) card.
- Give the pile of cards to a number of users and ask them to group the cards into piles.
- Collate the results, and make use of them when completing the information design.
This is a very simple, and often very effective, method of working with users to come up with a usable design.
Complete Guide to Creating a Customer Persona for Your Startup
Card Sorting: Mistakes Made and Lessons Learned
Usability Testing with Paper Prototyping
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
THE DIVINE PROPORTION(Golden Ratio) AND WEB DESIGN
Posted on March 15, 2014 by Sameera Thilakasiri
The divine proportion is a mathematical concept dating to ancient times that is used as a principle in almost all types of design from architecture to art to websites.
CREATE
To get this shape for your website, measure the width of your available content area and divide that by 1.618. The resulting number would be the width of your content area and the remaining with would be the space you use for the site’s sidebar.
Using a little math, you can create a simple golden ratio outline for your website. Start with your content area. (We will use 1,024 pixels, the width for most laptop and flat-screen monitors.)
1,024 px/1.618 = 632.88 px (which we will round to 633 px)
This number, 633 pixels, will be the width of the main content area.
1,024 px – 633 px = 391 px
This number, 391 pixels, is the width for the sidebar.
The perfect golden rectangle maintains the aspect ratio of the original square and adds the extra with to it. So the optimal height in this formula would also be 1,024 pixels.
You can also use an online calculator to figure this equation. Golden Ratio Calculator is a good tool that allows you to enter a width and get an instant calculation that breaks a width into a golden rectangle, such as the 1,024 pixels we used above. Further it uses that number as the width of the larger portion of the golden rectangle and provides the width of the small section and overall shape.
USES
Twitter, which launched a redesign late in 2011, used the golden rectangle for the outline of its site. The feed and sidebar combined mirror the golden rectangle. The use of the magic formula was quite intentional according to Doug Bowman, the site’s creative director, in a post on Flickr: “We didn’t leave those ratios to chance. This, of course, only applies to the narrowest version of the UI. If your browser window is wider, your details pane will expand to provide greater utility, throwing off these proportions. But the narrowest width shows where we started, ratio-wise.”
It’s Numbered uses the idea of the golden ratio to pair images and text. The idea of the golden rectangle can be used for more than just the overall site design; it can also be used to group items within the site outline.
MmDesign uses the principle of the golden rectangle for the dominant image on its site. Not only is the image striking, it has the perfect harmonic shape. The golden rectangle is not just for site design but can be used to create balanced parts throughout a site.
PROS AND CONS
Using the golden rectangle will not ensure that your site design works. There are a host of other factors that contribute to a successful design. The formula, though, can help you create harmony and balance and provide a basis for how to formulate a design concept. Many beautifully designed sites do not use this principle, but you are likely to find examples of the golden rectangle within the site structure. Photos, text blocks and sidebars can also showcase this “perfect” shape.
Use the golden rectangle in projects where you want to create a feeling of natural balance and harmony. The structure created by using the shape is naturally pleasing and mimics some of the most well-known images of all time and even nature. Without knowing it, visitors to your site will feel comfortable with the look you have created.
But not all designers agree with the concept. Trying to design around a mathematical formula can be complicated, time consuming and won’t guarantee a nice site layout.
ANALYSIS
Using the theory of the divine proportion is not for everyone. I think using the theory can get all-consuming when planning a site outline. Moreover because of the depth of each web page, it is almost impossible to maintain the true ratio and then you get stuck trying to fit a golden rectangle above the scroll or stacking multiple golden rectangles in the page design. (Neither option is very efficient.)
When designing with the golden rectangle in mind, try to not get too caught up in the numbers (although some math purists will disagree). Go for the basic shape and idea but don’t force it on your design. Play with variations as well. Create a golden rectangle and forget using the perfect height. (This can work for creating a sidebar for the full depth of your site.) Use the golden rectangle for the shape of images throughout your site or for colored frames.
The golden rectangle works best in web design when used for parts of the site rather than the whole. The shape will help you create beautifully arranged groups of images or text blocks of mirroring size. It can also be used to pair photos without that overly symmetric look. (Size one photo, then size the other using the 1.618 proportion and pair them side by side.)
Look at the grouping of multiple images on the Irving & Co page. The landing page features six images. The group uses the outline of the golden rectangle, but the photos are cropped and put together in an interesting way. The shape is not mathematically perfect, but creates a sense of balance and harmony that goes hand-in-hand with the principles of the formula. When using the golden rectangle, plan your design to mirror the shape but not fit into perfectly, pre-shaped boxes. Look past the numbers and think about the overall effect.
I like the classical feel of pages that employ the principle of the golden triangle. Nothing tops a good feel when you land on a new site. Using this theory, you can create that feel and sense of balance using a time-tested theory. But as with any design concept, use the golden rectangle in moderation. Too many perfect shapes stacked on top of each other can end up looking flat, repetitious and uninviting.
- Golden rectangle calculator: Get Ratio
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Divine Proportion | Golden Ratio | Modern Design | User Experience | User Interface Design | Web Design
Applying The Golden Ratio In Modern Designs
Posted on March 15, 2014 by Sameera Thilakasiri
By underpinning the design of your website with a literally natural order, viewers may find your design more interesting and innately pleasing. This concept is called the golden ratio, a mathematical concept nature obeys and that we humans subconsciously recognize as an expression of perfection.
The Golden What?
In simple terms, the golden ratio (also known as the divine proportion or the golden mean), is a mathematical constant that appears repeatedly in nature and artwork.
Expressed as an equation, when a is larger than b, (a + b) divided by a is equal to a divided by b(just look at the image below), which is equal to about 1.618033987. That number, often represented by the Greek character “phi,” is the golden ratio.
(Image Source: mathsisfun.com)
The same theory can be used to construct a rectangle, called the golden rectangle. An image that follows the golden ratio can be placed neatly inside a rectangle that obeys the ratio.
(Image Source: creativeautomaton.com)
To construct a golden rectangle, choose a number that will be the length of the rectangle’s short side. For argument’s sake, let’s say 500 pixels. Multiply that by 1.618. The result, 809 pixels, is the length of the long side of your rectangle. Therefore, a rectangle that is 500 pixels by 809 pixels is a golden rectangle. It obeys the golden ratio.
Divine Composition
How then do you use this magic number in the composition of your web page? The math may seem like a stifling box that your creativity will struggle in, but the golden ratio is simply a useful guideline. Having a basic guideline to build from can end up giving you more creative room by taking some of the guesswork out of proportions and placement.
Think of it as a tool instead of a cage. At its most basic, you can use the golden ratio to designate the size and placement of content areas and side bars. A fixed-width layout is the easiest application. Decide on the overall size of your layout via the method for creating a golden rectangle.
For Grids/Blocks
The square created by the a lines would be your content block. The smaller rectangle would be a side or navigation bar. Once you have figured out the size of your rectangle, finding out how wide your navigation bar needs to be is easy math.
- For this example, we’ll say your rectangle is 525 pixels by 850 pixels.
- 525 is a and 850 is (a + b), and b will be the width of your side bar.
- To find b, we simply subtract from (a + b), which is 325.
- Therefore the width of your side bar is 325.
Remember that your rectangle can be flipped around to suit your purposes, putting the sidebar at the top, bottom, or opposite side. As long as the ratio holds, your design will feel harmonious.
For Text
There’s a faster way to get the measurements you need and it can be applied with text content.
- Let’s say your context text is size 12.
- Multiply 12 with 1.618, the golden ratio, and you’ll get 19.416.
- A header text size of 19 or 20 would closely follow the golden ratio.
The golden ratio is a language your mind understands, and by communicating with it, your ideas will come across more effectively. You don’t have to adhere to it exactly; the basic principle is enough. Applying the ratio to image sizes, the relationship between text and image placement and the creation of subdivisions within side bars are all possible concepts.
Columns And Font Sizes: Fibonacci Sequences
Another simple tool for web design linked to the golden ratio is Fibonacci numbers. A Fibonacci sequence begins with 0 and 1. The previous two numbers are added together to produce the next number in the sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… and so on.
A little math tells us that the relationship between sequential Fibonacci sequence numbers is startlingly close to the golden ratio – divide the any number in the sequence with the number before it and you will get – you guessed it – 1.618.
As with the golden ratio, Fibonacci numbers can be used to dictate the relationship between header and content text sizes. It could also be used to designate the width of columns and is especially effective in blogs and other text-dense layouts. Composition could also be built upon the concept of Fibonacci tiling, in which tile size is built upon using the Fibonacci sequence.
(Image Source: Wikipedia.org)
Golden Spirals And Content Clustering
Another possible method of using both the golden ratio and Fibonacci numbers are the golden spirals and Fibonacci spirals. Golden spirals get wider by a factor equal to the golden ratio for every quarter turn they make, and Fibonacci spirals are formed using Fibonacci tiling.
The spirals can serve as a guideline for content density and clustering. They can serve as the foundation for the ratio of your website header images, search bars and tool bars.
When choosing the ideal image for a front page built around large graphics, such as store home pages and photography websites, you can also benefit from the golden and Fibonacci spirals.
Powerful messages are often subliminal, and the golden ratio is one of nature’s most prolific subliminal advertisements. By utilizing the divine proportion, you give yourself an edge of natural logic and organic grace that all humans have a subconscious attraction to. The golden ratio is yet another tool at your creative disposal.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Golden Ratio | Modern Design | User Experience | User Interface Design | Web Design
UX Blogs for your learning
Posted on February 16, 2014 by Sameera Thilakasiri
- Konigi by Michael AngelesTips, tools and techniques for being a better user experience designer
- Disambiguity by Leisa ReicheltThe ins and outs of designing a product with an existing, and passionate, community
- EverydayUX by Alex RainertA fresh look at the world around us through UX-tinted glasses
- Graphpaper by Christopher FaheyCritical analysis of some of the toughest issues facing UX designers today
- inspireUX by Catriona CornettCubical-wall worthy quotations from a variety of practitioners on how and why to create positive user experiences
- Bokardo – Social Design by Joshua PorterFor everything you need to consider when designing socially-focused stuff
- Logic + Emotion by David ArmanoReusable visualizations and valuable synthesis at the intersection of user experience design, marketing and business
- Putting People First by ExperientiaA great resource for all things UX from around the globe
- Brain Sparks by User Interface Engineering (UIE)Inside the brilliant minds of user research pioneer Jared Spool and his team
- Design for Service by Jeff HowardInsights into all the ways companies need to be communicating with their customers, outside of their websites
- UX Booth by Redd Horrocks, Matthew Kammerer, David Leggett, and Andrew MaierA group blog written by up-and-coming designers and developers with fresh perspectives on user experience design. They represent the next generation of our community
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Resources | User Experience
40 Best Bootstrap Tools for Designers
Posted on February 14, 2014 by Sameera Thilakasiri
List of Bootstrap tools/resources do you use and would recommend to others ? If you have a few favourites, then please share them with our readers in the comment section below.
- Layoutit
- X-editable
- Jetstrap
- Grid Displayer
- Bootply
- DivShot
- Bootstrap Magic
- GetkickStrap
- Bootstrap Button Generator
- PaintStrap
- Fancyboot
- Bootstrap Designer
- Bootsnipp
- Easel
- BootstrapStyler
- WrapBootstrap
- Galleries Built With Bootstrap
- For Mockups Bootstrap Fireworks
- Free Twitter Bootstrap Widgets Library for Axure RP
- Sass Twitter Bootstrap – Projects
- jQuery UI Bootstrap
- Colorpicker and Datepicker for Twitter Bootstrap
- Articles: Building Twitter Bootstrap
- Jasny
- Dialogs and Notifications
- Bootstrap Notify
- Bootstrap Tags
- Bootstrap Switch
- Bootstrap Markdown
- Bootstrap Select
- Bootstrap Form Wizard
- jqBootstrapValidation
- Bootstrap Tag Autocomplete
- Tablecloth
- Data Tables is another table enhancing addon for Bootstrap
- Social Buttons is a collection of pretty social networking buttons
- Bootstro.js is a bootstrap plugin that lets you build a guided tour for new users.
- Type-ahead is a library by twitter that offers a fast and fully featured auto-complete control
- Flippant.js is a tiny plugin that lets you flip elements to reveal further content with a smooth CSS transition
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Bootstrap | Tips & Tricks | Twitter-Bootstrap
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.