Tag Archives: web designers

Current Common Practices in Web Typography Part 1


It is true that web typography is a bit different from print and constantly evolving due to ever-changing nature of web itself. At present, we are experiencing new opportunities on presentation front due to emerging mobile era as well as facing intricacies in implementations. These all force us to reconsider our practices and outlook.


Day before yesterday, we were focusing on the print media and little on web media for static desktop like devices. Today responsive web designing practices have changed the entire landscape of web typography. Therefore, today we have to think about the font type, style, font size, and spacing in respect to the ever-changing viewports according to the client mobile and desktop devices. We strive to optimize readability of the web typography across the devices, browsers, and OS. In due course, we need to focus on certain current common practices prevailing in web typography landscape. Let’s check one-by-one.

Type Face

The choice of typeface sets the tone of the entire website and sends right or wrong messages by creating an atmosphere. Our designers are struggling between the Serif and Sans Serif typefaces for an appropriate choice since 2009. If we look back in the web typography of 2009, it was increasing trends for sans-serif typeface in body copy as well as in the headlines. Today designers are creating contrasts in body copy and headings by interchanging of serif and sans serif typefaces in order to improve readability and visual appeal of the website.

If we fine grain the data, we may find that serif typeface has replaced the sans serif in body copy gradually over the last four years. We can see the emerging trends for Georgia and Arial as the most popular typefaces on the responsive websites like The Guardian, Financial Times, BBC, etc.

The Most Common Typefaces

Besides Georgia, there are other popular typefaces such as Chaparral Pro, Freight Sans Pro, Helvetica, Verdana, etc. which have taken place in either body copy or headlines/headings and differentiate from others by creating contrasting effects. However, interesting trends are also visible for the non-standard typeface usage on the recent web development, especially in responsive websites made for multiple devices and screens. This indicates the increasing diversity in web typography.

Diversity in Typeface

As we use CSS in responsive design and fallback typefaces including standard core Web fonts like Times, Times New Roman, Arial, Georgia, Helvetica, etc. are used predominantly as mobile platform fonts. Ironically, comeback of Times, and Times New Roman have widened the diversity of web typography still keeping the old players intact. The real genesis of diversity is leaning trends towards individuality and responsive web on designing landscape.

Many smart web designers are experimenting with typefaces mostly in headings because drastic changes in body copy may prove disastrous particularly in case of responsive designs. However, use of alternative fonts for body copy may create rich panorama and bring more diversity in web typographic landscape.

Fortunately, Lujayn has dedicated web developers who are accustomed with current trends and common practices in web typography landscape and capable to make your project a success legend in this fiercely competitive market.

Working with and Building Modal Windows in Web Design Part 1


Modal windows are offering extra spaces on the screen without intimidating user experiences if designed smartly. No doubt, making its semantic is the need of moment. Therefore, let’s check the best practices and trends for working with modal windows in your web design project.


In web design whether for static or responsive websites, you need to take care of readability, usability, accessibility, and functionality during entire designing and programming process. In due course, organization of information architecture along with design layout is crucial and demanding a bit experiences as well as expertise.

At present, most of the websites are business oriented and highly relying on online identity to accomplish their critical tasks or processes of the business. Therefore, intricacy in design and functionality is natural. Majority of clients and their web developers are screen real estate hungry. They constantly try to include maximum info in minimum space. Thus, their trade-off with layout blocks and responsive design become more complex and force them to find out innovative ideas to justify their content needs.

Technically, we have innumerable GUI elements and structures to organize our ever-increasing content needs. For instance, jQuery-based sliders, Ajax based tabs, and simple pop-ups or modal windows through programming. Among these, modal windows have certain advantages to do off-canvas designing for web and mobile platforms.

Advantages of Modal Windows

Let me list those advantages in brief just to mention:

  • Modal windows are quite smaller UI element in most of the cases so save space
  • It is floating over the existing page so you need not to create special space for them in your layout, just give links or CTA UI element to pop it up
  • It never requires loading of entire page and simulate the Ajax like functionality so end-users like them so you can consider the modal window as improved usability step in your web designing
  • You can move modal window simply by dragging it on the existing page so offer great convenience for users
  • As modal windows are part of off-canvas design, you can add them in multiple occasions and in as many as you need, of course, don’t exceed here too

Contextual Usage of Modal Windows

