All posts in web design

18 Super Quick Web Typography Tips for Newbies


Typography always seems to be an underrated topic when it comes to web designing. In a world where your website becomes your identity, you could either choose to be the elegant, educated prince or the ignorant pauper. And yes, typography can make that difference. The design and the readability of your website is completely dependent on good practice typography. For those newbies to web design, typography predominantly has to do with the very way your website looks and feels – Its not just fonts and font size, there is a lot more to learn.

Eye Movement Patterns in Web Design


One of the most overlooked design principles in web design today is eye movement patterns. All too often, web designers are so overly focused on making their website look “pretty” by adding distracting graphics and animations, using overly complex background images, drop shadows, and glowing form fields, that they forget why they are making the website in the first place. How could this happen? It seems like a lot of designers have the misconception that “web design” translates to “make a website look pretty”. In fact, this couldn’t be further from the truth. A good web design effectively satisfies the purpose of the website first, and then looks pretty second. Building a poorly designed website is like building a house out of marble, granite, and imported Spanish tiles, and then forgetting to add in windows and doors. A good architect pays keen attention to the purpose of the house – creating living quarters that are accessible– and then filling in the details with nice materials. Eye movement patterns are the foundation of web page usability. The purpose of this post is to define eye movement theory in web design, explore hot spots, dive into F-patterns, and help get you on track towards effective web design. Let’s get started!

User Experience: Designing Form Validation the Right Way


Today, we’ll be examining what form validation is and why you, Joe Webdesigner, should care about it. Here’s a teaser: it’s one of the easiest ways to improve the usability of your designs and most web designers forget about it all the time! We’ll also showcase some examples of great form validation design. Read on young grasshoppers… knowledge awaits.

A Complete Beginner’s Guide to Web Accessibility


Most beginners in development and designing will not look deeply into accessibility, the purpose of this article is to educate beginners as early as possible of the possible pitfalls and how to avoid them. It is like a cookie jar is atop the shelf and a kid is trying to reach it but can’t. What happens next? Frustration enters! Not providing a way for your visitors to get a grab of that cookie jar is very not fine, especially when they really need it.

Where is the Future of Web Design?


Everything seems to be moving at such a faster pace than it used to. We’re seeing instantaneous developments and access to information like never before through the likes of Google and Wikipedia. All of this information has me questioning where the future of web design is heading.

Although it’s not so easy to read the future we can make some heavy conclusions and predictions about where things are heading. With current trends in the design landscape unfolding we’re starting to see paths illuminate and new ideas sprouting up. Those of us who follow these trends will be the designers who can rise above the rest and fill into the new age of technology.

How To Build A Mobile Website


Over the past few years, mobile web usage has considerably increased to the point that web developers and designers can no longer afford to ignore it. In wealthy countries, the shift is being fueled by faster mobile broadband connections and cheaper data service. However, a large increase has also been seen in developing nations where people have skipped over buying PCs and gone straight to mobile. Unfortunately, the mobile arena introduces a layer of complexity that can be difficult for developers to accommodate. Mobile development is more than cross-browser, it should be cross-platform. The vast number of mobile devices makes thorough testing a practical impossibility, leaving developers nostalgic for the days when they only had to support legacy browsers. In addition to supporting different platforms, each device may use any number of mobile web browsers. For instance, an Android user could access your site using the native Android browser, or could have also installed Opera Mini or Firefox Mobile. It’s fine as long as the smartphone uses a progressive web browser (and it’s safe to say that most browsers are progressive nowadays), but it doesn’t have to.

15 UI Design Patterns Web Designers Should Keep Handy


User interface design patterns help create consistency throughout the web, and provide a great resource for web designers looking for the best tested, most usable, and most efficient layouts. Many things in life are in a pattern, and this includes applications in both design and development. Whilst creativity and thinking outside the box is a must in design, so is conformity much of the time. UI patterns in web design are gaining recognition as an important resource to consider, and creating designs around them can help any website be more user-friendly.

Understanding the F-Layout in Web Design


As the next part of our Web Design Layouts series, today we’re going to examine the “F Pattern Layout”; Rather than trying to force the viewer’s visual flow, the F-Layout gives in to the natural behaviors of most web surfers and it uses scientific studies to back it up. This tutorial will walk you through the principles of the F-Layout, why it works, and how you can create your own.

Billboard Web Design: How to Win Your Audience’s Attention

Let’s say you’re driving down the freeway at 65mph and you see the roadside plastered with advertising posters on both sides. Some small, some large, all meant in some measure to cause you to remember a brand or identity, to keep that company name in your mind. The more saturated the roadside becomes with advertisements, the more the brand has to be distinctively creative, unique and memorable.

Generally, the eye-catching ads are mostly the ones with witty taglines that are easy and fun to remember. As much as the colors of the images and fonts being used are important to make it easy on the eyes, the idea actually has to be unique and simple enough to be separated from other commercials.

Priming Your Audience To Do What You Want

When someone is on your product page is it only that page that persuades them to buy? Might the pages leading up to that product page also contribute to their decision? Could a single word on your home page or the color choice of your navigation bar have subtly influenced that person to add your product to their shopping cart? The answers lie in concept known as priming.

Designing Effective Entry Points in Web Design

Creating an inviting “entry point” is important in any type of design discipline, but especially so on the web where attention spans are low and the the first moments of a user’s visit can make it or break it. Whether your goal is to create a flashy “splash screen” or you’re designing a more traditional homepage, there are simple design decisions that you make can to improve your chances at keeping visitors on your site.

In this article, we will outline the main principles of designing an effective entry point for your website. We won’t be discussing any specific elements in depth; Rather, we’ll be examining the overarching principles that any designer should have in mind when creating that ever-important first impression of a site.