Navneet Panchariya - Web Designer | UI Designer | Front End Developer

3 Key Lessons for Websites that Work

noreply@blogger.com (Navneet Panchariya) — Thu, 07 Feb 2019 09:36:00 +0000

Almost every web design story has three main actors. Each of them occupies a particular place in the story, and each has different motivations and expectations. These characters are the client, the designer, and the user.

There is a particular hierarchy that is supposed to exist between the three; but due to the nature of the process, this hierarchy frequently gets mixed up. The result is a plethora of poorly designed websites that are cluttered with unnecessary extras, which exist because of a power struggle between the client and the designer.

What we need, in order to avert this disaster, is something I like to call "Design Frugality". It sounds fancy, but it's actually very simple. Just the way websites ought to be...

1) Being important isn't important!

In the hierarchy I mentioned earlier, the user always believes themselves to be the most important actor in the cast because it is ultimately their money that the client is trying to earn. The client often believes himself to be the most important because he is putting up the money to make the website. And, sadly enough, the designers often believe that they are the most important because without them the website will not be the masterpiece that the client needs.

The truth is that it's really the design itself that is most important. This is what connects your client's business with the users. But clients often make ridiculous feature requests, and the designer often tries to impress the customer with how many "cool features" they can build into the site. Did you notice who gets forgotten in all this? That's right - the user!

2) What clients want isn't always what they need

When you put the needs of the client ahead of the needs of users, or your own needs ahead of both, the result is often a website that fails to achieve its task (connecting users with your client's business).

I've lost count of the number of consultations that went something like this:

BOB: ...And I want you to make the site in WordPress, and I want a carousel on the home page, and we need to have RSS...

ME: Why?

BOB: What do you mean "why"?

ME: I mean why do you need WordPress? Why do you need a carousel? Why do you need RSS?

BOB: Well... doesn't everyone have those things?

ME: No, Bob, they don't. Let me explain something. You own a hammer factory. You make four different kinds of hammers. You're not going to be updating the site regularly, your inventory certainly doesn't require a carousel to display it, and it's pretty doubtful anyone will want to subscribe to a feed about hammers.

BOB: So what are you saying?

ME: You don't need that stuff, Bob. It's dead money. We need to show people your hammers and tell them why your hammers are the best.

Bob's problem is that he suffers from copycat syndrome. If everyone else is doing something, he figures he should be doing it too. Sure you could just give him what he wants, but you'll be doing him a greater service by educating him about what his users will want.

Users visit sites to find information, or to be entertained. When you visit a supermarket for the first time, do you spend your time admiring the interior of the store or wishing it was easier to find where they keep the liquid soap? Focus on making it easy for the users to find what they are looking for and make that your priority.

3) Make your site just as awesome as it needs to be

I'm not saying you can't make a really cool design that totally rocks. What I am saying is: Don't just add things because they are awesome, add them because they are needed. If you don't need something, don't add it!

Avoid flashy technologies and stick to standards-compliant HTML5. Add JavaScript sparingly; if you only need to show 2 images then using a slideshow looks silly. Really, it does! Avoid putting too much content on CDNs, and limit the number of assets you're loading. Optimize everything, there is literally nothing on a website that cannot be compressed, sped up, or improved in some way. Don't go crazy with images.

Web design has inherited a lot from other design disciplines, but if there's one thing that's more true in web design than any other field, it's that less is more.

(courtesy: www.webdesignerdepot.com)

Does Responsive Web Design make you more Money?

noreply@blogger.com (Navneet Panchariya) — Wed, 26 Dec 2018 12:51:00 +0000

Getting your website mobile-ready is attracting a lot of attention of late. Just yesterday Google rolled out a hefty algorithm change that will put an increased emphasis on mobile-usability as a key ranking factor.

Most businesses are starting to realize that more customers are visiting them on the web via their mobile devices yet few are acting on that potent piece of information. In a recent study of the top 10000 websites, fewer than 19% were utilizing responsive design, and for the top 100 websites that number is a puny 12%. Some of the largest companies in the world are serving up a very poor user experience to about half the users hitting their site.

People don't have the patience to scroll over, expand the screen and try to determine what the meat of the page is on those tiny smartphone screens. They are just going to click the back button and try out your competitor. For the companies who get it, this is a huge opportunity to add value to their customer experience and win new business in the process. For those who don't, I hear there are some cool new animated gifs they might want to try out.

Now we know Google hates non-responsive websites on par with cruddy link spam. We've also established that your visitors have you on an extremely short leash, but are we asking the right questions? After all if a website converts, shouldn't that be what truly matters? Its time to ask that critical question - do responsive websites actually translate into higher sales? Let's dig into the raw data and determine if responsive design really is the hat trick of web development.

Are you providing poor customer service? You've got well-trained phone reps. You consistently grade out as one of the top customer service providers in your industry. Yet if you don't have a mobile-ready website, your customers think you don't care. 48% of users said just that when faced with a traditional website hopelessly trying to adapt itself to a mobile environment. Who can blame them?

Put yourself in the customer's shoes. Can you navigate those tiny drop down menus? What about picking a different shirt pattern from those minute color swatches? Can you even get back to the website once you land on the terms and conditions page? Trying to force a traditional website into a mobile environment puts hurdle after hurdle in front of your potential customer that ultimately leading to abandonment of the sale.

Monetate's numbers seem to support this. One of their metrics looks at conversion rates by device quarter-over-quarter. In the most recent quarter, traditional desktop environments converted 3.11% of visitors while tablets were not that far behind at 2.59%. Smartphone heavily lagged the pack at a paltry 1.01%. When you consider a responsive adoption rate of 19%, is there really a question why this great divide exists?

Econsultancy reported that 62% of companies saw increased sales following a conversion to a mobile-ready website. While that number is nice, it is also painfully vague. It begs the question who are these companies that are seeing results and at what magnitude?

WebUndies specializes in sleepwear for the whole family. This e-commerce retailer took the mobile plunge in 2012 and saw sales rally 169.2% over the year prior. Think Tank Photo provides any accessory a photographer could ask for. When they made the switch to responsive, it translated into a 188% increase in revenue. Not only that, but mobile page views jumped 200% with double the transactions originating from smartphones and tablets.

It turns out even surfers are browsing the world wide web while looking for that perfect wave. O'Neill Clothing saw perhaps the most impressive increases after their conversion to mobile-ready. Transactions went up 112.50% on iPhones and 333.33% on Android. Conversions rang in at 65.71% on the iPhone and 407.32% on Android. Total revenue cleared 101.25% on iPhone and 591.42% on Android. I don't know about you, but I've got to wonder what the heck was so different about that Android-optimized platform that resulted in these spectacular gains over iOS…

Still not convinced? Chris Leake captured some random Tweets on Twitter of companies showing off their responsive gains: State Farm saw a conversion rate of 56% post move; Career Builder tweaked their email design and had click through rates run up 20%. While they aren't the eye popping numbers we saw before, it is still impressive. It also may hint at the fact that responsive design can't overcome poor design which can blunt your overall results.

Responsive design doesn't just boost sales. The Aberdeen Group looked at a bucket of customer engagement metrics including brand awareness, average order value and company revenue. The year-over-year results showed significant improvement across the board. Conversion rates were 8% higher with responsive design (10.9% to 2.7%). Brand awareness increased a whopping 30% (34.7% vs 4.8%). There wasn't a single category that didn't see significant gains after the responsive design switch.

With desktop PCs on the decline and mobile devices quickly taking over our lives, people will rely more and more on the convenience of shopping on their mobile devices. Companies that ignore this tidal wave of human behavior will ultimately pay the price in lost revenue and lost market share.

I must admit that I'm oddly curious to witness the aftermath of Google's mobile algorithm this week. Will massive traffic drops be the lightning strike that forces a change, or will companies continue to go extinct online by not prioritizing their website presentation?

(courtesy: www.webdesignerdepot.com)

Should Designers Learn to Code?

noreply@blogger.com (Navneet Panchariya) — Tue, 27 Mar 2018 05:25:00 +0000

The internet was abuzz for a long time, and the debate continues. To code or not to code? It remains a charged topic with strongly opinionated advocates on both sides.

Let's put it to rest. It's 2015. Web design has come a long way. We have ridiculously specialized roles now (like "User Experience Analyst"); it's no longer one designer plowing through the full development stack on their own. We have better tools and efficient best practices.

Let's examine both sides of the argument:

Why you don't need to code

With the right tool, a designer simply doesn't need to know how to code to build a beautiful, functional, and responsive website. What's more, most designers simply don't want to code. And there's nothing wrong with that. It's called specialization. In the past, there was nothing designers could do to get around the necessary development work (if not by them, then by someone else). It was a necessary nuisance. But that's no longer the case - we have professional drag-and-drop tools now.

Designers are no longer limited to creating static wireframes and mockups. With tools like Macaw, designers can easily create live websites using simple drag and drop principles. Guess what? Website builders don't suck anymore. Webflow, for example, generates clean, W3C compliant, HTML and CSS that's better than what most developers write by hand, it's based on Twitter's Bootstrap framework, and it works remarkably well.

And, no, you're not limited at all in terms of functionality. Further, if desired, the code generated in Webflow or Macaw can be exported off the platform entirely so you can work on it in the comfort of your IDE to develop extended functionality.

But the argument against learning how to code goes beyond merely having the right tools in 2015. It's also a matter of facing the emotional facts: You're not "lame" for not knowing how to code, you're simply realistic and efficient with your time. If you're a professional designer, you should be the best designer you can be. After all, design trends are constantly shifting and new techniques are endlessly being paraded about. There's a lot to stay on top of - more than enough to keep you busy as a designer alone, let alone also being a developer.

Let's also talk about how it's an incredibly steep learning curve to learn how to code properly. Sure, anyone can slap HTML and CSS together and pray it works across multiple devices, but most people simply can't code well enough to be doing professional client work. Those who can have worked at the craft for years. For as many trends and competing best practices there are in the designer community, there's infinitely more in the developer community. And, frankly, from a technical perspective, developing is much harder than designing. Much harder.

Why you should learn to code anyway

You better at least know what you don't know. Think about that. If you're entirely ignoring the concepts inherent to web development, you're going to be worse off for it. You should learn the basics of coding so that you can properly understand the needs of the developers you work with. Conversely, you should build the skill set and vocabulary to best express your design ideas to developers who oftentimes have conflicting technical considerations before them.

Also, quite simply, you will be a better designer if you have a basic understanding of how the development process works, why certain programming languages are used, and how they restrict or expand your ability to design your intentions. When you have a better sense of what's technically realistic before you start designing, you'll be less likely to waste your time and more likely to focus your energy focusing on the parts of your site that aren't up to the whims of the developer's implementation.

Plus, any professional working in this industry should be the type of person to enjoy the process of learning. If you don't keep your desire to learn sharp and charged, you will quickly fall behind. There are many aspects to what we do, and millions of eager people are poking their head in trying to find out if it's for them. Stand out from those people.

What designers really want

What designers really want is to be able to create their own websites. Not necessarily code them. There are two driving factors behind this:

Offering consolidated services to clients. As a freelance designer, you may not have the deep pockets to hire a developer to translate your design work into a functioning site. Meanwhile, your client doesn't want the headache of having to search for someone else to code your design then also have to manage the communication between you two. If you can perform both aspects as a designer, that's all that matters - despite whether or not you can actually code. Hence, we come back full circle to professional design tools which are worth your while.
Gaining greater control over their work. Every artist wants full artistic control over their creations. Unfortunately, a lot is lost in translation going from designer to developer. Adapting a PSD to HTML and CSS is not a 1-for-1 process in the era of responsive design. When designers are able to develop their own sites, and are consequently in charge of the entire product flow, the site benefits from the unity of their intentions, and the designer is infinitely better able to respond to client change requests on the fly.

Figure out what you want. Do you simply want to be able to code in order to see your designs come to life? If so, don't join the herd to head off to coding school; play it smart and skip the queue by learning one of the professional design tools available to us today.

Now, if you do truly want to indulge in the beautifully empowering aspects of programming, by all means buckle down and dig in - just do it for the right reasons and set your expectations appropriately.

(courtesy: www.webdesignerdepot.com)

The Future of Responsive Web Design

noreply@blogger.com (Navneet Panchariya) — Fri, 23 Mar 2018 05:09:00 +0000

It's almost incomprehensible to build a website that isn't responsive. The technique has developed to the point that most designers no longer say, 'responsive web design,' we say, 'web design,' and mean exactly the same thing.

Naturally, opinions differ on how to implement responsive techniques; many sites that claim to be responsive aren't; most sites that intend to be responsive are only superficially so; there are even a few fixed-width devotees clinging on in the face of all reason. But broadly speaking a responsive approach is the default option for all websites.

To understand where responsive design is going, we need only to look at where it came from...

Necessity is the mother of invention

The rise of responsive web design goes hand in glove with the expansion of the mobile web. Even if developing an m. site, the exponential growth of mobile devices and the accompanying variety of screen sizes makes responsive design the clear choice.

Statistics are invariably out of date, but most commentators agree that the mobile web is fast approaching 50% of all web traffic. Responsive web design has been embraced out of an economic need: we could build hundreds, if not thousands of variations on a single site, and serve the most appropriate to whatever devices access it; but the cost of developing a website would become prohibitive. Responsive web design is the only way the Web remains viable.

It's easy to see responsive design as a definitive solution for the Web. However, as tech continues to develop, the way we approach responsive design will inevitably change.

Responsive design for wearables

Unless you've spent the last year in a sealed capsule (attempting to prove your suitability for the Mars One mission) you'll be aware that Apple have launched a wearable device: the Apple Watch.

The Apple Watch is not the first wearable, it's not even the first smart watch, but it is the watershed device because the public will see the Apple Watch as 'the best' wearable - the iPod was not the first MP3 player, the iPhone is not the best smartphone, but both dominate their markets - thanks largely to the size of Apple's marketing budget.

The most notable thing about the Apple Watch is that it doesn't have a web browser. It's a fair bet that that's the case not because Apple didn't want to include a browser, but rather, because they couldn't make it work.

Even with the spread of responsive design, the 272px by 340px of the Apple Watch are insufficient to display anything but a couple of lines of text. An architect could design a building that's 15 inches high, but no one would ever use it, because the human body is a fixed size range. Apple aren't the only company facing the issue. Android wearables are exactly the same size give or take a few pixels, and are equally ill-equipped for displaying the Web.

We can't make devices larger because they become unwearable, and we can't make them smaller because of our stubby inaccurate fingers. The cold hard fact is that the Web does not work on a screen the size of a postage stamp.

Portions of the Web do work on wearables. Native apps connect to the Web (or to your phone, which connects to the Web) in order to retrieve data. The just can't display full web pages.

