Tag Archives: web designing

Businesses Have Misconceptions about Web Development

It has observed that when businesses decided to have their own web presence and even in responsive web designing, they are running with some common misunderstanding regarding the web development process and web development team. These misconceptions or myths may sour their relationships with web development team or company itself.

Therefore, I have decided to give some insights based on our experiences as a web development team at Lujayn serving wide range of clienteles across the globe.

Myth #1 – These Are Simple Changes

Being a well-experienced web development company, team at Lujayn is preparing project scope documents where we are defining things in advance that what should be included, and what should exclude in the set price structure. Despite such preventions for project creeps, some businesses come up with small changes that they think as minor ones and can address with little efforts and time.

However, that is not true at technical point of view because simple looking websites may have intricate functionality and complex interactions in backend. Thus, always their programming becomes time-consuming and expensive at logic even a simple change in location of a button may take days to accomplish in coding and testing.

Solutions:

Businesses should define their requirements upfront and always discuss with team prior to suggest any changes as well as offer extra cost if your changes require the substantial amount of time and efforts from your hired web development team.

Myth #2 – Templates Are Okay

It is true that market is flooding with ready to use templates or themes and some software available to build a website using GUI tools without doing any coding at all, just drop and drag work flow. Of course, templates are good for those who need low-end and temporary web identity at initial stage and ready to customize them when their time and money come on hand.

Solutions:

In majority of cases, businesses, be they small or big want to augment their brands and have thirst for good ranking in SERP for their business keywords. Therefore, it is imperative for them to come up with unique and SEO friendly websites for their users and bots in order to get the best ROI.

Myth #3 – Web Development One Time Process

Majority of businesses think that once website has built their work is over. However, they are not true because web development is not one time process even though you have created customized web identity with the latest responsive web designing technologies, as web development team needs to update it regularly as well as check or test it frequently for its compatibility and user experiences in contemporary sense.

Web and mobile technologies are ever-changing field and your current websites may become obsolete after two or three years and you need to redesign it with the latest coming technologies at that time.

Solutions:

Therefore, my best advice for business houses to keep good relation with your web development company and take their help regularly by paying on their maintenance packages or for support or update charges.

Myth #4 – Anyone Can Do UX

When businesses have to select the web development company as their IT partners, they used to check presence and capabilities of graphics designers for UI and programmers for interactions and dynamism, but never ask for UX experts. Designing mere UIs and programming them can’t bring good user experiences on your websites because expertise and experiences in UX is quite advance and different discipline in software development as well as in any industrial product development.

Solutions:

Thus, check whether your hired web development team has UX experts included or not and ask for the portfolio of UX professionals too.

Advertisements

Let Us Comprehend CUBI—A User Experience Model Part 5

Interaction in CUBI ModelPreviously we have explored the components of CUBI model for UX designers for web and mobile software products. In second part, we have grasped the content layers’ functionality. In third part, it were user goals while in fourth part, we had some knowledge about business goals. Now in this post, we will look finally at the fourth component of the CUBI model and its interaction. However, user interaction designing is crucial in modern high-end web and mobile landscape because only interactions make product live and exert the best user experiences in our highly intricate software designing projects.

Just like other components, user interactions has four layers to consider when incorporating it in the UX designs. Those layers are patterns, systems, devices, and humans. Let’s see how they act in the UX designing.

Interactions with Patterns

We know very well that UI design consists of various UI elements and most of them are the parts of graphics or layout designs. Therefore, it is natural that design patterns have greater impacts on the interactions of users hence on the UX designs. Apart from buttons, there are headers, menus, maps, calendars, video, audio, images, etc. which are taking parts in various interactions and responsible for user experiences at the end.

Interactions with Systems

Web and mobile applications are creating their own system and running on the various operating systems as well as devices using its hardware, software, and custom resources at a capacity. For instance, any software on web and mobiles may have navigation system, workflows, screen flows, feedback giving and receiving systems, notification systems to interact with internal and external components. These all are mean to help end-users to go ahead to achieve their intended goals with our products.

There is nature of the system such as static or dynamic may decide the interaction designing. At other hand, your software system will define the CMS, e-commerce, and other system software integration with a set of capabilities and limitations.

Interactions with Devices

We are living in fragmentation era in terms of computing devices. Therefore, it is mandatory to beat challenges of multi-screen designing for better UX in all mobile and web software products. Our client/targeted devices may have fragmentation issues with screen size at first place, form factors like smartphones, tablets, desktops, laptops, kiosks, terminals, wearable devices, appliances, and many others at second place.

The biggest challenge for UX designers with devices is various gestures to interact with them like pointing devices/mouse, touch gestures with fingers, thumbs, and other body parts, body gestures with just movements, accelerometer like hardware gestures, geo-locations, and use of camera are some instances to consider during UX designing and interaction designs in particular.

 

Interactions with Humans

After all, we are designing UX for our end-users, and in most the cases, they are human beings. Therefore, human interactions with the product designing like formal, informal ways of interactions, sometimes personal or interpersonal or social interactions define the UX design of the software products at detail level.

 

In simple words, we can say that a set of various patterns provided in a system is responsible for UX and such system running on various devices trigger the human interactions with the product. If you want to get some clue of successful UX designs using CUBI model, you have to explore our portfolio and consult our designers for web and mobiles.

 

 

Author Bio:

Shoaib Marfatiya is an eminent writer in web development industry and its verticals. He has contributed a lot by throwing light on very intricate issues of web and mobile development community.

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.

 

 

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.