No doubt, modal windows are excellent structural UI elements, but they are not applicable on all sorts of content or media so be careful while incorporating in your UI designs. Here I am going to listing and depicting where and when modal windows elements should use and not.

For Lightbox

In these days, our images and videos are of large to extra-large size. Therefore, incorporating them on live web page or UI prove costly and strenuous for layout designers. If we use lightbox for images and videos we don’t have to load or reload web page frequently and can reduce the loading burden until lightbox is not opened. You can use thumbnails of images/videos at linking UI element instead of mere text link or simple button. Thus, you can give ideas of the content before clicking it.

Moreover, you have many options to highlight your content of lightbox in modal window design. For instance, you can blur the background of the rest of screen against the lightbox so your visitors/users can easily see the image details or watch video without distractions. Workings with background of modal windows are easy in styling so you can show your creativity freely.

Another usage of lightbox is converting modal windows into the image galleries. Here you can use auto-sliding or manual next-previous buttons to the lightbox to give best user experiences.

There is much other usage of modal windows in web or mobile UI designing, but we will check them in the next part of this series.


Author Bio:

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


Web Development Works A Bit Differently Today

Web Development Project Management
Web Development Project Management

Due to proliferation of mobile devices, internet is ubiquitous and web accessibility is very easy. People use smartphones to do everything including shopping. Therefore, businesses are sincere to have their web presence as well as mobile app in app store.

Unfortunately, latest surveys reveal altogether different things and say that only 50% small businesses in US have web presence. If you think they are busy, not true. They already know the magic of m-commerce and wish to jump into the bandwagon. What is real problem then?

They live in a myth where web development is tough to understand and some failure stories of others intimidate them to go for a website development process. In the past, web developers were discussing about the reference sites with the owners of the small businesses.


In the Past

They were focusing on the pleasing the top management or owners of the businesses, by incorporating color, design, content, etc. of the choice of the business owners. In return, businesses were not thinking about the success and contributing factors in the success. They just were taking proud of having a web presence.


Businesses Take Interests in Web Development Process

Now, scenario has changed. Businesses are discussing the strategies behind the website. They are eager to know their target audience, behavior of target audience, motivation, likeness, and dis-likeness of the targeted audience through initial research carried by the web development experts.

Now, they are ready to cooperate outsourcing companies to know their businesses and their strategies by providing supplementary information to the marketing and technical teams of the offshore web development company that, they have selected.


Businesses Take Active Role in Web Development

In the past, web development process was left on the lower hierarchy post professionals in the small businesses or big businesses. Now, top management is taking personal interests and allocate responsible and capable managers to take active part in the project management software used by the modern web development companies. They would like to interact directly with developers and designers.

Web designers producing wireframes and prototypes of high fidelity using latest designing software on the desktop and smartphones to show their live, dynamic, and interactive wireframes as well as prototypes to their tech-savvy clients instead of mere PSD or JPG or PNG files from the web designers. The live and timely feedback of the businesses making web development a bit differently than they were in the past.


Businesses Aware of Time Frame and Budget

Active interest and live interactions remain up to the completion of the website development or web application development project. Businesses are eager to know the testing results in their regular updates in PMS or through instant messengers. They are upfront asking the time line and budgets of their web development project and keep close eyes on the development process.

Many small businesses are smart enough and taking hire web developers packages as advantages and save a lot of money and time for their project. Therefore, I have put title of page as modern web development works a bit differently and create true collaborations as well as maintain partnership like relationships with web development companies in favor of both sides.



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

Gestalt had drawn some useful principles in human psychology and we web designers always and all time dealing with human psychology anyhow. Therefore, today I have decided to introduce some useful principles and their importance in web designing process.

Every individual have a different perception. They perceive things and objects in their own way. Human being when looks at an object he perceives it entirely before she sees the particular object. Human sees an object as whole before she starts seeing its parts and looking minutely about its features. Humans tend to see the objects in a group rather than as different objects, whether they may relate or not. Technically human brain has a few characteristics in which it collects information and perceives the environment around it. Following are the ways in which an individual perceives objects.


Emergence is the process of forming complex patterns with the help of simple rules. When an individual attempts to identify an object she looks at the outline first. Only after identifying outline, she matches the shapes and parts of that object and gets the clear picture of it. Emergence is a way in which an individual processes the information that she receives from his perception and draws a result.