Buy a wearable now and you can read the tweets of a company CEO, but what an investor really wants to read is the full annual report. Buy a wearable now and you can check flight departure times, but what a traveller really wants to do is book a flight. The Web is inextricably linked to our lives, a few lines on a tiny screen does not meet consumer demand.

Sooner or later (it's probably already happened behind closed doors) someone at Apple, or Motorola, or Intel, will accept that to dominate the wearable market they have to deliver the full Web in all its jQueried glory.

The future of responsive design

As the tech industry continues to develop new devices, with new capabilities and limitations, the challenges we face as web designers will inevitably change.

As Jeffrey Zeldman wrote a few days ago:

One of the key areas for focus in any responsive design is navigation, and one of the key developments we're likely to see in wearables is a change of input method: sensors in a wriststrap could detect the tightening of tendons in the wrist, tracking the movement of 5 digits, or at the very least detecting the clench of a fist as a replacement for click or tap actions.

The key development will be a means of presenting longform content on a wearable. And actually it already exists: the most viable option for delivering large amounts of data on a wearable device is audio.

Audio input is already viable in the forms of Siri, Cortana, and OK Google. More importantly, audio output exists in the form of screen readers. With the relatively short lifecycle of devices and the increasingly long lifecycle of websites, the projects you build today will need to function with audio browsing. The simple answer is to make your sites accessible.

Frequently, when products are innovative, we expect it to take some time for standards to evolve, but in the case of screen readers standards already exist. What's compelling for tech companies looking to deliver a wearable web, is that a large proportion of existing websites already meet that standard.

The future of responsive web design, or perhaps simply web design, is one in which designs are not just screen agnostic, but screen independent. In practical terms, it means dropping mobile-first, and adopting an audio-first approach. If your sites are optimised for screen readers, then they will function effectively on the next generation of web browser.

(courtesy: www.webdesignerdepot.com)

7 Skills Every Web Designer Must Master

noreply@blogger.com (Navneet Panchariya) — Wed, 17 Jan 2018 09:29:00 +0000

Web design is as much a science as it is an art form. While half of the job is based on sound coding and design know-how, the other half is based on just having an intuitive sense of what looks good and what doesn't. Any web designer worth his salt will develop a strong core of fundamentals to make himself stand out from the rest of the pack.

So how do you develop these fundamentals? They won't just appear overnight. Sure, there is no substitute for experience, but a strong education - whether formal or not - also helps tremendously. It's also highly advisable to keep challenging yourself and push beyond the limits of your comfort zone. That will mean the difference between struggling to find and keep clients and actually having clients come find you.

Here are the absolute fundamentals that all good web designers should possess if they want to reach sublime levels. They don't all involve technical, computer know-how.

1) Be familiar with the entire design process

Note how I said "entire"? Web design can also overlap with graphic design, which makes these schools of design very close. That's why it's a smart idea for any web designer with pride in his work to also learn at least the very basics of the design process in general. This includes the following principles:

COLOR

Color is at the heart of web design because it helps to establish the theme and motif of any effective design. In addition, it also works on the psychological, where colors influence how a site visitor views his user experience.

FLOW

Flow is a reference to a site visitor's visual movement as he experiences the website. Flow includes the proper use of depth, color, hierarchy, shapes and lines. Flow tools include perspective, spacing and facial direction.

BALANCE AND PROPORTION

This means visual stability and equilibrium. It's possible to get proportion in two ways: symmetrically and asymmetrically. Proportion's normally used to signify important elements, thereby bettering the flow of information.

SPACING

Spacing is pretty much straightforward. It relates to the distance from one element to the other. All websites with a great user experience are well-spaced. Generally, the space ought to be generous enough for the elements to breathe while still being narrow enough to ensure good readability. It's a balancing act.

2) Know HTML like the back of your hand

Knowing HTML comes down to coding. Some designers seem to think that it's okay not to know how to code while others are adamant that knowing how to code is a necessity of being a legitimate web designer. At a bare minimum, a well-rounded designer should know the basics of HTML. At the very least!

Since HTML is the basic framework of all pages on the Web, a designer should be knowledgeable about it. As a result, a designer will be able to design with more purpose and attention to usability than ever before. If you know basic code, you can create demo sites that you've designed, you're in a better position to sell your services than other designers who don't know coding, and you'll have a better grasp of the scope and limits of your design abilities.

3) Understand the finer points of creating killer copy

As a web designer, you'll be asked to do more than design; you'll sometimes also be asked to create site copy. This is especially true if you don't work with any copywriters. Think of it this way: A designer who also has mad copywriting skills is that much more attractive to clients and can charge more.

Don't think that knowing how to write effective copy is just something you can use when you're designing clients' sites. Knowing how to write effective copy is an unbeatable asset when it comes to marketing your services as a designer in the first place. Just think of how much more effective your marketing emails will be when you learn how to craft stellar copy.

4) Commit to constant learning

The phrase "There's always better" is what you should live by as a web designer. You can always learn new things that will impress your clients, expand your creativity and skills and generally improve your passion for design.

One big reason to always be open to learning more is the fact that new trends are always emerging in web design. Just think of the stuff that's been talked about in the last few years: parallax scrolling, then flat design and now, Material Design. In design, learning is ongoing. You never stop learning, so you can always be on top of the latest trends, which just makes you nicely well-rounded as a designer.

5) Develop some business skills

A lot of web designers work freelance at one point or another in their careers, so it only stands to reason that you should develop those all-important business skills. You are your own business, and the highly prized service you are selling is your web-design talent. Without business skills, you'll be floundering in the all-important areas of marketing yourself, finding clients, maintaining clients and doing all this productively.

If you know how to run a business, you'll be able to make decisions related to taking on clients and projects with much more certainty than ever. You'll also learn about the multi-tasking skills it takes to juggle being a creative designer with the practical talent it takes to make money and keep making more of it as you grow in your career.

6) Master the art of great listening

Since you work with clients based on what they tell you they want for their website needs, it only stands to reason that you have to become a master listener. Being able to listen well is a life skill that you can use across so many different areas, so why not master it as a web designer?

You'll never be a successful designer - in the business sense - if you either fail to listen to your clients, or refuse to listen to them. Your clients will always be asking or telling you to tweak and change designs, sometimes midway through. Instead of getting frustrated and coming across as unprofessional - which will hurt your business - learn to listen to what they want, consider it and then offer your own input and suggestions. If what the client wants is very doable, then all the better. Simply implement it and show how attentive you are to your client's needs.

7) Reach your web-design zenith

In any trade, reaching the heights of your profession is what you should be aiming for. It will not come overnight or even in a year or two, but you'll eventually get there with constant determination and self-improvement. If you're highly passionate about your craft, you'll automatically drift to this state of being anyway, but you can do things to speed up this process.

Essentially, it's all about a web designer becoming well-rounded and consummate. The more you work on things that go beyond merely just design, the more you become a much, much better web designer. And that's when you start to penetrate through to master status.

(courtesy: www.webdesignerdepot.com)

Are Design Patterns Destroying Web Design?

noreply@blogger.com (Navneet Panchariya) — Fri, 13 Oct 2017 06:50:00 +0000

Design patterns are common solutions to common problems. When you add a slider to a homepage you're employing a design pattern. When someone asks: "Why reinvent the wheel?" they're advocating the adoption of a design pattern.

On the Web, the term "design patterns" most often refers to programming techniques, however design patterns also exist within visual design. And whilst solving a recurrent coding problem with the same solution is an efficient approach, reusing a visual design is not as desirable.

WHY DO WE USE DESIGN PATTERNS?

Design patterns are far less common in print design than on the Web, despite the fact that print design has had much longer in which to devise them. The reason for this is that web design is heavily influenced by disciplines such as information architecture, coding, and usability; all of which embrace the use of design patterns.

Programmers don't value originality, they value effective, elegant solutions. If you've ever written in PHP you'll know that there are numerous ways to retrieve data from a database, but most PHP coders have one snippet they use time and again. If you've written JavaScript you'll know that there are a variety of ways of looping, but one of them is more efficient, and generally preferable. In fact, most code editors have a snippets function precisely because programmers reuse solutions.

Designers on the other hand, do value originality, and whilst it's probably true that some designers use design patterns because they lack the imagination (or courage) to do otherwise, most designers are simply adopting a formula that has been proven to get results.

However using a design pattern isn't natural to the design process, and that's why you'll find the most obvious design patterns where coding has a greater influence. Compare the websites designed for mobile apps, more often than not you'll see they employ the same design patterns over and over: The app is displayed on a phone, aligned to the left or right; next to the phone is a tagline, and a call to action; the background is a blurred photograph usually of a coffee shop.

DO DESIGN PATTERNS WORK?

Design patterns certainly appear to work. They are conventions that evolve over time, and it's incredibly rare that a design pattern is creditable to a single individual. Like cultural darwinism, those patterns that survive to the point that they're identifiable as patterns, must be successful.

Design patterns are also probably the simplest route to success for a web designer. They deliver proven solutions that hundreds, if not thousands, of clients have already signed-off on. What's more, design patterns don't need to be beta-tested, they don't need A/B testing, you probably don't even need to have your Mom try them out, because design patterns are tested across the Web on a daily basis and only the ones that work survive.

But whilst design patterns (appear) to work for clients, they don't work for designers. Employing a design pattern is the creative equivalent of painting by numbers. And if we're honest with ourselves, we're in this for more than a paycheck. Yes, you have a responsibility to your client to deliver the best results possible, but you also have a responsibility to yourself. If you're not going to be creative, there are easier ways to pay the rent.

Proponents of design patterns argue that they increase engagement by providing the end-user with a common UI that they are familiar with, ensuring that a design has a shallow learning curve. That however, is an out-dated way of thinking. Sure, if you're creating a complex app, some conventions will help your users find their way around, but it's very unlikely that you'll ever design a website for a demographic that has no experience of the Web.

Back when the Web was new, it made sense to make every link blue. It helped people find their way around. But a common language for links is no longer necessary because we understand where we're likely to find links. As witnessed by the fact that the blue link design pattern is no longer omnipresent.

The problem with design patterns is that whilst they appear to work in the short term, they also have a best-before date; and no one knows what it is.

EXTINCTION LEVEL EVENTS

Design patterns evolve like flora and fauna, the best, or perhaps just the most adaptable ideas thrive and propagate. But, like the dinosaurs that never saw that meteorite coming, design patterns encounter extinction level events.

An extinction level event is a change so rapid, that evolution isn't fast enough to adapt to the change. The T-Rex may have ruled the forests of the cretaceous, but it couldn't cope with a couple of degrees temperature change as well as that small shrew-like mammal that scurried past it unnoticed.

For many design patterns, responsive design was an extinction level event.

Until the explosion of mobile design, one of the most used design patterns was the holy grail layout (so called because it was considered ideal, but difficult to achieve with the CSS that was available at the time). When the mobile web introduced the need for responsive design, holy grail layouts fell out of favour because whilst they still worked for desktop, they don't readily adapt to mobile screens.

Problems that designers have to solve don't exist in a vacuum. The Web is a constantly changing ecosystem, with external influences, internal pressures, as well as seemingly random changes. When we use a design pattern, we're solving yesterday's problem, with yesterday's solution; and we leave today's problem unanswered.

SOLVING THE PROBLEM WITH FIRST PRINCIPLES

First principles is a method of logical thinking that reduces every problem down to core ideas that cannot be deduced from one another.

To paraphrase Wikipedia's superior example: All browsers are buggy; Safari is a browser; Safari is buggy. The third statement is unnecessary as it can be deduced from the first two statements.

Elon Musk is a devotee of first principles thinking. Last week, VentureBeat reported that Musk's company, SpaceX, built a space rocket for around 2% of the usual cost, simply by applying first principles thinking.

The antithesis of first principles thinking is analogous thinking; design patterns are analogous thinking. When you rely on a design pattern you're taking on a problem you may not need to solve. If you style all your links blue, you're solving a usability issue from 2000, but it's a problem that barely exists in 2015.

By adopting a first principles approach, we focus on the core of the problem that our client actually has, without inheriting unrelated problems that are solved by other people's design choices.

IN CONCLUSION

Design patterns offer effective short-term solutions to common problems. However, the more prevalent the design pattern the more established it is, and the greater the likelihood that it's approaching an extinction level event.

Instead of comparing solutions, and deriving answers from other people's answers, we should be focusing on our clients' current problems.

The Web is constantly changing around us, and design continues to evolve, by adopting a first principles approach we can produce work that is robust enough to survive online. Who knows? You might even get to be creative.

(courtesy: www.webdesignerdepot.com)

How to Design the Perfect Single Page Website

noreply@blogger.com (Navneet Panchariya) — Fri, 29 Sep 2017 09:06:00 +0000

Single page designs can be an excellent technique for tackling smaller websites, even those that you might not think could ever be done without multiple pages. There are tons of great reasons for using a single page site, from ease of maintenance to reduced bandwidth needs.

If you're tackling a shorter site, one that would normally have a handful of pages, consider using a single page, and see if it will make the project easier and more user friendly. Read on for more information on the benefits, when (and when not) to use them, and some best practices you should follow.

THE BENEFITS OF SINGLE PAGE DESIGN

Obviously, single page designs are not ideal for every project. But there are a host of reasons to use them if they're a possible fit.

THEY'RE INTUITIVE TO USE

By default, all a user needs to know to navigate a single page site is how to scroll. You might include arrows or other navigational clues, but with rare exception, simply scrolling will bring your visitors from one section to the next.

You'll never have to worry about your visitors getting stuck in multiple layers of navigation, endlessly searching for what they need. The use of a header or other navigational links is often helpful if there are multiple sections on the page, but even without them, the site is usable.

IT CAN BE FASTER AND EASIER TO MAINTAIN

While this one is not a given, a well-coded single page site is probably going to be faster to code than a multi-page site. The design process can sometimes take less time, though that depends on how complex the single page is going to be.

A single page site can also impose certain design restrictions that speed up the process once you have a basic layout in mind. Moreso than a multi-page site, a single-page site has to have sections that work seamlessly together. That kind of restriction can really speed up page development once you've clearly defined what you can and can't do.

Maintenance can be easier, too. When you only have a single page to deal with, maintenance is more streamlined, so long as your code is written well to begin with.

YOU'RE FORCED TO SIMPLIFY

This one builds off the previous point. When you only have a single page to work with, you have to simplify things to their most essential components. No more pages and pages of useless marketing propaganda. You have to get to the point right away.

BETTER SEO POTENTIAL

Quality inbound links are a big part of how well a website performs in search engines. While search engines aren't necessarily the largest traffic source for a lot of sites, they're still generally important.

By only having one page, you only have one page being linked to. That can increase the importance of the site as far as search engines go.

STORYTELLING CAN INCREASE ACTION

