Tag Archives: web designer

Test Hard, but Test Smart—A New Message to the Designers Part 1

Test Hard, but Test SmartIt is hard fact that we are living in multi-screens and multi-devices era of the web and mobile applications. Unlike earlier desktop only designing, we have to design UIs for cross-platforms and cross-browsers. Designing itself is not tough as we know how to go responsive well now. The real issues arise when we are going to test our website or mobile application for a release.

Today, I shall restrict up to website designing and testing leaving mobile application for next time so my target is responsive web design. Few years back, we have to consider testing our website on five to six browsers on the desktops including Windows and Mac PCs. Unfortunately, today we have to test on nearly 15 browsers and numbers of mobile devices including tablets along with smartphones of various sizes.

Testing Tough & Costly

Therefore, testing is not only time-consuming, but also costly affairs for small start-ups or even seasoned freelancers. Hardware fragmentation is at its peak and we have numbers of mobile devices to test the responsive website. It is true that we can’t cover entire our audience with profound testing as possessing numerous devices is a nightmare even a big web development company.

Think of Smart Testing

In short, you have to forget the complete testing on all the devices your target audience is using. Instead, if you have a solid testing strategy, you can cover majority of population of your targeted audience. In other words, you should be smart enough in testing and cover sizable audience with least investment of time and most importantly money on purchasing real testing devices.

If you closely observe the properties of browsers and testing devices, you will find best clues to get some smart ways to do things quickly and cheaply. For instance, if you code is running smoothly on the Chrome of Samsung devices, then probabilities are higher that they will have less friction on other browsers of Android devices. If your IE 9 has error free screen then least chances remain for IE 11 to show JavaScript errors.

Based on such similarities and peculiarities of browsers as well as devices, we can group them in a logical manners and can give them priorities according to our website and our targeted audiences. Unfortunately, each website is unique and have unique audience as no business is same in the market, we have to carve browser groups each time for each new project. Based on my experiences, I can say that it is not much difficult to get mastery over time.

As per my strategy, I sometime test only 50% browsers and release the website. Afterwards, I test rest of browsers and fix the long tails without delaying my release data further. Another strategy is I never leave brand new version of website that is releasing first time without testing on all of my browser groups, say four groups.

Of course, I do test only primary and secondary browser groups when I am a bit in hurry and website is for redesigning. However, accomplish rest of browsers in one or more steps at later dates. This way I apply the rules of ‘smoke testing’ by fragmenting my testing schedule. However, smoke testing offers you only some flexibility and relaxations, but never let you escape from complete testing on your all browser groups.

I especially, apply smoke testing on the PSD to Joomla conversion projects where we have to deal with mainly B2B clients and they are in hurry to produce results of their end clients. I hope we will discuss on testing and creating browser groups in next part as we have space constraints in this post.

 

 

Advertisements

Gestalt Principles Sit At the Foundation of Everything We Do Visually As Web Designers Part 3

In the previous article, we had discussed about the laws that work while the human perceives the object. In our today’s article, we are going to discuss about the Gestalt principles that sit at the foundation of everything we do visually as web designers.

Principles

Most of the gestalt principles are easy to grasp and understand by web designers and web developers who have less understanding of human psychology. A common theme runs through many of them. Gestalts principles are at the base of anything that an individual perceives. This is the main point what we as web designing community need to know before run an initial survey of guerilla UX research on your audience.

Principle of proximity

Principle of proximity is much similar to the law of common regions, but it utilizes space as the enclosure instead of shapes, boxes or anything else. In this principle, an individual perceives the objects that are closer to each other as related to each other than the objects that are further apart from each other. When objects are placed close to each other, they are perceived as a group rather than individual different objects.

Principle of similarity

Law of Simplicity in web designing
Law of Simplicity in web designing

An individual perceives the objects that have same characteristics as related to each other than the objects that does not share those characteristics. Any type of characteristics can be similar may be the color, shape, size, texture, or anything else. When an individual perceives these objects with the same or similar characteristics are he considered them as related. Now, we have clear idea that how to differentiate and assimilate same objects just by inducing simpler changes in colors or textures during our web designing process.

Principle of symmetry

An individual tend to perceive objects to have symmetry among them as they form symmetrical shapes around their centre. An individual tend to seek a feeling of solidity and order by going with the symmetry. It is in his innate nature to impose control on disorder. Individuals always try to bring symmetry in their life and others around them.

Principle of continuity