Perceptual organization

Perceptual organization is a way in which an object that is perceived contains more spatial information then what is actually present. Generally, humans match the patters of what they see to the patterns of the objects that are actually present in their memory. Moreover, always there is no exact match present. They find a near match, fill in the gaps and spaces with it, and perceive an object in that manner.


Human brain is active in such a way that it does not rest on an object for a certain time but keeps on moving over the other information inputs that it receives. Multi-stability is the tendency of human brain to dodge between the objects perceived at a time and their alternative interpretations. An individual can perceive an object in more than one way. She is not capable of seeing both at the same time but dodges between two alternatives quickly.


Human brain is capable enough of identifying an object or processing information by just from a clue given to it. Invariance is a way of perception in which an individual perceives a single object and recognizes it independently whether of its rotation, translation or scale. Despite an objects different appearances an individual can identify it as she have developed an ability to recognize it from different perceptive.


The perspective of every individual is different from that of his fellow individuals. To attract attention and to motivate an individual to act on it you have to put forward something that attracts attention of the individuals perceiving it. In graphic design too, you will have to make a design that appeals your observers. You can get attention from your observers by designing something that touches them and appeals them based on their emotions, needs and wishes.

In this article, we have just discussed about the outline of how an individual perceives objects and environment around him, collects information, and relates to it. In the next article, we will discuss about the gestalt’s principles and their working in designing.


Inside Out of the Social Logins

Today most of the web applications and all mobile applications, which are interacting with any sort of web services on the web, prefer logins and registration of their users. There are many aspects to go for login besides the security concerns.

Most of the businesses wish to have user data in any form and want to uses either in promotional purposes or in monetise it somehow. Therefore, collecting user data becomes damn easy with signup requirements.

On the other facet of coin, filling up seven to ten data input fields, repeatedly on many sites, is a tedious job for a seasoned tech-savvy Internet user too. Therefore, modern UX designers have device social logins for their ease make life easy for many. Generally, we, almost all, have account on social networking sites like Facebook, Twitter, Google+, etc. and we have already feed tons of personal information during their registration.

With social logins, users need not to fill up exhaustive sign up forms on various websites or in mobile applications and they simply have to give access of their social networking site access. This one-time login totally eliminates lengthy sign up process and remembering various usernames and passwords. For instance, Pinterest and StumbleUpon are offering social logins options besides their traditional e-mail base signup process.


At User Point of View

At first hand, social logins have some apparent advantages at user point of view such as:

  • Quicker Signing up
  • A predictable signup process where method is streamlined and uniform
  • Low stress on memory as you have to remember login data of only social networking sites you are using frequently
  • The most important factor is trust or reliability because you don’t know which site is using your sensitive personal data where. While social networking sites have strict privacy policies and they never let to use login data by any suspicious site at all


At Web Developer Point of View

  • Web Developers save themselves from setting up authentication system from the scratch, which is quite secure in all terms. Apart from this, if you keep social login at optional level, you have additional verification layer that this person is not dummy and real one living in real world.
  • If you wish to give intensive and exclusive user experiences by personalized your application, you have good opportunity to extract personal data from the social network
  • In some cases, users hesitate to go ahead with an app that have blank welcome screen or that app is newly developed and not have much popularity in the masses. If developer brings social login there, users will put ultimate trust and will sing up promptly.
  • Social logins provide excellent spam protection to your application if you involve them in your logins because they are using the best of the best spam and hacking protection technologies and tools and you can take advantage of them indirectly in your web programming project.
  • Finally, you can take advantage of social posting by taking prior permissions of your users to post the updates and news of your app using social login. This way you can make your application more engaging and viral at marketing point of views.


Not to Use Social Logins

If you know, very well that when and where to use the social logins and not to use you can make your web development and mobile development client happy forever.

For instance, you can’t use social logins when privacy concerns are primary issue. Same the way, you should avoid social login when you have to deal with multiple accounts. Of course, you have to restrict in offering of social accounts options as too much options for login may cause decision paralysis in users so two or three options are enough in most of the cases.

Only allocating social login is not enough, and you need to keep track of analytics and check how many percentages of users are using your social login options. If there are fewer numbers, and your brand dilution is visible, you should withdraw social logins immediately and keep traditional protocol.