Single page sites often use a storytelling angle that multi-page sites aren't as good at. This can increase conversions and inspire visitors to take action.

People are used to following stories, both online and off, so this has obvious user experience benefits. We've been reading and hearing stories since we were children, so it's something that comes naturally to us.

EASIER TO ORGANIZE

There are no more endless lists of pages and sub-pages to organize. No more wondering if this page or that page should be a parent or a child. No more huge navigation menus and sub-menus. It's all on one page. And whether you decide to include navigational links, or simply let users scroll, is up to you and whether you think it will add to the user experience or not. That's just not an option when a site has multiple pages.

REDUCED BANDWIDTH

While this isn't as much of an issue on the hosting end anymore, prefer a Dedicated Server, consider how many users are accessing your site using mobile devices these days. Decreasing the amount of bandwidth your site takes is appreciated by users with limited data plans.

ELIMINATE MOBILE SITES

Responsive design is, of course, not limited to single page sites. But the more complex a site is, the more difficult it is to make it work well on a smaller screen, even with a responsive design. A single-page site is, by necessity, not complex. Making the design responsive is generally easier. Simplified navigation and similar changes also make a design that works well on small screens easier.

TO PARALLAX OR NOT TO PARALLAX?

Depending on your point of view, parallax scrolling is either the best thing to ever happen to the internet, or an overused, gimmicky scourge upon our browsers. But regardless of where you stand, it doesn't look like it's going to disappear any time soon.

Personally, I feel like there's a time and a place for parallax scrolling. Some one page sites can really benefit from the effect, while others come across as gimmicky, or worse: hard to use. The key is to decide if the parallax scroll effect you want to use is something that will actually enhance the usability of the site, or if you only want to use it because it'll look cool.

Another thing to consider if you decide you do want to use parallax scrolling is whether to use JavaScript or a plain CSS technique for doing so. See the resources section for more about both options.

WHEN TO USE A SINGLE PAGE SITE, AND WHEN NOT TO

While there are a lot of benefits to single page sites, they're not a perfect, one-size-fits-all solution. There are plenty of times when you shouldn't use a one page design, while there are plenty of other times where a single page site makes a lot more sense than a multi-page one.

If you're setting up a site that would only have a handful of pages anyway, then a single page site might be perfect. Condensing everything onto one page can give the overall site a more modern look, and if it's light on content anyway, then a single page site can make it look like it has more substance.

Another common example of the one-page site is the pre-launch website. These are, more often than not, a single page, often with a form for a newsletter sign-up. In most cases, the information provided to the public during the pre-launch can easily be organized on a single page, so it makes sense to consider this style first when designing these pages.

Single-product ecommerce sites are another place where single page sites can be great. If you're only selling one product, whether that be a physical product or a digital one, then why bother with multiple pages? A simple, single page site can be a much better sales tool.

You might think that a more complex ecommerce site isn't a good fit for a single page site, but it still can be. Granted, I would avoid it for sites that have more than a dozen or so products, but a simple online store can easily be held on a single page, with modal windows for loading product details and the checkout process.

When not to use a single page site is pretty straightforward: sites that are large, complex, or by default need to have large amounts of information are not suited to a single page site. In those cases, you're much better off with a more traditional site structure.

HYBRID SITES

While there are a ton of great single page sites out there, there are also a lot of hybrid type sites. They give the impression of a single page, but by using ajax, modal windows, and the like, they actually contain multiple pages of content.

The Dang & Blast site is a great example of this.

These can be a great solution if you just can't quite get everything to fit in a single page.

Some sites sort of "cheat" when it comes to the single page. They have a single page for their main website, but then have a blog on another domain (sometimes a Tumblr or WordPress.com hosted site). There's nothing wrong with this, and it can be a way to keep your message on your main site focused, without giving up the benefits of having a blog.

BEST PRACTICES FOR SINGLE PAGE SITES

Most of the principles of good design are still applicable in single page sites, as they are with any good website design. But there are some additional things you need to keep in mind, some of which have already been touched on above.

KEEP IT SIMPLE

Trying to make a design that's too complex for the content you're trying to present isn't doing you or your users any favors. Instead, simplify both your design and your content as much as possible, while still presenting what you need.

NAVIGATION LINKS ARE STILL HELPFUL

Just because users can scroll to navigate your website, doesn't mean that's the most user-friendly way to do so. This is especially true if you have a long page with many sections. Unless there's a very good reason not to include them, adding navigation links to particular sections makes your site more user-friendly.

DIVIDE UP YOUR CONTENT

A single page doesn't mean everything has to be one long section. In fact, it shouldn't be. Divide your content into logical chunks and sections so that users can better find what they're looking for.

DO SOMETHING WITH ALL THAT BACKGROUND

Single page sites tend to have large backgrounds. Granted, sometimes those backgrounds are left plain or with a repeating pattern; but other one page sites take advantage of all that space to do something creative. This can also help to divide up your content, as already mentioned. Your background doesn't have to be one single image. It can be a series of images, if that fits your content better.

RESOURCES FOR YOUR SINGLE PAGE SITES

There are hundreds of resources, including templates, for single page sites out there; but here we'll focus on the ones that stand out.

Pure CSS Parallax Scrolling: This article from Keith Clark explains how to create a parallax scrolling technique using only CSS. This is a great option if you don't want to use JavaScript (or don't really know how).

Skrollr: "Parallax scrolling for the rest of us". It's a stand-alone library that works with mobile and desktop. There's no jQuery required, just plain old JavaScript.

Stellar.js: Stellar.js is another easy to use parallax scrolling library. It offers a lot of configuration options and iOS support.

One Page Website Wireframes: This set of wireframes for single page designs can be a great starting point if you're unsure of how to structure your site. They're free to download. There's a second set you can download here.

One Page Love: One Page Love is the premier one page website gallery, with more than 5000 example sites, and adding more all the time. They also feature tons of templates and other resources.

Start Bootstrap: Start Bootstrap has a large selection of free one-page Bootstrap themes. There are themes for agencies, freelancers, portfolios, landing pages, and more.

One Page Love Templates: In addition to their extensive gallery, One Page Love also offers both free and premium templates.

One Page Mania: One Page Mania offers up a gallery of both unique sites and templates you can download or purchase.

CONCLUSION

Single page designs can be an excellent option for a lot of different kinds of websites. While they're not the be-all and end-all of small site design, they are worth considering on many projects. Consider the reasons for using a single page, and then consider the reasons not to, and decide from there.

(courtesy: www.webdesignerdepot.com)

10 Days to a Better Bounce Rate

noreply@blogger.com (Navneet Panchariya) — Sun, 27 Aug 2017 04:46:00 +0000

This time of year people begin to think about bettering themselves by making positive changes in their lives or business. There seems to be no shortage of great advice to make yourself better in just a few short days with a little focus. If you run a website the ways you can improve its overall function may be on your mind. The good news is that just like any other area of your life you can take a few days to really look at your site and make small adjustments that will lead to a big payoff. One of the most effective ways to do this is to actually keep your visitors on your site.

The bounce rate is a percentage of visitors who leave your page immediately after landing on your website without clicking onto other pages. The main aim of most site owners is to develop loyal followers, but it can be very difficult to build a following when people leave your website without looking around and understanding exactly what you have to offer. This makes reducing a high bounce rate vital in growing your audience. Take time over the next couple of weeks to implement these strategies, and you may just see your bounce rate go in the right direction.

DAY 1: REDUCE LOAD TIME

Long load time is one of the main factors that cause a high bounce rate. Most internet users, especially web savvy readers, can be very impatient and they will always run away from websites that take too long to load. If it is difficult to get what they are looking for then they will look elsewhere. On the other hand, fast loading sites score higher on search engines. Make sure that you are caching your site's information and reduce the size of images by compressing them to make a big adjustment in your site speed.

DAY 2: LOOK AT NAVIGATION

No one will stay on a website they can't navigate. Your navigation should be clear, prominent and easily accessible. Place your menu where users automatically look for them. Take time to think about where you want your visitors to go, and make it incredibly easy for them to find it. You can also reduce the number of options on the menu and increase search functionality to make it easy for your visitors to find what they want.

DAY 3: ELIMINATE THE CLUTTER

Too many choices can easily confuse your visitors and impair action. You should avoid bombardment of information especially on the homepage and keep disruptive pop ups and animation to a minimum whenever possible. You should not do anything to interrupt your visitors once they start engaging with the content.

DAY 4: ASSESS YOUR ADS

The ads on your site should not be intrusive. Visitors can run away from your website simply because ads pop over the products they are checking out or the content they are reading. Ads should not be placed where your visitors look for information. You should avoid placing ads in areas such as the search box, menu bar and content area. If someone has to close more than one window to read your post then you have too many distractions.

DAY 5: USE A COMPELLING CTA

It should be very easy for visitors to identify a call to action that drives them to the next stage. This is very important especially if the visitors are landing on your product or service pages directly. Without prominent calls to action, visitors feel stranded and they might even leave the page. Directional clues and opt in boxes are excellent ways of displaying your call to action prominently. Make it compelling by giving away something related to the content on the page.

DAY 6: PROMOTE ENGAGEMENT

At the end of posts, videos or even main pages ask your visitors for an opinion. Ask them for questions. Ask them to talk to you about anything! Then follow up with their emails and comments to build a relationship that will last.

DAY 7: UPDATE YOUR LOOK

The general design of your website plays a critical role in influencing the perception of your visitors about its credibility. A bad design can breed distrust while a good design makes sure web users take you seriously. It is extremely important to invest in an uncluttered and neat design while ensuring consistency in terms of colors, layouts and fonts. If you have done the steps up until now you are probably looking good. Just a few more tweaks, and you will have it…

DAY 8: RESPONSIVENESS

Visitors access your site using various devices including laptops, tablets, and smart phones or even use different devices at different stages. More than 50% of web users access the internet using mobile devices. A responsive layout will provide an optimal browsing and viewing experience across various devices and browsers. You can also use style sheets and high resolution images in order to improve the sharpness and fidelity of your images on small screens. Site speed is also crucial to retaining mobile visitors.

DAY 9: START DELIVERING

If your website gets traffic but fails to satisfy people when they come; then your visitors are more likely to bounce. This goes for each piece of content and the site overall. If you say that a post will deliver great tips on gardening then your visitor should feel like gardening when they are done. If you say you'll have a new post every Wednesday then Thursday is too late. You have to do what you say you are going to do.

DAY 10 AND BEYOND: PROVIDE QUALITY CONTENT

It is vital to have a clear message, attractive titles, and easy to read content in order to capture the attention of a new visitor. The content should be tailored to the specific needs of the intended audience. By using attractive titles and providing quality and error-free content, there is a good chance that your visitor will click through to your other posts.

Nowadays people simply scan content in order to get information quickly. Therefore, you should use short paragraphs, bullet points and graphics in order to ensure that your visitors can get what they want quickly and easily.

In the end there is only one thing you can do to make a person stay, and that is to show them what they want, how they want it, as fast as possible.

(courtesy: www.webdesignerdepot.com)

Is The Grid a better web designer than you?

noreply@blogger.com (Navneet Panchariya) — Sun, 12 Feb 2017 10:25:00 +0000

Unless you've developed the enviable skill of ignoring adverts on Twitter, you can't have failed to notice The Grid, a new service promising "AI websites that design themselves."

The Grid "is not another do-it-yourself website builder," the difference according their site, is that The Grid boasts an advanced AI (artificial intelligence) that can build custom solutions for its clients in mere seconds.

I've often heard WYSIWYGs, and more recently website builders, likened to robots replacing human workers on factory production lines; I've yet to hear of a robot making it into the design department. Certainly, there is scope for automation in web design: When once you spent an hour setting up basic stylesheets, now you import a framework; when once you spent a day considering design options, now you choose a design pattern; when once you spent a week coding specific functionality, now you download a plugin.

We all want to think of our skills as essential, but are we essential to our skills? Are web designers surplus to requirements?

Can the grid out-code you?

The key principle by which we measure WYSIWYGs and website builders is how clean the code they output is. To date, I've not seen a single one that produces acceptable production code. As The Grid isn't yet accepting clients, the only site we can use to judge its code is its own thegrid.io, which was built with its software.

At the time of writing, The Grid's output doesn't pass W3C validation: the video element's autoplay and loop attributes have been set incorrectly; not an earth-shattering error, any self-respecting browser will render the page correctly in any case, but hardly a ringing endorsement of The Grid's capabilities.

But the real issue is not whether The Grid can produce valid markup, the issue is whether The Grid can produce good markup, and good markup means semantic markup.

Semantic markup is valued because it ensures that data is structured in such a way as to reinforce its inherent meaning. Semantic markup creates a hierarchy, so that it is more than a jumble of facts. The Grid doesn't produce semantic markup, because it's an automated system that neither knows, nor cares for the meaning of your data.

If you run thegrid.io's styles through a CSS validator, things get decidedly worse - almost 90 errors are generated by just the CSS embedded in the head of the page. But then the style sheets used by The Grid don't validate, because they're not supposed to.

The Grid uses what one of its creators, Dan Tocchini, refers to as GSS (Grid Style Sheets). GSS uses a polyfill (yes, JavaScript for layout) to bridge the gap between what CSS can be relied upon to render consistently, and how the designer wants the page to render.

There has been a disappointing delay in browser manufacturers implementing the CSS grid layout module, and if you're able to turn a blind eye to the dreadful inefficiencies of rendering a layout with JavaScript, GSS does seem to offer a reasonable approach. However there is a deep conceptual problem at the heart of this solution:

It's difficult, if not impossible, to build a system with total malleability that also respects the integrity of its content. The only way that would be possible would be to develop a system that not only stored content, but understood it.

In a recent article Paul Boag argues that we are reaching the point at which most front-end code will soon be automated. The key, he argues, is not that website builders produce good code, but that they produce code that is good enough. It's hard to argue that The Grid doesn't produce code that is good enough, when all major players actively make allowances for poor coding practices - there is, for example, no evidence that code that validates outperforms code that does not, on Google - but the sacrifice made is the integrity of the content.

The Grid rejects web standards in order to achieve dynamically malleable designs, but in doing so it overrides the hierarchy implicit in the site's content, and with it, potentially the content's meaning.

Can the grid out-design you?

In 1997, world champion Garry Kasparov was beaten at chess by the IBM designed computer Deep Blue. Coming just three short months before Skynet was due to become self-aware and wipe us all out, it seemed like a benchmark moment.

Except that Deep Blue didn't beat Kasparov at chess; no computer has ever beaten a human at chess. To win a game, one has to compete, and to compete one has to strive for dominance. To my knowledge no computer has ever been programmed with an ego.

Kasparov did lose the match 2.5–3.5, not to a computer, but to a team of computer programmers who used a computer as a strategy aid.