An individual perceives objects that are arranged on a line or curve as more related than the objects that are not arranged on a line or curve. It is in an individual’s instinct to follow a path, a road, a fence line or a river. An individual tend to perceive or move in a particular direction until he finds something significant to perceive, or to determine there is nothing significant there to perceive. This gives us a big weapon to make a continuous object with simple dots or tiny lines where less pixels and lightweight files are mattering more in a web development project.

Principle of closure

Filling symmetry
Filling symmetry with simple shape to make complex one during web designing

Here in gestalts principles the principle of closure seeks simplicity. The principle of closure is the opposite of that of the law of simplicity. In law of simplicity, an individual perceives a complex object and tries to find simplicity in it while in principle of closure an individual perceives different parts of the object and combines them and form a simpler one. While an individual perceives a complex arrangement of objects, he tends to look for or find a single, recognizable pattern. Human eyes tend to fill in missing information while it perceives something and forms a complete figure. This ultimately enable web designers to draw simple shapes in fewer numbers and make a simulation of a big and complex image without rising KBs and web page downloading rate.

 

Gestalt Principles Sit At the Foundation of Everything We Do Visually As Web Designers Part 2

In the previous article, we had discussed about the ways in which an individual perceives an object and environment around him. This is important for web designer and web developer community to get such fundamental understandings. Therefore, in today’s present article, we are going to learn about the laws that work while the human perceives the object.

Laws

Most of the laws are easy to understand for an individual, as it does not require any technical in-depth knowledge about the human psychology.

Law of Simplicity

Generally, an individual prefers to perceive objects that are simple, clear, and ordered. Based on the human instincts these things are considered as safe. Simple objects are familiar so it take less time in processing and presents with less hazardous surprises.

Figure/ground Law

Figure ground law is related to the relation that is shared between positive elements and negative space. An object is considered to be positive element and into the focus when an individual perceives it. Simply we can say that an eye will separate the whole object from its background to understand it and process it.

Law of Uniform Connectedness

From all the laws and principles that discuss about the relatedness of objects the law of uniform connectedness is the most powerful. An individual perceives the objects that are connected as related to each other then the objects with no connection. Objects can be said as connected when they share something common or have links between them.

Common Regions Law

The other way in which an individual perceives objects is in groups, enclosure or arranged in a pattern. All the objects placed inside the enclosure, group or patterns are perceived as related, and the objects that are outside are perceived as different and separate. Typically you can do is to place the objects in a square, circle, triangle or any other shape or can place them in a different background then their surroundings will show them as of common region.

Focal Point Law

An individual tends to perceive objects, which seems to capture his interest or the uniqueness of objects draws his attention and holds it. This law shows us that an individual’s attention is drawn and held by the objects that are in contrast, unique and of his interest. An individual’s attention can be drawn by placing a different object in the group of all the similar objects and it will successfully hold his attention. The focal point law and the principle of similarity are both related in a way. The focal point can’t be perceived if there is no similarity between the other objects.

Law of Past Experiences

An individual tend to perceive objects according to the experiences that he have gained in the past. The law of past experiences is considered as the weakest among all the others. As all the individuals have different perceptions and past experiences it is difficult to assume how an individual will perceive an object. The perception of an individual differs from that of others on their past experiences.

 

Incorporate Current Trends to Make Your Website Look Fresh and Relevant

In 2005 when I have started web designing and web programming, we all have an awesome platform and it was Micromedia Flash. Yes, Adobe was not on the horizon except for Photoshop.

With Flash, we were creating entire website and lots of animations, splash pages, introductory presentations, etc. Unfortunately, today Flash website or Flash technology itself is considering as antique piece. This indicates that how time is changing fast and trends are changing rapidly. Many new styles comes and many go to disappear in timeline.

Our tastes, standards of likeness, fascinations, and definition of sumptuousness changing ever with the pace of time. Therefore, as successful web designers, we have to keep learning constant, keep our eyes on coming trends and technologies, and most importantly try to experiment new things with some creative thoughts.

 

Website Performance Matters More

Today we can’t think about the Flashy animations, splash pages, or heavy weight images, which can kill time and interest of the ever shortening attentions of our audience. Load fast and place important things in logical yet alluring manner using superb information architecture and content strategy. UX is a new buzzword in the market. Thus, you have to respect the needs of the market and afford UX professional or learn UX fundaments right now.

 

Flat yet Intelligent Web Designs Rocking