How does The Grid judge the readability of a paragraph? Does it lean back in its chair? Squint its eyes? Perhaps carry itself over to the window to check the design under different lighting? A computer has no knowledge or understanding of communication, it's simply a conduit. From typography to user experience, every single design choice made by The Grid has been dictated by human designers building a set of style rules that they hope will apply to any given data.

The Grid's creative director is Leigh Taylor, who designed the blogging platform Medium. Hats off to him, Medium is a highly accomplished blog design. Of course Medium, with its numerous subjects, authors and commenters is a site that cannot know its own content. As witnessed by the myriad of Medium imitators out there, it's not an approach that can be universally applied with the same success.

Take one of The Grid's premium features: the ability to detect faces in photographs and crop accordingly; any photographer will tell you that the cropping of an image is one of the key ways of investing emotion. Drama, optimism, strength, ambition, all of these things and more can be achieved with a well-cropped image. Centering on a face does little but fit the image into the available space.

Another core feature is the ability of The Grid to recolor images to unify hue and saturation. However, even in The Grid's promotional video we see that images look dull, like Instagram filters set up for a vintage style. It works…sometimes.

The problem with The Grid's design process is that it doesn't have one. It mimics design, but actually applies style without any understanding of content. The Grid has no inherent cultural awareness, no subconscious, it doesn't even have eyes. Design is about taking decisions, and The Grid's AI has no understanding on which to base a value judgement.

The Grid does not design, it applies a pre-conceived set of rules. All truly great design knows when and how to break rules; computers never deviate from the pattern they're fed.

Can the grid out-strategize you?

For most web designers, the most urgent area to address when taking on a new client is strategy. You may not even realise you do it, but for a business that doesn't understand branding, or blogging, or whether the colors their CEO's daughter picked out really work, your advice is invaluable.

The infinite monkey theory states that given enough time, a monkey hitting random keys on a typewriter, will eventually produce the complete works of William Shakespeare. Using a similarly optimistic approach, The Grid uses A/B testing to optimize its choices, but design is not simply a mathematical process and there is no equation for creativity.

thegrid.io, built by The Grid, works as a site because it's copywritten, art-directed, and strategized by web designers. Most companies will know instinctively the kind of site they want, they may have a strong idea of branding, their priorities may even be straight; but very few companies are anything but hazy on the details.

What tone should they be setting? Is their imagery appropriate for their target demographic? Will their content help them climb the search engine rankings? Should they focus on blogging or social media? These are just some of the questions that The Grid cannot answer.

The Grid can't carry out research, brand values mean nothing to it, it has no cultural sensitivity. This leaves the responsibility for critical decisions with the client. By handing complete freedom to the client, The Grid delivers none of the guidance that a good web designer provides. Instead of providing solutions, The Grid poses questions.

Is The Grid a better web designer than you?

There's an elephant in the room: The question of whether or not The Grid is a better web designer than you is less about how well it does its job, and more about how well you do yours.

If you regurgitate ideas, decorate content instead of designing it, impose a style instead of reinforcing a message, or adhere rigidly to rules, then it may well be at least as good as you.

In terms of code, The Grid does not output what most professionals consider to be production-ready markup. And its reliance on JavaScript for layout is highly questionable. However we have to accept that, given the cost involved in doing the job properly, many clients may well decide to do the job adequately instead.

In terms of design, The Grid does not design. However well marketed - and it is very well marketed - The Grid has no understanding of the content that it is styling. All design decisions are made by a small number of designers, who have no knowledge of the content they're designing, and whose approach is (like everyone else's) biased by their own world view.

As an experiment, The Grid is fascinating. As an engine for art-directing a substantial site like The Verge, or Vice, The Grid offers a technique by which content producers could rapidly art-direct time-sensitive data.

As a rival to web builders like Webydo, SquareSpace, or 1&1, The Grid must be the cause of a lot of lost sleep. It's certainly more advanced than its rivals, and will probably take a lot of business from companies who have already convinced their own customers that do-it-yourself is a risk worth taking.

However, if you're doing the job of a web designer properly, The Grid has no way to compete. No artificial intelligence will ever replace a human designer, because design is largely about emotional intelligence.

Good design extends into every facet of a website, and it's not about computers talking to each other, it's about human beings communicating.

(courtesy: www.webdesignerdepot.com)

8 Proven Techniques That Build Trust In Your Website

noreply@blogger.com (Navneet Panchariya) — Sat, 31 Dec 2016 10:21:00 +0000

The internet can be a worrisome place. Whether you are just browsing the web, or you go online to make purchases, people are leery about everything they do on the web. From credit card fraud to identity theft, it can be tough to gain people's trust on your website.

It isn't impossible to gain the trust of your website visitors. You can implement a few visual aids that will build trust and increase conversions for your website.

1. Badges

If your policy includes a money-back guarantee, or you stand by the quality of your product, you can implement a badge or emblem to promote this aspect of your business. For example, if you offer a 1 Year Warranty, you could place a silver or golden sticker with this information somewhere on your sales page.

Typically, you would place it near the "Buy Now" button to help convince visitors of the quality of your products or services. The best color to use is gold, because it speaks of the value and worth of what you are promoting. It is a good idea to avoid colors such as red, because that represents danger and is the visual cue to stop, as we know from traffic lights and stop signs. Whatever color you choose, it should contrast with the other colors of your website, like the white badge does against the orange in the example above.

2. Client Logos

Nothing builds trust as much as your work history. If you already have a proven track record, you are more likely to gain new business. Showing off logos from satisfied clients speaks volumes for your work. It's a great way to build trust, because it shows that you have experience.

Another aspect to this is that when business owners see that you've helped other businesses, and those businesses are recognized as being successful, people want to have the same success. They want the same results those established businesses have. A golden rule that a lot of business owners follow is to look at successful businesses and imitate what they do.

3. Payment Logos

People are terrified of being a victim of credit card fraud or identity theft. If you are selling anything on your website, you can help ease the minds of average visitors by implementing payment logos. Adding logos that they recognize is a great way to build trust.

This is especially true is you accept payments on your site by using secure checkout methods, such as Paypal. You should definitely include a Paypal logo near the purchase buttons on your site, as well as on the checkout page itself. This can help build confidence and reduce shopping cart abandonment. If your business can show that it is Better Business Bureau Accredited, it can further add to your credibility.

4. A Strong About Page

This may seem unnecessary, but it can go a long way to building trust and rapport with your first-time visitors and avid readers. It can actually turn those first-timers into regular readers. People don't like faceless entities or buying from them. Many people want to make a connection with leaders in their industry.

When you create an about page the right way, you put an identity with the business. Adding a personal touch makes you and your site seem much more approachable, making visitors more open to making a purchase. If you have a whole team, show a photo of each member, along with a description of their skills. It will give future clients an idea of who they may be working with on their particular project.

5. Show Your Face

People like to do business with people more than they do faceless entities. Adding a personal touch to your site can go a long way with building trust. People are more likely to trust what you have to say if you are willing to show your face.

This actually serves dual purposes. Showing your face will help build recognition for you personally, but it also builds trust with visitors. It's tough to build trust and authority with a site when you can't put a face with the name.

Showing a professionally shot photo of yourself, dressed well, shows visitors that you stand by your website, its content, and any products enough that you'll put your face on it. Not only will your website be more inviting, but visitors tend to remember a person better when they have a visual representation of them in their head.

6. Social Proof

You probably run into instances of social proof on a daily basis, but you just aren't away of it. Social proof with where a site owner with a decent social media following will place their social media counts on their site as proof of their success. This method goes a long way to building trust.

When a visitor sees that 10,000 people are following a site of Facebook, it immediately establishes authority. That many Facebook followers don't come from thin air. It says a lot about a website. It says that a website has been around a while, that it has good content and useful information, and that they won't disappear by tomorrow.

Social proof also appeals to the area of our psyche that wants to be included. We don't want to miss out on information that 10,000 other people like us already know. Which person or company are you likely to follow on Twitter? You'd be more likely to follow the person with 50,000 Twitter followers than the person who is following 2000 people, but only has 50 followers of their own. Social proof reinforces your credibility.

7. Testimonials

This is one of the biggest ways to build trust in your products and services. If you can display a number of people who are willing to provide documented quotes, endorsing your business, it attests to the quality of your work. It also adds another human element that helps to break through the walls that people typically put up when browsing the web.

Many people have the "me too" mentality, which is perfect for testimonials. People like to feel included. When you show that you've solved some of the same problems other people have had using your products or services, they want the same results. When they identify with one of the people from the testimonials section of your site, they realize that your services can solve their problems, which typically leads to a sale. Who doesn't want a faster website?

8. Useful Information

When you provide useful information, such as tips or how-to guides - in addition to your sales content - it instantly builds trust with visitors to your site. They come looking for information, and if you spend the time to offer valuable, helpful tips for free, it opens them up to everything else you have to offer. Building trust and establishing authority and knowledge in your industry go hand in hand. In the example below, the provider has put together several useful guides to help visitors understand different aspects of marketing.

This approach also lets them know that you aren't there just for a quick sell. Providing helpful information builds a relationship with visitors. If you do this on a regular basis, you'll build repeat traffic. Someone may not make a purchase on your website the first, second, or even the third time. However, even if it takes 10 visits to your site, a sale is still a sale. It's important to keep in mind that many businesses are focusing more on long term relationships with their customers. This pays off with loyal customers.

Conclusion

There are a lot of challenges when it comes to building trust online. You are limited in the amount of time you have to convince visitors that you and your products are genuine. These simple actions can go a long way with building trust with your website visitors.

(courtesy: www.webdesignerdepot.com)

Why "content first" should be your new war cry

noreply@blogger.com (Navneet Panchariya) — Tue, 24 May 2016 13:25:00 +0000

We're not all designing our content right. There. I said it. Maybe you, personally, are doing a great job, but most of us aren't. We can, and should do better. We owe it to ourselves, our clients, and most importantly, to our users.

"Content is King." That's been a mantra for so long that it's almost become a cliche. We know content matters. We know why it matters. Why then, do so many of us treat it as, if not an afterthought, a matter of lower priority? Why aren't we designing our content first, before we touch any other aspect of our content-driven sites?

We should be. Before we touch any other part of the design, we should be thinking about out how our users will be interacting with the content. We should figure out how that might benefit them, and the website's owners.

Users don't want to spend their time admiring your website. It's not what they're there for. They're there to find what they're looking for, and move on to the next task in their day.

They might be looking for information on your product or service, news, a photo, or any number of things; and they just want to find it, and get out. On an emotional level, they're searching for the solution to a problem. That problem might be that they need a new blender, or that they need to research a topic, or just the fact that they're bored. If your website solves their problem, they come back for more.

Delivering what users want as quickly as possible is the secret to making them happy.

Inertia

Sometimes we do things wrong just because that's how we've always done them. You've got a new project, so you might create a mood board, scribble out a few wire-frames, then open up Photoshop. There, you start working on the header for the home page, because to you, that's the most fun and creative place to start.

Unless that full-screen-height or half-screen-height header graphic is incredibly informative, it might very well not be what your users need.

Other people are doing it...

Yeah, I tend to rag on those large headers, even as I use them from time to time. They're fancy, they tend to look good, and if that many other people are using them, they can't be all bad. Can they?

This is the problem with trends. Appropriating good ideas is one of the most important ways to learn good design, but it can also be limiting. The approach that works for others might not be right for your content or your audience.

We just don't know what we're doing.

Falling back on the same old design patterns can also be a result of simple ignorance. This is not ignorance of design principles, but ignorance of a less forgivable variety: we don't know our audience.

I understand that actually getting to know your audience can be difficult at times. I've worked with a lot of smaller companies and individuals who simply did not have any sort of a budget for user research or testing. In these cases, we had to guess, and/or rely on research performed by others.

Problem is, I've seen bigger organizations with bigger budgets rely on guesswork too. Then they ask why their brand spanking new solution isn't getting the results they'd hoped for.

So how do we change this?

The fundamental problem is not that "big headers are bad". It's not that we still need to worry about the fold. (Though it does seem that users mostly prioritize content at the top of the page. Go figure.)

These individual design choices can't usually even be categorized in such simple terms as "good" and "bad". There are exceptions, but for the most part, the real decision to be made is whether or not a given design choice gives your users what they want, fast.

Those of us who still don't give our content the priority it deserves need to change both our perspective and our process.

Get some knowledge up in here!

The first part of any design job should be to get as much information on your (or your client's) users and/or potential audience as you can. Existing websites should have analytics. Larger organisations may already have results from user testing experiments for you to look through.

If none of that is available, start Googling. Chances are, someone else has already put together at least some of the information you need. If not, it looks like you get to be the first to experiment.

That can be a lot of fun on its own.

Design your content first.

When wire-framing, planning the aesthetics, mocking up your design, and even when prototyping, focus on the content first. In fact, I contend that all web designers should follow a formula that looks like this to achieve efficient, user-centered design: Content > Navigation > Everything Else.

There will be overlap between those first two bits, especially in your calls to action, and that's one reason why navigation is the next most important thing after designing the content itself. After all, navigation is how users get from one screen full of content to another.

Once you have those two components properly planned out, every other aspect of your site's design, including branding, frills, fancy graphics, and animated .gif backgrounds (just kidding), should fall into place.

In the end, the content is what matters most, and a designer's job is to make it as easy to find as possible.

(courtesy: www.webdesignerdepot.com)

What web designers can learn from Google's Material Design

noreply@blogger.com (Navneet Panchariya) — Tue, 24 May 2016 12:25:00 +0000

Material Design is Google's new visual design language. It was introduced at the 2014 I/O Conference in June, and it's beginning to find real traction in all areas of the design community.

This new visual language is fascinating because it systematically addresses a lot of issues we, as designers, face on a daily basis. At the same time, it's both surprising and refreshing to see a giant such as Google publicly announce its new design direction.

The free online documentation is available for everyone and it offers so much insight into what Material Design is and how it works. More importantly, it offers plenty of design lessons for us all; it's interesting, informative and innovative. There are guidelines on what to do, and what not to do, for just about anything you can think of, from button size and placement, to animations.

The 3 principles of Material Design

Material Design's core values are more than just a progression of the current design trends.

Material is the metaphor
Be bold, graphic, intentional
Provide meaning with motion

Sure, it makes sense to think it's a step forward from flat design but I think it's so much more than that. Because Material Design is a metaphor it provides new ground for design that is similar in roots to skeuomorphism. But because Material Design focuses on physics of the real world it doesn't replicate the horrors we've seen in, for example iOS8.

On top of that, the bold, intentional and deep graphical components give the design language a signature look. Better yet, they provide a clear aesthetic. But, there is more…

Unifying screens and products

Material Design is a great solution for unifying the various products, and more importantly screens, that Google has on the go. Let's be real here, devices and screens will only keep on changing and diversifying. In order to address the variations Google now has a language that clearly defines how it can be used on various platforms like web apps, smartphones or smart watches.

There are limitations that designers need to observe in order to keep the design style similar from one app to another. This is good because it will brand all Google products clearly. No other company has such unity among its various apps or OS' right now.

Creating and implementing Material Design shows that Google is trying extremely hard to find a design language that works on any screen or device, no matter what. Whether it's going to be successful is still hard to tell, but at least it's clear what Google is attempting.

It's flexible

Additionally, Google's Material Design has enough flexibility for designers to address various devices and screens. There are guidelines that allow adjustment to specifically cater to a small or large Android display. This too will make the life of designers easier as it doesn't pose restraints but solutions and tools instead.

The provided structure will help in adaptating to the various display sizes for sure. After all, that's the whole idea.

A new direction for Google

Google has never been known for its design approach. Over the last few years they have started to implement a lighter cleaner design aesthetic but it was still a subtle approach.

Therefore, it's interesting to see Google take the design bull by its horns to create an impressive design language. With Material Design Google is becoming a design leader. They may not be there yet, but they have stepped up their game and shown they are capable of creating great visual design.

New hardware capabilities

Think back - way back - to how computer interfaces looked back in the 80's then 90's. Compare that with how the first iPhone looked and compare all of those to any given device today. Technology evolves and it allows better digital display. You couldn't show off shadows on a DOS screen way back when because the hardware was incapable of rendering such a thing. The first smartphones were terrible at rendering animations of any kind.

Think of Material Design as an extension of the capabilities of current technology. Material design relies on physics to display animations, movements or shadows. It can do that because the technology today allows it. It's unlike most other design languages out there because most design languages were developed for older technology.

More than just flat

Another amazing thing about Material Design is its dedication and inspiration taken from the real world. Legitimate materials influenced how Material Design was created and developed. (Hence the name.)

This is huge because technology can start its track of no longer feeling like technology. Because our hardware is becoming more advanced, the digital world can now slowly start to blur the lines between the real and digital world.

Affordance is key

Motion is a fundamental part of Material Design. Thanks to physics and high quality hardware and software, Material Design can improve affordance within digital designs. This is in fact the key to eliminating the gap between real objects and digital ones. If motion and animation now provide meaning, interfaces can be significantly easier to interpret, understand and use. This will allow technology to be accessible by a significantly higher percent of the population than it is now.

What makes this an incredible and important aspect of Material Design is the fact that no other common design language places so much emphasis on affordance through motion. It's a fairly new proclamation. The overall intent is to make life easier for the users and doing so through motion is simply innovative.

(courtesy: www.webdesignerdepot.com)

Perfect your Calls to Action with the Right Words

noreply@blogger.com (Navneet Panchariya) — Tue, 29 Dec 2015 08:01:00 +0000

Words are hugely powerful. They are what mostly make up the Web. Without copy the Web would be nothing. Yet in many design projects words are seen as an afterthought when they should be the focus from the off.

Jason Fired of 37 Signals fame says that "It was always you design this page and then you just pour the copy in later, and it never felt right to me." Instead, good content should be what we apply our design skills to.

When you mix great copy and great design magical things can happen. Great design comes from great use of words.

Calls to Action

Every single site on the Web should have strong calls to action.

In a e-commerce store the most likely call to action is "add that product into the shopping cart and subsequently buy it."

Even sites with less apparent success metrics can use calls to action. It could be as simple as to read more content or sign up to a newsletter.

Calls to action should happen on every page of the site. There can be altered calls on different pages and some sites may have dozens of varying calls to action scattered throughout their pages.

Strong calls to action can mean the difference between success and failure.

That Penny Dropping Moment

I didn't really believe that changing such small portions of the page could make such a difference until I saw an AB test which produced staggering results: Dustin Curtis changed his Twitter link from "Follow on Twitter" to "You should follow me on Twitter here". This subtle difference in copy increased conversion of followers by 173%. That's almost doubling the amount of people following him.

That was the penny dropping moment for me when I thought "Wow! There really is something in A/B testing". I was astonished that such a small difference with a few extra words could make such a significant difference. My previous thinking would have been "if they are going to follow they are going to follow." I thought that as long as it was clear to follow someone on Twitter there was no need for clever copy.

That example proves that there is huge value to A/B testing and in particular words - microcopy on a page. Although that example worked for Dustin there is no guarantee that the term "You should follow me on Twitter here" will work with your site, the thing to take away is that you need to test.

A/B testing, also known as spilt testing, is straight forward and the premise is simple. You test 2 slightly different or hugely different pages and measure which one produces the better result. It's done using JavaScript which is easily set up with a service like Optimizely or Google Website Optimizer. These tools make it very easy to test out variants in your designs. Any hunches you have with colleagues or clients can be settled with hard evidence of an A/B test. This article isn't focused on how to A/B test but it is a very important part of improving your website and knowing for sure that what you are changing works for the better.

I would love to say there are magic words that win in every A/B test, unfortunately there aren't. What may work for one site won't work for another. The crucial thing to do is to test your own hunches. Words such as "free", "my", "now" are good places to start. Once you have found a winning formula then the process starts again and you want to find an even better and stronger call to action. Testing never ends.

The $300 Million Button

There is the famous example of an e-commerce store firm that made an extra $300 million by simply removing a button. It was found that registering for the site put many users off from purchasing. Sometimes the best copy is no copy at all (or at least a different kind of copy). It shows again that relatively small changes in a site can yield incredible results.

In GitHub's FAQ pages they have a lovely button which is labelled "Contact a human." This is a great design element, as it not only describes exactly what to do, if the user is still unsure about their problem the button adds a personal touch at a frustrating moment. This is comforting and nurturing to the user.

Resume Baking's main call to action has a strong shape and good use of colour. The sub description will also help conversion. What I would test there is something like "Create My Resume Now" Which would add urgency to it.

In an example from the Google Analytics blog huge increases can be seen by changing the copy on the calls to action buttons. "Sign up" is very plain and although it describes what the call to action does, there isn't much in it from a user perspective. "Learn more" is a lot more enticing to the user yielding a massive almost 20% rise on conversion. That button test may have won Obama the 2008 election.

Conclusion

Words are crucial to design and if you have the wrong wording it can hurt your site and business badly. All sites should have strong calls to action on each and every page. That call to action may be to encourage users to view more content on the site or something more tangible as to buy now on an e-commerce store. As we have seen small changes in wording can make huge differences when dealing with calls to action and success metrics. There is no magic bullet however, you need to test your designs and web pages with hunches that you and your team may have.

(courtesy: www.webdesignerdepot.com)

The Easy Way to Future-proof your Web Design Skillset

noreply@blogger.com (Navneet Panchariya) — Thu, 05 Nov 2015 11:52:00 +0000

The last century has seen a tremendous shift in the value we place on artisans. Particularly in light of the mass market style production of products, craftsmanship is still sought after for its quality and distinct style.

Today, web designers are amongst the list of professionals who are working with the constant threat of being automated and replaced. Luckily for us though, despite previous technological revolutions putting thousands or millions out of work... We have no reason to fear in the short term, if we can adapt.

A Brief History of a Bootstrapped Education

Our industry is unique in that most, if not the majority, of us have taught ourselves to some degree. Even today, there are shockingly few options in the traditional university setting that adequately teach students a solid foundation of web technologies. This isn't their fault though, with standards constantly evolving and new practices popping up faster than most university professors earn a paycheck, it's no surprise. As a result, many people in our industry have related background degrees in art, design, or computer science and have to additionally learn on their own or be trained in house.

Being entirely self-taught isn't uncommon either, as it's easier than ever to get a solid education from places like Treehouse. In fact, with the majority of our industry being self-taught to varying degrees, it puts us at a distinct advantage over other industries when it comes to the threat of disruption.

When faced with the idea that a typical university degree isn't enough, that students will also have to learn on their own in their free time - and they will essentially have to train their mind to accommodate the highly logical daily work load that programming demands - many opt for an easier career path in other areas.

Those that are left typically end up wanting to tinker, learn, and thrive in this industry. We end up with many passionate, flexible, highly driven individuals all working towards similar goals.

So most of our workforce is already accustomed to finding their own way; learning what they can from where they can, and not relying on a traditional education to guide them safely into a career.

The Looming Threat of Automation

It's no surprise that products have started selling an easier, faster, and cheaper website creation experience. We're beginning to see good solutions being marketed that allow customers to build simple websites, without ever needing to contact a designer or developer.

Products like Squarespace have put control in the hands of their customers, and in effect taken a small nibble out of the profession many of us rely upon for income. While the effect has been negligible at best, it still serves as a stark reminder of inevitable things to come. While these products help customers build simple websites, they certainly aren't going to build the next big social network sensation - at least for now...

Disruption and Revolutions

There's an entire wikipedia page dedicated to explaining what disruptive innovation is. When it comes to the web in particular, it generally means someone has developed a product to decrease the need for - or eliminate entirely - human jobs in an area.

For many, this situation has already happened to them. The internet boom of the 1990's caused a shift towards a digital medium and their career hasn't been the same since. Many web designers who are well regarded today actually got their start by doing print and media work before the internet was even a thing. Just as they never intended to transition into a digital medium before the need for their past job was decreased, we will likely see a similar transition in our lifetime.

Disruption and revolutions have made short work of entire industries before, killing off thousands of jobs with haste. But generally speaking, those positions were threatened well before the actual axing started happening and people would usually prepare to transition into new roles. What's important to note is that while we're developing tools and products to take our place... It's also allowing us to specialize and devote more time to a focused area.

Specialization is good both for us, and for our customers as well. This doesn't mean the jobs of today will disappear entirely, just that most of us will be focused on a niche higher up. For instance, you can still learn to set type on the movable type system, but it's with the expectation that you're getting a better understanding of fundamentals, not to enter into a career doing it.

Diversify your Skills for Security

Before the 1990's, print was the place to be. It's still a booming industry on it's own, but before the internet it was the industry. Many designers who made the transition from print work into web design are a prime example of what happens when an industry is threatened.

Our future as individuals is entirely dependent upon our current repertoire of skills, and our ability to learn new ones. Specialization is fantastic in that is opens up opportunities to learn much more in depth about niche areas, rather than having to broadly know a little bit of everything.

The key to surviving any disruptive innovation is to have a diversified list of skills which we can rely upon professionally.

The Value of Hand Crafted Solutions

Computer generated code has been around since the Dreamweaver era of programming - and probably before. The usual holdup is that it's restricted to only the solutions it's been taught or it's seen implemented already. It's become a sort of running joke that we're "problem solvers" in this industry, but really that's the best way to describe it.

We're constantly iterating on previous solutions to make them even better. It's that ingenuity that makes us valuable, and sets us apart.

Hand crafted web design solutions aren't sought after because they're this niche industry. Generally speaking, a hand crafted solution in web design will take an immense list of variables into consideration. Who are we designing for? Why? What platforms are we designing for? Why? Web development is also similar as well, with hand crafted solutions there typically taking things like future-proofing, semantics, and next generation standards into consideration as well. These approaches are more personal, more in-depth and more unique to each situation than the computer generated counterparts can currently provide.

The Future's Bright

With all the pessimistic end-of-days discussion we've all seen over the last few years when referring to the stability of web design as a career, you would be surprised to know it's actually quite secure.

While the low key areas like simple blogs or making a website for your weekend cookout are threatened by services like Squarespace, there will be need for professionals like you and I to make the more advanced things out there for many decades to come.

Computers lack an understanding of the concept of trends, emotions, and the overall perception of work. In general, people bring a human touch to their work that computers simply cannot mimic in virtually any regard.

But even when computers can fully replace us functionally, they won't. There will always be artisans in any industry. We'll learn, we'll adapt, and in the end we'll always find some way to solve a problem better.

(courtesy: www.webdesignerdepot.com)

How to use UI Design Patterns

noreply@blogger.com (Navneet Panchariya) — Fri, 04 Sep 2015 10:41:00 +0000

Design patterns are optimal solutions to common design problems. As common problems are tossed around a community and are resolved, common solutions often emerge. Eventually, the best of these rise above the din, self-identify, and become refined until they reach the status of a design pattern.

I wouldn't call a design patern a trend in web design, design patterns seem to be more about looking at how common designs are classified in retrospect, rather than forging new territory or looking to where things are headed.

How should you approach UI Design Patterns?

We use design patterns all the time, if you're unfamiliar with them you probably haven't realized that they're all around you.

What about the classic example of having too much content to display on one page? We turn our attention to 'Tabs', a design pattern that enables us to serve all the content we want, without making the user disappear in a sea of links.

The typical benefits for using a design pattern include:

showing beginners how to use best practices in web design;
learning to adapt to collective understanding of designers;
allowing for better communication, reducing the risk associated with unfamiliar choices;
reducing the necessary time and costs workflow to carry out specific tasks;
avoiding wasted time on building something that's been built before;
giving the user an experience that he's familiar and experienced with (the nature of design patterns).

Navicon - a universal symbol for menu, otherwise known as site navigation, is becoming increasingly popular in modern web design, but has already been fully adapted to mobile devices.
Parallax Scrolling - a unique design pattern that enables single page website, with an easy to use scrolling mechanism, but also includes a list of background sprites that give the page a lively feel.

Even though both the Navicon menu, and the general menu on top of the page share similar choices - it would be very distracting to include all of the links on the same header bar - it becomes clear that small choices can make a big difference.

Here's what you need to think about when evaluating a design pattern and adapting it to your own needs:

Problem summary: what user problem are you solving? Stay focused, and phrase it like a user story – in one sentence only.
Solution: how have others solved this problem? A few things to detail include user navigation (including shortcuts), getting user inputs, dealing with data and integrations with other services or applications, and displaying information and content (including defaults).
Example: great, can you show me? Sometimes a screenshot or mockup is sufficient; other times, user flows and/or additional notes are necessary to clearly communicate the pattern.
Usage: when should this pattern (not) be used? A few things to detail include product architecture, interface layout, device(s), programming language, absence or existence of other design patterns, type of user, and primary use cases.

It takes practice and discipline to think about patterns in this manner if you haven't yet been doing it. Take the time to answer these questions when designing your product because it could help you save a lot of time refactoring down the road when the your users and team ask for similar details.

The rise of UI Toolkits

UI design patterns have always been about making it easier for the user to navigate your website, application or system. If the user learns how to submit a comment for the first time, chances are he will instantly know how to send you an email using the contact form, it's the same repetitive concept of information input.

In the recent years, we've seen an enormous growth in the UI toolkit market. A UI toolkit can be simply understood as a set of widgets that let you build a fully graphical application from scratch. Twitter Bootstrap is a perfect example of a successful UI toolkit. These days, a large proportion of web designers will rely on Bootstrap features to ease their own workflow. In a sense, there is no need to reinvent the wheel!

3 UI Design Patterns to remember

In short, design patterns are solutions to recurring problems. By utilizing patterns we can overcome simple user interface problems. If we pay close attention, we notice that patterns are all around us. There is nothing special about that specific design, it's the way it has been applied that you're excited about!

Crystal Clear Calls-to-Action

The simplest of web forms (and also, the most common ones) will usually have just a single actionable button: in this case 'Create Website'. It's pretty self-explanatory, which is the point.

How much more easy could it get, right? Always go for the easy option, don't reinvent the wheel just to stand out from the crowd.

Breadcrumbs to the rescue

Breadcrumbs show the path from the front page of the site to the current location of the user in the website's page hierarchy. They are a form of secondary navigation that helps users understand the hierarchy and structure of the website. Breadcrumbs start with the home page and end with the page currently being viewed.

Registration should be easy

Unless you've been living under a rock, you'll be aware of social registration. Registration to a website is a common thing to do, and so should be made as easy and pleasant as possible.

Final Words

I've built websites for over eight years and during those eight years I've realized that simplicity is the key to many design problems.

I have come to a conclusion that clutter in design, bloated with unnecessary elements and forms is the most frustrating experience that you can find on the web. Yes, design is exactly how something works, so why not make it work properly? User interface (UI) is incredibly important to the success of your business or venture.

The best way to ensure you are designing successful sites is to learn from and utilize existing design patterns.

(courtesy: www.webdesignerdepot.com)

Responsive Design is Failing Mobile UX

noreply@blogger.com (Navneet Panchariya) — Mon, 20 Jul 2015 07:30:00 +0000

It's no longer enough to simply make sure your web content fits on a small screen. Google reinforced this precedent by updating its algorithm to emphasize the importance of carefully planned and well-executed responsive designs on mobile phones.

And it makes sense: Your viewers don't need all the functionality of a desktop on a mobile device. In fact, they may want to remove some content and functionality when they're on a smaller screen. After all, nobody wants to sort through pages of content just to find your company's phone number. That's the missing building block in a lot of companies' web design foundations: true adaptivity.

Simply jamming your site into a version that fits on a mobile device is not enough. You need to take a close look at the complete user experience and how it should be changed to adapt to the different environments in which it's being viewed.

The Problem with Responsive Design

57% of mobile device users won't recommend businesses with poor mobile site designs, and 48% say that businesses with mobile sites that don't function properly have the appearance of not caring.

There are several problem areas that most companies run into with their responsive websites:

Image placement

Past design processes have dictated that the client approves static images and screenshots before the development phase. Today, design is more focused on the rearrangement of elements for different device dimensions and much less focused on the placement of static images.

Screen squeeze

Showcasing data on a small screen often makes it difficult to see or read content, especially tables of information. The W3C actually encourages brands to choose a method other than tables and tabs to present data; complicated user interfaces simply contain too much information for mobile devices to handle.

Perspective shift

Above all, the problem with responsive design is simply a matter of the customers' perspectives vs. the companies' perspectives. Unfortunately, most businesses tend to ask themselves what they want to tell their customers rather than how their customers want to view and interact with that information.

For example, while registration workflows are generally the most important aspect of web design, they're often a low priority. That's because businesses think more about the functionality they want customers to see than the logical point of entry and primary workflow the customers are looking for.

Simply put, responsive design isn't the ultimate solution for giving users what they need from a website; it still leaves much to be desired.

Update Responsive or Upgrade to Adaptive?

When it comes to web design, the key conversation brands need to have boils down to the concept of responsive vs. adaptive websites.

The responsive approach takes the current site and fits it to varying screen sizes, while the adaptive approach actually changes content and how it functions based on the screen size.

I generally advocate for more of an adaptive web design method, as opposed to simply stacking content, for one important reason: Responsive web design assumes that your content and functionality should be the same across all devices - but that's not necessarily true. The key is to match the nature of the content with the use-case and the context in which users are looking at your website.

For example, let's say you're designing a responsive site for a brand in the consumer packaged goods or consumer gift industries. The promotions and offers pages for these types of sites generally receive the most online traffic. People rarely look at product details, but when they do, a great way to highlight those details is to show how they compare to other items. With that in mind, you should put product visualization and educational content on product pages so you can help consumers understand how to use and engage with your product.

For the consumer packaged goods industry, you want to get to know your customers and determine whether they're pre-, in-, or post-store. You'll need to create a different experience depending on where the customer is in the path to purchase.

Here's a short breakdown of each path:

Pre-store: People who are pre-store are probably going to get to the site through social media or an ad, and they'll probably be looking for coupons, offers, or recipes (in the case of food).
In-store: Once they're in-store, they're probably looking for coupons, reviews, or price comparisons with other sellers.
Post-store: When they're post-store, they're probably looking for branded content.

Knowing where customers are in the path to purchase allows you to design the site in a way that meets these needs and more.

Above all, you must put yourself in your customers' shoes. For example, I shop at Trader Joe's every week. It would be nice if I could plan out my meals in advance from my laptop and connect that plan to my shopping experience. In other words, I could tell the site what I would like to make for breakfast, lunch, or dinner. The site would then tell me all the products I would need to make those meals and create a mapped-out list for me so I would know which aisles to hit when I got to the store. All I would have to do is pull out my phone.

Adaptive design enables the customer to have a customized experience, such as this, based on the device he or she is using.

Optimize the customer experience by tailoring the design and information to the device. For example, if your customer is looking you up on a smartphone, make your phone number prominent and interactive so he or she can easily call. Is the consumer on a laptop? Perhaps it's more important to present product information upfront. Figure out what it is that your customer needs based on the device being used, and deliver that experience.

You need to look at your site from users' perspectives - no matter which device they're experiencing it on. If your customers pull out their phones to look up your business, you'd better be ready to help them find what they need with the best possible design and functionality. If you don't make it simple and seamless, they'll just take their business somewhere else.

(courtesy: www.webdesignerdepot.com)

6 Steps to Perfecting Minimalism in Web Design

noreply@blogger.com (Navneet Panchariya) — Wed, 29 Apr 2015 10:01:00 +0000

Over the past few years, web design has been rocked by various trends that have come and gone. One of the trends that has staying power, is minimalism, simply because it's a timeless concept that has been popular in various mediums throughout the ages. So why not in web design?

One of the things about minimalism is that it also enhances the user experience, besides looking nice. A complaint of many a user over the years has been that some websites are just too complicated to navigate. There's just too much stuff going on there that makes the user experience less than what it should or could be.

The old adage that "less is more" still rings true, especially when it comes to design in the 21st century.

Embrace Flat Design

We all know that flat design is essentially the design world's answer to skeuomorphism, which has fallen out of favor in a big way recently, with Apple being a prime example of this sea change. Flat design is notably characterized by an absence of drop shadows, 3D effects and gradients; it also uses bold and vibrant colors to draw the eye of the user.

One huge brand, that's embraced flat design in an impactful way is Microsoft, especially with its Windows 8 operating system. On the company's official website for the latest version, 8.1, we see flat designed featured in all its glory. This makes complete sense from a consistency standpoint since Windows 8 was renowned for the flat design of its start screen.

Therefore, on the site, you see no evidence of any shadows or gradients-you only see everything in 2D. The typography of various fonts for headlines and body copy features no textures of any kind; the page layout is very clean and without clutter; icons and buttons are vibrant and flat as can be; and the images of Windows 8 start screens are a study in flat design.

Incorporate White Space

Whatever you want to call it, negative or white space is not just an exceptionally smart design element that guides the eye to go where you want it to go on a webpage, but it's also a standard-bearer for minimalism. More and more sites are going to this design technique as they realize how beneficial it is.

The single-best example of negative or white space in all the Internet is probably the site that you least associate it with-just because you take it for granted. You use it so much that it simply escapes your notice...but it's there! I'm talking about Google Search. It is a study in white space, for reasons that should be quite self-evident.

Since the purpose of the site is searching, the company has cunningly utilized so much negative or white space on the page that any user in the whole universe couldn't possibly be distracted by anything else while on the search page. All elements have been removed, and white space surrounds the search bar. Obviously, this directs the eye of the user to the point of greatest and only importance: where to type in your search.

While negative or white space is an ideal example of minimalism, it also must be stressed that it doesn't represent emptiness, per se. It's actually a very shrewd design element that assists in guiding the eyes of the user.

Limit Choices

One of the biggest rules in increasing conversions on any e-commerce or B2B site is to remove the number of choices you give your users, buyers or visitors. It just stands to reason: When you take away as many choices as possible, you are not letting your visitors become distracted by anything that can impede them from completing the page's goal, which is to convert. Thus, less choice is another stunning example of minimalism in web design.

One of the best places to see the magic of minimalism of choice is in landing pages-landing pages that go about it correctly that is. A company that gets the principle of minimalism in choice is Gengo, the professional caption translation company.

On its landing page, you see an utter absence of choice. That's because the landing page makes very clear what the next (and only) step should be for visitors: convert by typing in the text or uploading your file for translation. Sure, the die-hard purists in the realm of minimizing choice would even argue that the navigation menu above in the header should be removed because users can still click there instead of being super-focused on the translation service.

Focus on Bold Typography

If you want to truly appreciate minimalism in web design to its bare-bones basics, then check out Brian Danaher's site. Brian's an art director, designer and illustrator.

As you can see, his site design basically rests on two things: bold typography that you can't miss and a single-column layout. That's it! Yes, this approach to minimalism may be too extreme for some tastes out there, but it still accomplishes two very important aims, which are top on anyone's mind when they have their own site to promote their careers:

Since the navigation's basically tucked into the single-column layout, Brian is able to get right to the point about what he does, who he is and how site visitors can get in touch with him
Brian succeeds in using contrast (in the font colors and background colors as much as between the sizes and styles of the fonts) to give his site visitors something interesting to look at

Simplify your Navigation

The navigation menu can often be overlooked when we're having a discussion about minimalism in site design, but it, too, can be a huge (though silent) contributor to making minimalism work on your website. A navigation menu that's not intrusive and quietly blends into the background is key to making a site minimalist on a functional level.

Check out photographer and designer Cristian Ordonez's site that is a study in the minimalist navigation menu. The menu is such a dedicated approach to minimalism that it doesn't even stretch across the width of the entire homepage; instead, it's kind of quietly tucked away in the upper, right corner of the site. In addition, there is no slide-out menu action going on, so there are no different or additional layers of navigation. Finally, the colors of the menu (at least on the homepage) subtly blend into the background color as well.

Use Color in Patches

Using small patches of color in your site design will let you adhere to the minimalist approach while also making it easier for site visitors to pick up on what's important on any given page. By incorporating small pops of color here and there, you'll succeed in drawing the eyes of your site visitors to specific areas of importance.

The site of the 960 Grid System, whose mission is to streamline the web development process, epitomizes this smart use of color very well. Right away, you notice the small splashes of yellow, for example, that are used for internal links like "download" and "view demo." Even the clickable Twitter logo in the top left provides a patch of bright blue that draws the eyes of site visitors (it takes you straight to owner/designer Nathan Smith's Twitter feed).

Minimalism works if you know how to use it

Mention the word "minimalism" to some designers, and they become apprehensive because they wrongly think that an overly simplistic site design will be unattractive. As the above examples demonstrate, however, nothing could be farther from the truth.

Done right, minimalism in site design can lead to some new and hot trends like flat design or help make site owners more money by increasing conversions when choice is limited. All in all, minimalism creates a clean, well-organized and neat website that makes things easier for your site visitors. That's reason alone to use it in your site design.

(courtesy: www.webdesignerdepot.com)

How to Make Whitespace Work on the Web

noreply@blogger.com (Navneet Panchariya) — Sat, 21 Mar 2015 12:13:00 +0000

The term white space is sometimes used interchangeably with negative space, and the concept is the same. Though the term refers to "white" space in particular, the area in question does not have to be white at all. It's just the empty space around the elements of a webpage layout.

Space like this can come in many different forms, such as the space in between images and graphics, gutters, margins, columns and even lines of type. While it seems to be made of "nothing"-only in that no other design element occupies the space-white space should not be treated in that manner. Treating it as "nothing" can lead to missed opportunities in designing something truly aesthetic and appealing.

White space, done right, can actually provide a good amount of benefit to web design. Instead of reducing white space in web design, go against the grain and make sure to increase white space on a webpage. Some well-known and popular brands are already moving in this direction, and it's time that more designers followed their lead.

More white space equals a more luxurious brand and website

Clients typically want designers to use up as much space as possible on a website since it can be costly to pay for site real estate, and there are screen limits to where messaging can be included. However, doing the opposite-increasing white space-prompts the designer to craft a smarter brand message in a more restrictive space.

In addition, perception will be that a website with more white space is one whose content is more vital than its screen space. As a result, a brand seems more luxurious because it appears able to sacrifice more screen space to focus on its content messaging instead.

Luxury brands haven't failed to understand this phenomenon and regularly use more white space to achieve this precise effect. Pottery Barn is a well-known retailer of more upscale home furnishings, and its website's smart use of white space reflects this to a tee. White space dominates on the homepage, with a lot of it existing on the sides of the page to better direct site visitors' attention to its deals and promotions in the middle of the page. Even the brand name itself features generous white space between the characters at the top of the page.

White space to promote smooth searches

A simple, though ideal, demonstration of the effective simplicity of white space can be seen in two major search engines: Google and Yahoo Search.

Google understands precisely that users looking for a certain search topic don't want to be distracted with loud backgrounds and ads. Therefore, white space dominates the entire Google search engine page, with the actual search only occupying a thin sliver of space in the middle of the page. Similarly, Yahoo Search embodies this smart use of white space, too. While the webpage does have a pretty long menu bar at the top, the idea's the same: a lot of white space so that the user can concentrate on the search and nothing but the search.

Readability and legibility get a much-deserved boost

Readability and legibility on any given website are bolstered when white space is smartly used. If the text on a page is squished together excessively, then it will get in the way of a comfortable reading experience, which hampers the overall user experience. More white space improves the reading experience by making text easier to scan, adding also to comprehension.

One individual's site that has a handle on this principle is Information Highwayman, which is the site of D Bnonn Tennant, a copywriter and marketer. As someone who boasts he knows what great web content can do for any small business, it's reassuring to see that Tennant practices what he preaches on his own site. The spacing between characters in the headline copy, text and menu bar is conducive to ensuring readability and legibility.

White space can also be used in between different sections of content, not only to improve the reading experience, but to break up various parts of content for easier absorption of information. Andrew Lucas' site demonstrates this nicely. He's a web designer from London, and he uses white space effectively on his homepage.

It makes colors more vivid

Perhaps the most direct, though simplest, benefit of white space is that it makes other colors on a website stand out to the point that they're brighter than ever. This is very helpful for catching the eye of the site visitor, as the colors' depth, richness and even intensity are emphasized more than ever.

The web designer behind the I Am Dan website gets this so well that he epitomizes this concept on his homepage with his sparse use of color. Much of his website is just white space that's broken up by the rare splash of red. Because of this tactic, the red colors highlighting links to his portfolio and inviting site visitors to browse his site stand out effectively, thus increasing the chances that visitors will complete the call to action.

Zurb is a web-design company that also demonstrates how white space can make colors stand out. Its homepage is characterized by one solid color at the top of the homepage and colorful icons to different webpages (right by the fold). Aside from this minimal use of color, the whole design of the homepage features white space.

Simple colors like green, orange and red will have the effect of creating a look that's both pleasant and well-focused. Both of the sites mentioned above take a minimalist approach to color because there is so much white space. As a result, the colors are used very judiciously, which makes users appreciate them all the more.

White space is not wasted space

Web designers have to increasingly move away from the mistaken belief that they have to cram every element and color possible into the screen when designing a site. As illustrated in the examples above, white space can make a powerful impact when it's used in such a way to highlight a brand's content, boost readability and legibility and make minimalist colors stand out.

The phrase "less is more" truly applies to the whole concept of white space, no matter how you look at it. In a broader sense, this take on minimalism in web design has also been getting popular lately, and it's certainly a trend that will continue.

(courtesy: www.webdesignerdepot.com)

4 Ways to Create Richer Web Experiences

noreply@blogger.com (Navneet Panchariya) — Thu, 01 Jan 2015 10:29:00 +0000

The Web has evolved a lot from being a simple document repository, and we now have browsers capable of rich visual interactions on desktop as well as mobile.

Because I'd like to talk about where the Web is headed in this article, many of the features I'll cover may have limited support, so it is important to use resources like caniuse.com which has a robust list of features and charts specifying where they are supported.

Let's take a dive into the four ways you can enhance your site UX:

CSS

CSS is the styling language for our documents, we tend to think of this in simple terms like changing font size or color, but it is becoming increasingly powerful with features like transforms and animations. We're also getting new features to make it even more powerful.

If you've used Vector Masks in tools like Photoshop, you should be familiar with the idea behind CSS Clip Paths. This feature allows you to define a shape in CSS that defines the transparent and opaque parts of your HTML content. These work great with CSS Transitions for hiding and revealing UI elements. Similarly CSS Masks are making their way to the Web, which allow you to define the transparent parts of your content using an image. This allows you to use transparency more effectively in your designs for visual interest or textures.

SVG

Most of the images we find on the Web today are raster images, made up of pixels. This means that as we scale them or view them on higher resolution devices they get pixelated.

Vector graphics are awesome because they are made up of geometric primitives that retain their crisp edges at any size.

SVG is the vector format for the Web. We can use it to display graphics and even manipulate and animate its properties with CSS. Where SVG gets really powerful is when we combine it with scripting. Snap is a JavaScript library that makes it easy to manipulate and animate SVG content. It's focused on modern browsers, so it supports the newest SVG features like groups and clip paths. Snap is open sourced on GitHub and we even used it to create a rich animated banner ad, you can read more about it in my blog.

And here's a sample of an ad we did using SVG.

2D CANVAS

2D Canvas is another powerful feature of the Web optimized for drawing shapes and images. It provides a JavaScript API that gives you granular control over your canvas element. It also gives you the freedom to integrate other forms of media, such as video, creating the potential for rich interactive buttons that play, pause or scrub video footage. 2D Canvas now supports blend modes, which allow you to mix the colors of layers in visually interesting ways, which you can read more about here.

We're also starting to get support for alpha video that allows us to more seamlessly integrate video into our content. A fun example of alpha video is in OK Go's music video 'WTF'.

OK Go is known for elaborate music videos, and in this particular video they shot choreography in front of a green screen. Then using post processing continued to render the footage on top of itself creating a cool echo effect where the transparency was. We can reproduce this effect using 2D Canvas, but we can take it a step further and make it interactive using features like canvas blend modes to create new visual effects in real-time.

WEBGL

WebGL provides a low level API for drawing hardware accelerated 2D and 3D graphics. The potential here is console style games, like Grand Theft Auto 5 running right inside your browser. As you can imagine WebGL gets somewhat complicated, fortunately open-source libraries like Three.js provide a great entry point with great examples to get you started.

GitHub has become a great resource for the open source community. You can find Three.js and Snap on GitHub as well as other great libraries making it easier to do amazing work on the Web. I often put experiments and tools I make on GitHub as well, such as a camera spline tool I used to create camera paths for Three.js to fly through 3D worlds.

As we can see the Web is becoming increasingly diverse and powerful, it's an exciting time to be a Web developer. The variety of technologies and resources we have access to are constantly growing, and it's fun to see the rich experiences people are creating with them.

(courtesy: www.webdesignerdepot.com)

Designing in the browser, pro tips to make it work for you

noreply@blogger.com (Navneet Panchariya) — Mon, 01 Dec 2014 09:43:00 +0000

Designing in the browser used to scare me. Not because it seemed hard but because I thought I would end up with a design made up of a lot of little boxes, something that was so generic and bland I would end up redoing it in Photoshop.

That fear turned out to be completely unwarranted. Not only did my designs become more focused, I also completed them faster and got clients involved earlier in the process through interaction and discussion.

It's not as tough as you think

Design is design. It doesn't matter if it's being done in a software program or being written in code. Designing in the browser isn't any harder than designing in Photoshop. Like any tool you need to use it to learn it and eventually master it.

Design is an iterative process, one that is made more difficult by working for clients. It's hard sometimes for clients to picture exactly what you are describing; designing in the browser can get them involved throughout the process rather than just the design phase.

Essentially the design and development phases are merging and if you're naturally good at design and front-end development you will take to designing in the browser like a duck takes to water.

One major benefit of designing in the browser is that we can design based on realistic expectations. Sometimes designing in software can create unforeseen problems for front-end development. UI elements could be designed wonky or maybe they just don't make any sense, it's hard to explain to a client why you changed something, not because they won't understand but because you've already pitched it in the design and had it approved. Designing in the browser lends itself to the idea of simplicity.

Have a plan

Before I even think about designing I need to have a plan. Just because I'm using a different tool doesn't mean my process changes. I like to have a pretty solid plan before I start designing and I need to know what I am designing, why I'm designing, who I'm designing for, client background, and any service or product information that I will need to focus on.

After I determine these things I will have a better idea about what the product is or what the client does, how long they've been doing it, what sets them apart from their competition, who their user base is and what the primary and secondary goals of the website are going to be.

I personally like to have documentation of everything. Typically I have documentation for the site map, content, calls to action, and site architecture. By the time I start designing I should have a clear strategy for the design and all of the content should have been collected.

Sketch First

Sketching is key if I'm going to design anything in the browser. I can rough out content areas with pencil and paper, get feedback and quickly iterate into the foundation of my design.

I sketch based off of the the plan I described above and I make sure that I have all content areas and calls to action laid out. Sketching should be quick, don't spend a lot of time perfecting anything. It should be solid enough to show to a client but sloppy enough that you can get them finished in less than an hour.

Next I like to prototype the site from my sketches in HTML and CSS. The prototype is a lot of gray boxes with text and images for placeholders. The gray boxes act as containers for content when I actually start designing. The biggest benefit in prototyping with code is that the client can interact with the prototype and see how the site architecture works, that way if anything is off or needs refined we can handle it now rather than on launch day.

Style Tiles

Before we can start designing we need some sort of style to base our design off of. We need to determine the colors and fonts we will use with potential textures and patterns. This is where style tiles come into play.

Style tiles were created by Samantha Warren and I have been using them for a while now. They help clients see an early and very simple style guide that we can use to start designing with. I like to create several of these to see which the client prefers that way I can narrow it down to one. I find that these are also very important in the approval process and helps prevent outright rejection.

Design

Now we're ready to start designing. If you're used to designing in a software program like Photoshop or Sketch this isn't much different. Using our prototype file we start to add mock content in our markup. At this point we know exactly what is going into each content section in the markup and the grid has already been defined so it shouldn't take that long.

Now I'm going to start layering styles on my content. I'm going to add base styles for color, typography, and layout. Once the base styles are finished I will step away and look at it. I like to screen shot certain parts of the design to reference later.

Refinement

Once I'm satisfied with the base layer I like to take notes on what to refine. Based on those notes I will most likely use Photoshop or Sketch to add texture or anything with a tangible feel. Photoshop and Sketch are great tools to refine complex UI elements fast so I save anything that might be a pain to code out more than once

The reason I do this is because I want my codebase to be lean and clean and the more you code, comment, and delete, the more sloppy and bloated your codebase becomes.

Save and reuse common patterns

If you had to design in the browser from scratch each time, things may seem like they take forever but if you start from a custom base, a framework, you can eliminate any repetitive steps. To start with I have a custom version of Initializr that I use with a custom responsive grid built in Sass(http://sass-lang.com/). Using a custom framework gives me a head start for prototyping and design.

Having a library of common UI patterns is also a great way to build a fast prototype and it makes designing in the browser more efficient. I use Sublime Text to code and one thing that I have learned to take advantage of is the custom snippets you can create. I've added several variations of navigation, lists, sidebars and other common elements to my snippets list so I can quickly place them in my markup with a simple action. I also use accounts on Codepen and JSFiddle to save patterns. Dan Cederholm created a great WordPress theme for storing common patterns called Pears. It uses posts to store code which you can edit live in the front-end to test and preview changes.

Conclusion

Practice and practical application will make you better at designing in the browser. Chances are if you do any sort of front-end development you already have a base framework to start from and you already have some common patterns to use.

Now all you need to do is start designing in the browser and eventually you will come up with a workflow that is efficient and works within your process. With practice you will only get faster.

(courtesy: www.webdesignerdepot.com)

4 Crucial Principles for a Compelling Startup Website

noreply@blogger.com (Navneet Panchariya) — Sat, 27 Sep 2014 11:13:00 +0000

You've built your startup from the ground up. You're ready to see your sales really start to take off. There's just one challenge left to tackle: building a compelling website.

You may have tons of great ideas, but unless you incorporate all the right elements and engage the right audience, your online presence will sink, not soar. Ready to build a powerful startup website? Here are 4 essential elements you won't want to forget...

Focus on the function of your website

Is your site meant to inform? To sell your products? To encourage visitors to try your service?

If your startup involves selling products online, you'll need a software solution designed for e-commerce like Shopify, Magento, OpenCart or WooCommerce (just to name a few). If your site involves just information, consider using WordPress or a similar open-source content management system like Drupal to get your site up and running.

Whatever functionality you need, make sure you build your site around its core, don't crowbar it in afterwards.

Incorporate your brand

You know that your brand is your business "identity." You also know that brand awareness is key to business success. But if you're limiting your company brand to a logo in the corner of your homepage, you're missing out on a huge tool to grow your startup business.

Your brand should be communicated consistently throughout your online presence. Tying your brand into all your site elements, from your images to your content to your color scheme, helps your visitors identify you, associate your business idea with your products and content, and perhaps most importantly, remember your business long after they view your pages.

Incorporate your brand into every aspect of your site, and your website's power and effectiveness will skyrocket.

Design for a mobile audience

The mobile market makes up a large percentage of Internet users, soon they'll outstrip desktop users-depending on your target market, they might already.

Which is why a mobile-first approach makes absolute sense. Incorporating responsive design, which allows your site to adapt and instantly fit onto a standard mobile device's frame, is crucial for capturing a mobile audience for your startup company.

Sweat the small stuff

If you think you can toss up a basic web design template, add a few graphics and a little content in your spare time and expect your startup to be a success, you're setting yourself up for failure.

Every aspect of your website is crucial, right down to the smallest detail: your content should be engaging and relevant; your images should be attractive and tie into your brand; your call to actions should be clear and straight-forward.

Don't DIY your site and hope all the elements magically come together. Hire professionals who can understand your vision and execute every element properly. Research and test every detail to make sure it is onpoint with your business model and goals, and your website will be as exciting and ambitious as your startup idea.

Building a powerful startup website takes work, planning and the marriage of all the right elements. Know what you want and research what you need, and your website will help launch your startup and make you a success!

(courtesy: www.webdesignerdepot.com)

How to use the infinite scrolling trend, the right way

noreply@blogger.com (Navneet Panchariya) — Wed, 20 Aug 2014 10:05:00 +0000

Infinite scrolling has became a common design pattern in recent years.

With many high profile social networks adopting the solution, it's come to be one of the most widely adopted patterns out there. Though however popular, every design pattern always has its own unique strengths and weaknesses we have to plan for.

Done badly, and infinite scrolling will wreck your UX and guarantee total failure as users desert you in droves. Get it right, and you'll have an intuitive, popular and successful site.

Understanding why infinite scrolling drives engagement

When implementing a design pattern, it's always critical to evaluate the pros and cons for each unique scenario. What resulted in more user engagement for someone else, may actually result in less user engagement from your own users.

For infinite scrolling in particular, it's all about the type of content users are interacting with.

Being able to determine what type of content goals you have for your users will be able to provide you with insight as to which design patterns will work best in your situation. This applies to any pattern, but especially to infinite scrolling.

High engagement content

Content that seeks to grab and keep the user's interest for a prolonged period of time, or seeks to be interactive, is simply not an ideal candidate for typical infinite scrolling. If your goal is to have your users read, like, and share each individual post, giving them dozens to work through at a time may seem overwhelming.

That being said, Medium has found a way to implement it successfully with content that wouldn't typically benefit from infinite scrolling.

Instead of presenting the user with the next ten or twenty posts, Medium provides a single recommendation at the end of each article. This stays true to the high engagement function, but offers the browsability benefit that infinite scrolling brings. So while high engagement may be your goal, don't let that deter you from making a creative solution of your own.

Low engagement content

Infinite scrolling is at its best with content that requires low engagement. Sites like Twitter and Facebook are spectacular examples of this. The typical user of these sites simply scrolls down the list, consuming content but rarely actively interacting with it. While these type of situations don't score high on user engagement, they do end up keeping users interested for longer periods of time.

Uncontrollable variables in content type

While it's sometimes obvious what type of content your website may have, what about those that aren't so black and white? Tumblr is a good example of this, with content that could have high or low user engagement goals depending upon what type of blogs the user follows. While these situations are rare, they do pose a problem in that infinite scrolling would be beneficial only to half of the users. Interestingly enough, the solution in this case is to minimize a user's options of interaction with each individual post. This allows for the high engagement users to narrowly focus on individual posts, and low engagement users to consume much more content without being required to interact as much.

It's also worth noting that Tumblr does a fantastic job of allowing users to decide the value of content on an individual basis. Giving users the option to enable or disable infinite scrolling in their preferences provides further control over how they consume the content.

Hybrid scrolling solutions

Many places choose to implement a hybrid approach to infinite scrolling, prompting the user to load more content when they reach the end of a page. By doing so, they give back the control to the user to decide how much content to load - which is critical on mobile. This solution also helps with maintaining a consistent data load on the server. After automatically loading a predefined number of pages, a button would appear prompting the user to load more manually.

When Infinite scrolling goes bad

There are countless examples out there of websites using infinite scrolling, and more than a few do so to the detrement users. Dan Nguyen wrote an interesting article back when Etsy attempted to implement the feature. What ended up happening is Etsy went ahead with implementing it before testing their assumptions. Loading more search results, at a faster rate would seem to be a good thing at first... But when the content requires high user engagement-as is the case with shopping-things can quickly turn sour.

In this particular case, users are actively searching for something of interest. Attempting to find the perfect product out of a sea of choices. So when the user is flooded with an seemingly infinite amount of choices, they give up and seek other avenues to find what they're looking for.

Best practices for infinite scrolling

As with any design pattern, there are best practices that are usually good to follow. These aren't the laws of using the pattern; rather they are what the majority of successful implementations do.

Have a graceful fallback: Ensure that users without JavaScript aren't left out in the cold. Design for old fashioned pagination first, and then use JavaScript to hide it and implement infinite scrolling.
Give a visual indication of loading more content: Providing users with a loading animation informs them of what's going on. Without it, the page will seem to have hit a dead end on slow connections.
Keep back button functionality: Although many implementations forget this major detail, make sure to keep basic browser functionality. If a user browses away from your website and then travels back, they typically don't expect to reload back at the top of the page.
Keep navigation visible: While users will primarily want to consume your content, they'll also want to browse to other areas of your website as well. If they're forced to manually scroll back up through hundreds of posts... They may opt to leave instead.
Lazyload content ahead of the user: The whole point of implementing infinite scrolling is to have it seem like an endless stream of content. While it's important to have some form of a loading indicator, users will hopefully rarely, if ever, see it.
Links should open in a new window: This is a highly debated practice; it forcefully chooses for the user, but with the intention of helping them. Forcing links to open in a new window or tab prevents users from accidentally navigating away from the infinitely loading list and losing their place.
Footers may get in the way: Often times implementing an infinite scrolling solution means giving up the option for a website footer. While it's definitely annoying to try and "catch" a footer when you're automatically loading more posts, there are other options. For example, using a hybrid loading solution would allow you to keep a footer well within users' reach.

In conclusion

While infinite scrolling can be a trendy feature that gives the user endless content options... It has to be used correctly.

While we want to expose the users to more content, we don't want to detract from the value of each individual piece or have them feeling overwhelmed with information. After all, users are there for the content itself-not the fancy scrolling feature.

As you can see, Infinite scrolling itself isn't inherently good or bad. But rather, its use could result in better or worse user engagement depending upon the content type being presented. With that in mind, we can attempt to predict where implementing it will be beneficial.

(courtesy: www.webdesignerdepot.com)

5 Fundamentals Every Web Designer Needs to Understand

noreply@blogger.com (Navneet Panchariya) — Thu, 31 Jul 2014 09:02:00 +0000

We all know intuitively what makes a website look bad: overused bevel effects, corny clip art, overcrowded layouts. These annoyances are easily corrected by developing with design fundamentals in mind-the same principles used by professional designers and artists alike.

Great websites bring together form and function. In fact, well-designed websites are seen as more credible, according to a Stanford study and are actually easier to use (as studied by researcher Don Norman). So here are five fundamentals to help you keep quality design at the forefront of your practice.

Follow the rules... mostly

In design school, they'll give you a list of principles to abide by that assign rules to beauty-elements like layout, order and symmetry. But as you advance, you're then told to break the rules a bit to create places for a viewer's eyes to look by employing elements like variety, tension or contrast.

Use imagery and icons to communicate when possible

There are some universal icons that people are trained to respond to. The magnifying glass (search), the house (home page) and floppy disk (save) are ingrained into your users already. Take advantage of those visual shortcuts; all those road signs should be immediately recognizable to you.

Color as a design element, not as decoration

Color makes all the difference, especially as our screens get better on our phones and tablets. It's a facet of design that can be a really key part of the story your website wants to tell. Just use color to support content, not decorate a page. And often if you're using a photo, the colors in the design should be sampled from the photos used so your design has a nice unified feel.

I quite like pulling color examples with color swatches - and the Adobe Kuler Web app is a great way to play with different themes and then import them into your design tools. One of the best rules to go with is to use complimentary colors. Which is basically using warm colors and cool colors together to provide balance.

Choose fonts that support content

There are literally thousands of fonts to choose from.

It's up to you to mix and match - but remember that it's best practice to use only up to three fonts at a time-a nice headline font, one for the main body of text, then one for any sort of call-out you might need. Often, that means using a sans-serif for the body copy, and for headlines you can get more interesting with either serif or sans-serif.

Help from others

All right, you've got your basic design elements, with pretty icons and pictures, with a sound color scheme and fun fonts. What's next?

Getting help from others, of course! And not just random people on the street, but constructive critique from people who really know their stuff, like other designers/developers. This can be instrumental to go from an OK website to one that really pops. If you've never used Behance to post a work-in-progess, I recommend giving it a try. The active community will do more than just tell you "to make the logo bigger" - but give you advice that can make the difference between a good website and a great one.

(courtesy: www.webdesignerdepot.com)

7 Reasons Why Your Website Sucks

noreply@blogger.com (Navneet Panchariya) — Wed, 18 Jun 2014 11:49:00 +0000

It could be hard to swallow sometimes but business owners need to acknowledge that their websites may not be as perfect as they believed it to be. Understandably, some of us decided to create a website one fine day with little to no experience or help whatsoever.

Being overly enthusiastic, we may have overlooked issues that should be avoided, but don't let this discourage you the next time you hear someone make a statement that degrades your website.

Poor Navigation

What constitutes poor navigation? Having your website visitors navigate through almost a dozen navigational links that will lead them to 20 other pages, that's what. Think of your website as a nice, cozy shopping mall. A mall owner wants to keep customers shopping and buying from its tenants all day, and similarly so should you ensure visitors click and visit your pages without navigating away. However, visitors will easily get irritated if you confuse them with a messy navigational bar, for example. Too many links will also annoy them, and when they cannot find what they need in your site, they will most likely click on the little 'x' button and close the window.

Fix it

First things first, you need to optimize your navigational bar by reviewing the wording on the menu. Is it simple? Does it convey the message you want or lead visitors to where they want to go? Any jargon involved? If you are able to put yourself in your visitors' shoes, you'll know that oftentimes, less is more, and short is sweet.

Mess and Clutter

How many times have you visited a website and got turned off by the amount of clutter on the pages? I'm talking about unnecessary elements, graphics that seek only to distract and not appeal, as well as annoying ads that repel potential customers. On the other hand, a neat website calms visitors and makes them feel welcome, and ensures a comfortable mindset that will be more open to whatever you're trying to communicate on your site.

Fix it

Again, the saying "less is more" is very relevant here. Check your copy and see if you can trim off some unnecessary words - this helps bring out only the most essential message and highlight your call to action. Minimalism in, and clutter is out, so that is why you need to take out the garbage and delete unnecessary images that not relevant to your site. Aim for white space that will draw your visitors' eyes to only the most vital information.

Flash-y Website

Full flash websites are so yesteryear. Flash support will eventually diminish, leaving websites that are fully based on Flash to rot in the website boneyard. Even if it looks great, be aware that some mobile devices do not support Flash, so if you design your website entirely in Flash, you'll be missing out on a huge chunk of potential visitors. Woe betide the webmaster who painstakingly created a Flash site, only to greet visitors who don't have flash-enabled browsers with a blank page, and we all know how.

Fix it

HTML5 is the right path to tread these days, judging by the world of benefits everyone stands to enjoy, including:

superior accessibility
better video and audio support
dynamic interactions
less hassle to design with cleaner coding

Going Overboard with Colors

Some web designers can be so overzealous when it comes to web creation, so much so that it looks like a paint factory just exploded all over the page. Don't get me wrong, it's not a sin to design a colorful website but the least you can do is make sure the colors complement each other.

Fix it

Got a favorite color(s)? Run them through ColorHunter.com or ColourLovers.com for bottomless inspiration before you instruct your design to redo your site. Make sure there is reasonable contrast between the website text and background so that your visitors won't get frustrated when you can't read the copy, no matter how hard they squint their eyes.

Ugly Fonts

An experiment was conducted by two professors who found that people took 86% longer to read instructions written in a complicated font compared to people who had gotten instructions in simple-to-read fonts. In a nutshell, you'll want your visitors to read what's written on your website without first hitting the 'BACK' button, and that's not going to happen if you strain their eyes with unsavory-looking fonts that are way too small.

Fix it

Things to consider when deciding on a font for your website include:

Size: SmashingMagazine recommends using 16 pixels for body copy - according to them, "...16-pixel text on a screen is about the same size as text printed in a book or magazine."
Serif vs sans serif: A serif font is great for transforming your website into a warmer one that oozes with personality whereas the simplicity of a sans serif font makes your site look uncluttered, crisp and modern.
Fancy or plain: Using plain text on headlines that calls for attention or in the body copy allows your audience to read it easily. Otherwise you may use fancier fonts in sidebar headings or taglines.

Lacks Personality

Some websites are simply boring and lack personality - each page begs for a breath of personality, something, And ANYTHING that will make the site come alive. Without personality, the website will be a cold void in which words exist only to be displayed, not consumed or acted upon. Your visitors' eyes may scan across your web content but most of it won't be memorable enough to register in their minds.

Fix it

Humanizing your website should be your ultimate to-do after all the design elements have been set. Before you can convey your message to the masses, you must first believe in it. And because personality is best generated with content, you should write copy that's personalized, almost as if you're speaking to your audience face-to-face over a cup of coffee and chocolate cake. I personally like websites that have a little humor injected into it. The blog has compelling content with dollops of humor mixed into its intriguing depths, a good ingredient that ensures instant bookmarking by anyone who stumbles across it.

In short, if you took the time to personalize your Facebook page with customized Facebook covers, why not spend more time on making your website come alive with a dash of personality that's sure to wow your audience?

You Didn't Take Time to Test Out Your Website

Consider this scenario: your website has been completed. Your design looks good, well worth the thousands of dollars you paid the designer for. The content is nothing short of stellar. Everything seems good to go. But there's a nagging thought at the back of your mind: what if it's not good enough?

Fix it

If you want to ensure good conversion rates for your site, perhaps an A/B testing session is in order. A/B testing, or also commonly known as split testing, is a simple technique employed to compare different variations of your web pages against each other to find out which one produces the best results. Whichever variation garners the best results (more visitor clicks, for example) wins!

You can do split testing on basically almost every web element on your site, including (but not limited to):

headlines and sub-headline
body copy
colors
images
testimonials
logos

Conclusion

It's not what you like, it's what you know, and what other people need that makes your website awesome. The good news about having a less-than-perfect website gives you plenty of room for improvement, and before you do that, you need to stand back and look at your website with a critical eye. Write down unbiased statements based on your honest observations, or if you are unable to do so, get a friend or co-worker who will offer unprejudiced as well as constructive comments. Turn to social media or crowdsourcing groups for opinion. You will likely not be pleased with some comments, but what they have to offer will ultimately help you shape your website into a better one, so it pays to listen and take heed.

(courtesy: www.webdesignerdepot.com)

3 Meaningful Ways Web Design Will Only Get Better

noreply@blogger.com (Navneet Panchariya) — Wed, 21 May 2014 12:14:00 +0000

When you start a sentence "wouldn't it be cool if ...," you're halfway there. Innovations and trends beget more innovations and trends. And the part that comes after that declaration - execution - has been bending the web in a new direction this year.

Design morphed into minimalist, clean form. App-style interfaces scaled our designs to fit on smaller and smaller screens. Which trends will continue? Some seem set on course. Visually, the ideas of minimal style, scalable graphics and touch-based user interfaces are here to stay. For technology, retina images, cross-platform building and HTML5 will continue to drive development. But the next great ideas probably haven't even been put to paper (ok, computer screen) yet.

Who knows what will change before designers worldwide unite in London for the Future of Web Design conference in April 2014? The seeds of those concepts will probably be sown in workshops about responsive design by Jason Pamental, CSS architecture for big front-ends by Harry Roberts, and animating in your browser with CSS3 and HTML5 with Rachel Nabors. Innovators such as Jon Setzen and Paul Boag will also have a say.

Here are three factors that we might be talking about a year from now

'Crappy Bandwidth' has a shelf life

Rachel Andrew, director of edgeofmyseat.com, pointed out in a recent interview that we believed our future would contain "massive screens and all this space and people are going to have really fast connections." Instead, "we've all ended up on tiny little screens with crappy bandwidth."

True, screens have shrunk, but the bandwidth doesn't need to stay shoddy.

Low bandwidth factored in the move toward simple design to cut load time, but pages will load faster and videos play quicker with new fiber-optic Internet from Google Fiber and Verizon Internet. As online video content grows, developers can integrate them into minimalist design for optimal performance.

Responsive web design will cover all screens

As mobile device usage increases, consumers are able to see our sites on devices of their choosing. And that means screens of all sizes.

Web and mobile design no longer live in separate caves. The choice to go with native mobile apps or a responsive site is no longer there, because the divide is not between desktop and smartphone. Now, it's among desktop, laptop, tablet, phablet and smartphone. The "lite" version of a site is already dead.

Tomorrow's trend will be design that's simple enough for mobile, but with the functionality of a full screen. Sites that take hundreds of hours to create need to be consumable in a matter of seconds.

Immersive experiences will encourage engagement

Once, a site was simply a collection of related pages, lined up in a menu. The current movement toward a narrative arc, built on a storyline that takes a consumer from interest to action (or transaction), goes against the grain of compartmentalized pages and easy mobile navigation.

Web experiences that forsake orderly directories in favor of enveloping navigation that beckons the user not to click this or that tab, but to scroll and read, will continue to win.

Google's Chromebook and Glass pages encourage discovery without leaving the page. A simple design doesn't mean a page can't be interactive: rich media, drawers and even some y-axis animation can engage page visitors and guide them down the page and further into your narrative.

Although the genesis of the next path-bending idea might well rise from the collection of minds in London next April, there's also a great chance it could emerge from this corner or that, among other developers in pursuit of the balance between beauty and functionality.

Conclusion

It'll be interesting to see how web design evolves over time. This industry is ever-evolving and always improving. Will the trends above eventually emerge? Only time will tell.

(courtesy: www.webdesignerdepot.com)