Today we need intensive image optimizations in order to make responsive designing or mobile specific web layouts. This directly eliminating usage of excessive Photoshop effects such as rounded corners, drop shadows, reflections, embossing, gradients, and other various filters as they increasing our KBs. The biggest players like Google, Apple, etc. are more banking in flat and sweet designing.

Today our main focus is to deliver message of the website or image effectively therefore, we have to avoid all distracting things from the ways of the eye flow of our audience. Thus, white spaces, judicious style of texts and most importantly simplicity matter more here. We have only one slogan “Go to the point, no disturbance please”.

 

Off-Canvas but Smart Web Designing

However, popups and flyers/fly out windows are prohibited in the beginning of the website as they cause higher bounce rate. We still use popups intelligently in our web and mobile designing. As most of the time we never prefer to let our users to leave their existing page, product page in e-commerce, in particular, therefore, we have to take help of popups or fly out windows to show additional yet temporary information.

Off-canvas approach are desirable in present responsive web designing era as they solve our major problems without creating distractions in user experiences and various iconic designing prefer springing or popups whenever user tap it or hover it.

Finally, learning HTML5, CSS3, JavaScript, jQuery, and other contemporary scripting equip us to accomplish high quality animations, splashing effects, and much more in real-time using Ajax like technologies are our insurance against the success in modern web designing.

 

Use White Space as an Active Element in Your Web and Mobile Designing

Once upon a time web designers and even graphics designers for print were considering white spaces a wastage of real estate of the web or printing page. However, it was costing factors that lead print media to use maximum space whereas the size of monitors at that time force web designers to utilize the most available spaces on the small screens.

Today, both have changed and we are living in an user experiences era where we have new parameters to consider the hearts of the readers so let’s take a brief review of the usage of white spaces on the web designing front and their ultimate benefits in order to improve our ROI.

Benefit No. 1—Readability

Yes, we are living in fast-paced era where everyone suffering from time shortage syndromes and its ultimate solution is reading the text as quickly as possible. Now, tell me if you have a paragraph with condensed text and intimidating you grasp the content quickly, what will you do? Definitely, you may prefer to leave it and jump to another para or page, which is rather easier to read.

Now, if you technically deprecate that para you will find that whether the font size of the text is not good enough or the space between the two lines are not adequate to separate them properly and give ways to your eyes to read quickly. There might be some other factors like padding of paragraph margins might not enough and making it clumsy at first look.

Sure, the researchers on the readability have found out that if text font size and line height (space between the two consecutive lines) are not in ratio of 150%, means if font size is 10 then the line height should be 15 pixels. Same the way padding or leading space between the page margins and para should be somewhat more than 10 pixels or appropriate to the font size of the texts. Similarly, usage of bullets and other tricks to make texts scanning easy will prove useful to achieve greater readability.

Thus, judicial usage of white space makes texts easy to read and comprehend. The scientific reason behind it is that people love scanning the texts rather than reading it word-by-word. The same principle is working in case of images where congested typography is prohibited for sake of good user experiences.

Benefit No. 2—Comfort to the Eyes

If you leave enough white space in your image/graphics designing, it will offer a comfort to the onlookers and let them to focus on the main message of the image first. For instance, you wish to evoke a sensation through some graphics, but your typeface and their background is attracting attention first you might lost the delivery of your important message to your audience and visitors will leave image just after reading the text only.

Benefit No. 3—Smooth Eye Flow

This directly teach us that make secondary message subtle and suppress against the first one by offering enough white space in the graphics. Another important usage of white space is to make eye flow of the user smooth this directly leads them to focus on the main parts of the image

Benefit No. 5—Grab Attention

As in above para, we have seen that white space is an active element in the web designing of the content and the graphics designs so we can use the white space in some smart ways such as to grab the attention of the users. For instance, if you want to grab attention of the readers on the call-to-action button or an UI element you have to leave some extra white space around them and make the button prominent in the eyes of the visitors so they focus their thoughts on the message of the button and take appropriate action.

If we make call-to-action button heavy in size and color we can add more flare them by providing more white space around it and grab immediate attention of the customers in many e-commerce websites.

Benefit No. 6—Clustering the UI Elements

Yes, if you want to make some visual groups of texts or UI elements you have very handy arsenal and that is white space, which allows you to formulate groups, or clusters of the elements, which may grab ultimate attention and deliver a well-crafted message to the users of the website or web application.