Monthly Archives: June 2017

Non Designer’s Guide to Hiring Great and Good Freelance Web Design

Communication

This one doesn’t need much explaining. Having a good line of communication is important in every area of your business, especially when it comes to nailing down a UX design that meets your business goals effectively. Some people, however, let this fall by the wayside when choosing a web designer, which can lead to trouble later on.

So, if you are finding a freelance web designer on your own, pick up the phone and call before making any decisions.

Sure, it sounds old school, and tools like email and gChat are great, but you want to make sure this is a person you can have a conversation with, will listen to your concerns along the way and will follow up with questions of his or her own regarding the project’s specifics.

If the designer spends the whole conversation speaking over your head, using confusing tech jargon, this scenario probably won’t change and will cause problems for you down the line. A great designer will be deeply interested in you, the client, and your business and its needs, and will explore early on how those concerns can be worked into the eventual solution.

If you are using a freelancing site to find your designer, choose one that screens for communication skills in addition to technical design ability. Because these sites source from developers all over the world, sometimes something as important as language comprehension can get in the way of your project.

Your best bet here is to use a service like the recently announced Toptal Designers, which screens all applicants for language and personality from the beginning (before getting to more intense design tests later on). This way, you know the designer you get matched with will have the communication skills you need.

Languages

Speaking of languages, let’s talk about coding languages. A lot of the time, it can seem like web designers are speaking an entirely different language than you — and this is actually true for many designers who also have a little front-end coding experience.

Designers often broadcast their web design abilities by advertising their experience with popular front-end coding languages. Different languages are used for different products, and knowing the basics here will help you find the right freelancer for your project. For designers, the key languages to know are HTML, CSS and JavaScript.

Web design

The best place to start looking for what you want in your website is — surprise — the internet. As you are browsing, take note of other sites you like, so that you can show them to your designer. Don’t simply find a site you like and instruct your designer to build you a replica; instead, share a list of the specific features of the site that you’re drawn to.

Also, make sure to explore the websites of other businesses in your industry. What works and doesn’t on these sites? Finally, remember that while you do want a website that is aesthetically pleasing, having a nice design is not the sole purpose of your site.

You want to be able to sell your product or service. In other words, you don’t want visitors to view your site, see how nice it is and leave; you want your site to help users realize that they need whatever it is you are selling.

Function

Always consider user experience when you’re working with your designer to build your site. Is it easy to navigate between all the pages on the site? Is the site’s setup intuitive? Is it easy to find your contact information? Can users browse without having to scroll too much? Side note: You never want them to have to scroll horizontally. And, digging deeper, is the site built on a functionally reliable CMS, such as WordPress? These are key things to find out before you go searching for a designer.

When you do select one, the functionality of past sites he or she has worked on is just as important as its look. Always ask for a portfolio and look through it online if you can. See if this person’s past work is still being used by past clients, and if not, try to contact the owner and ask why he or she switched. Can the designer communicate the story of the design?

What problems did it solve? How was the solution unique? You do not want a designer who habitually creates sites that are hard to use or employs technology that is behind the times.

Pricing

Unfortunately, there is no standard price for how much contracting out your website will cost you. Plenty of software price estimationapproaches exist, but a wide range of things affect price, including the skill set of the designer, his or her location, the amount of time your project will take and the specific features you require. You may also have to pay to bring in any additional freelancers or subcontractors needed to bring in to complete the project.

Plenty of articles will tell you to avoid paying too much or too little (you already know that!), but how do you determine what that means?

As you determine the budget for your site, remember to see it as an investment. A great website is a crucial marketing tool that will be available to answer users’ questions 24/7 without your having to pay overtime. Therefore, try not to view the money you spend as mere cost.

That said, it will be rare that you need to invest six figures into your site.

Determine how much you have to set aside for the development of your site, and be realistic about your goals. Get in touch with a variety of different designers to explain your project and get an average quote. If you find that designers are too expensive for your price range, turn to freelancing sites. You can find lots of articles online that list the best freelancing sites, so explore these options and find the best one that fits your budget.

Conclusion

Finding a great freelance web designer can feel like a big undertaking, especially if you are unfamiliar with the expectations and terminology of the tech or design industries, but this should not be cause for worry. People with all levels of technological experience hire freelance web designers all the time, and there are lots of tools out there to help you navigate the process.

The most important thing is to do your research, and that starts with understanding what a thorough research process should entail.

14 Best and easiest Web Design Trends

1. Minimalism

From simplifying logos and typefaces (here’s looking at you, Google) to cleaning up entire web pages, minimalism is the trend influencing all others. Websites are focusing more on their actual content and reducing all of the clutter around it. Footers, sidebars and borders are all disappearing, and even color palettes are being simplified as companies emphasize one dominant color in their visual design.StubHub’s logo change is a perfect example of this trend.

2. App-like menus

Designing with the mobile market in mind changes more than just aesthetics. It has impacted the way web illustrators think about organizing their content and how they let readers access it. Sticky menus and sidebars are falling out of favor to make room for content that readers actually want to see. These days, menus are at the top of the screen and are mostly hidden, noted by a single icon (often a stack of three lines called a “hamburger”) that when selected drops down or slides out into a more robust menu. Social media analytics companyUnmetric has a beautifully simple example of this style of menu.

3. Ghost buttons

Web sites are moving away from loud, flashy buttons, and are embracing transparent buttons. Because they are less obtrusive, ghost buttons help sites highlight more of the content they want audiences to actually see instead of call-to-actions they would otherwise force users to click. Ghost buttons include only the outline of a button (no fill) along with a word or two in simple typography in the center.BigDrop, a web design firm, features a prominent ghost button on their landing page.

4. The reign of the hero Image

Already trending in 2014, the hero image hasn’t gone anywhere this year, but it has evolved. Last year, sites all over the web included the standard hero image: a high-definition (HD) picture featured prominently at the top of a website that stretched the entire width of a user’s browser window with only a few words of text overlaying it.

This year the hero image has changed in a few remarkable ways. Some sites have taken the HD photo one step further and embedded HD video onto their landing page. Others pursued the opposite route: blurring the banner photo or removing it altogether in favor of a simple colored background to draw attention to the text. Spotify’s site shows a blend of these trends, offering an image on one half of the page but leaving plenty of white space for its heading and a pastel and ghost button to boot.

5. Interesting typography

When the hero image became popular, designers began paying more attention to typography. Picking an engaging font is crucial to drawing a visitor’s attention when so much of the site’s content is simplified and reduced as an effect of minimalism. Ad agency RSQ uses custom typography on its website and features a powerful statement without any other distractions to spotlight its message to audiences.

6. Stock photos that don’t look like stock photos

The days of the generic stock photo are over (thank the photography gods); jaw-dropping visuals are in. With communities like 500px andUnsplash, finding high quality do-whatever-you-want-with-it photography is easier than ever. As a result, websites no longer look like the result of an uncoordinated stock photo shopping spree. Now, they actually feel genuine.

7. Single page design

Nobody wants to click through multiple pages anymore. Instead, users prefer to scroll through content on one long page. This trend too has its roots in mobile web surfing because it is far easier to scroll down with your thumb than it is to click through multiple pages and wait for each to load. This year has reinforced that concept, and while few websites are only a single page, most are reducing the number of pages they have and lengthening the content on each to be more mobile-friendly. Smartwater’s website uses scrolling to great effect by making the visitor scroll up rather than down to illustrate that their water is distilled from vapor.

8. Parallax scrolling

A way to make websites more engaging, parallax scrolling creates a three-dimensional illusion that draws audiences into a site’s content. Many brands now use parallax scrolling to create a more immersive effect for visitors. Dangers of Fracking uses this brilliantly as you follow a drop of rain from the clouds to the depths of the earth.

9. Modular design

Call it a grid, tiles or cards, each of these designs creates the same effect: organizing content in an efficient, aesthetically pleasing way. A single column of content is inefficient and less user-friendly by comparison. Modular design allows a page to show more content to users faster, in a way that makes more intuitive sense and creates a more visually engaging layout at the same time. On its homepage, The Next Web offers a textbook-perfect example of good modular design.

10. The evolution of flat design

Flat design made a huge impact on graphics last year, so much so that Google released its own version of flat design called material design. Material design employs the same aesthetic as flat design, focusing on simplicity and clean presentation, but Google’s design has more subtlety. Whereas flat design includes simple illustrations to create recognizable but minimalist two-dimensional content, material design uses gradients, slight animation and shadowing to add depth to the image. With most web designers in a minimalist mindset, material design won’t be going anywhere soon. Below is Material Design Blog’s landing page, which is a great example of how material design works for logos.

11. Line icons

Alongside material design, line icons is the other movement finalizing the decline of skeuomorphism. Rather than an icon looking exactly like the object it represents (a design style that Apple popularized with its iOS icons), icons are created with simple lines and shapes that convey an action, object or thought we are all very familiar with. Many line icons have become universal in web design, such as the outline of a magnifying glass signaling the search function or the hamburger (three stacked lines) for a menu. Below are examples of line icons from OtherIcons.

12. Google Maps integration

Google Maps is everyone’s go-to map service, and it is only getting better. With customizable options, more brands are integrating the service into their websites — a move that is long overdue. Companies can add Maps to their site and customize its colors to complement their preferred color scheme. For example, Airbnb uses Google Maps and customized markers to help users figure out where available rooms are and how much they cost so they can plan a getaway that fits their budget and style.

13. Scalable vector graphics (SVG)

When Apple released Retina display, designers were up in arms. Upset that their graphics and images suddenly looked pixelated with Retina’s higher resolution, designers were forced to adopt new methods that would allow their illustrations to look good on and be compatible with any device. Fortunately, Scalable Vector Graphics (SVG) rose to the challenge. SVG presents graphics as vectors, which allows them to scale with different resolutions. With SVG, images maintain their clarity and sharpness on all devices. Snap.svg, a Javascript SVG library, has many examples available, such as this one below.

14. Vertical split layouts

Split screen layouts are popping up all over the web this year. With a vertical split layout, designers are able to present twice the content to users in a clean and simple format. Websites are divided in half widthwise, featuring two separate messages. The split screen is a great way to show equality between two things because standard web layouts dictate the most important things come first. Car maker Peugeot uses a vertical split layout on its homepage to blend the human element of the car with the car itself, suggestive of the relationship between driver and vehicle.

What is Heck Inclusive Design?

Naming things is hard. And I don’t just mean CSS class names andJSON properties. Finding the right term for what we do with the time we spend awake and out of bed turns out to be really hard too.

I’ve variously gone by “front-end developer”, “user experience designer”, and “accessibility engineer”, all clumsy and incomplete terms for labeling what I do as an… erm… see, there’s the problem again.

It’s tempting to give up entirely on trying to find the right words for things, but this risks summarily dispensing with thousands of years spent trying to qualify the world around us. So here we are again.

Recently, I’ve been using the term “inclusive design” and calling myself an “inclusive designer” a lot. I’m not sure where I first heard it or who came up with it, but the terminology feels like a good fit for the kind of stuff I care to do when I’m not at a pub or asleep.

This article is about what I think “inclusive design” means and why I think you might like it as an idea.

Isn’t ‘inclusive design’ just ‘accessibility’ by another name?

No, I don’t think so. But that’s not to say the two concepts aren’t related. Note the ‘design’ part in ‘inclusive design’ — that’s not just there by accident. Inclusive design describes a design activity; a way of designing things.

This sets it apart from accessibility — or at least our expectations of what ‘accessibility’ entails. Despite every single accessibility expert I know (and I know a lot) recommending that accessibility should be integrated into design process, it is rarely ever done. Instead, it is relegated to an afterthought, limiting its effect.

The term ‘accessibility’ therefore lacks the power to connote design process. It’s not that we haven’t tried to salvage the term, but it’s beginning to look like a lost cause. So maybe let’s use a new term, because new things take new names. People get that.

The ‘access’ part of accessibility is also problematic. Before we get ahead of ourselves, I don’t mean access is a problem — access is good, and the more accessible something is the better. I mean it’s not enough by itself.

Imagine a website filled with poorly written and lackadaisically organized information, including a bunch of convoluted and confusing functionality. To make this site accessible is to ensure no barriers prevent people from accessing the content.

But that doesn’t make the content any better. It just means more people get to suffer it.

Whoopdidoo.

Access is certainly a prerequisite of inclusion, but accessibility compliance doesn’t get you all the way there. It’s possible to check all the boxes but still be left with an unusable interface. And unusable interfaces are necessarily inaccessible ones. Sure, you can take an unusable interface and make it accessibility compliant, but that only placates stakeholders’ lawyers, not users. Users get little value from it.

So where have we got to? Access is important, but inclusion is bigger than access. Inclusive design means making something valuable, not just accessible, to as many people as we can.

So inclusive design is kind of accessibility + UX?

Closer, but there are some problems with this definition.

UX is, you will have already noted, a broad term encompassing activities ranging from conducting research studies to optimizing the perceived affordance of interface elements. But overall, what I take from UX is that it’s the pursuit of making interfaces understandable.

As it happens, WCAG 2.0 already contains an ‘Understandable’ principle covering provisions such as readability, predictability and feedback. So you might say accessibility — at least as described by WCAG — already covers UX.

Unfortunately, the criteria are limited, plus some really important stuff (like readability) is relegated to the AAA level; essentially “bonus points if you get the time (you won’t).”

So better to let UX folks take care of this kind of thing. It’s what they do. Except, therein lies a danger. UX professionals don’t tend to be well versed in accessibility, so their ‘solutions’ don’t tend to work for that many people. My friend Billy Gregory coined the term SUX, or “SomeUX”: if it doesn’t work for different users, it’s only doing part of the job it should be.

SUX won’t do, but it’s not just a disability issue. All sorts of user circumstances go unchecked when you’re shooting straight for what people like, and bypassing what people need: device type, device settings, network quality, location, native language, and available time to name just a few.

In short, inclusive design means designing things for people who aren’t you, in your situation. In my experience, mainstream UX isn’t very good at that. By bolting accessibility onto mainstream UX we labor under the misapprehension that most people have a ‘normal’ experience, a few people are exceptions, and that all of the exceptions pertain to disability directly.

So inclusive design isn’t really about disability?

It is about disability, but not in the same way as accessibility. Accessibility (as it is typically understood, anyway) aims to make sure things work for people with clinically recognized disabilities. Inclusive design aims to make sure things work for people, not forgetting those with clinically recognized disabilities. A subtle, but not so subtle, difference.

Let’s go back to discussing readability, because that’s a good example. Now: everyone benefits from readable text; text with concise sentences and widely-understood words. It certainly helps people with cognitive impairments, but it doesn’t hinder folks who have less trouble with comprehension. In fact, they’ll more than likely be thankful for the time saved and the clarity. Readable text covers the whole gamut. It’s — you’ve got it — inclusive.

Legibility is another one. A clear, well-balanced typeface makes the reading experience less uncomfortable and frustrating for all concerned, including those who have various forms of visual dyslexia. Again, everyone’s happy — so why even contemplate a squiggly, sketchy typeface? Leave well alone.

Contrast too. No one benefits from low contrast; everyone benefits from high contrast. Simple. There’s no more work involved, it just entails better decision making. And that’s what design is really: decision making.

How about zoom support? If you let your users pinch zoom on their phones they can compensate for poor eyesight, but they can also increase the touch area of controls, inspect detail in images, and compose better screen shots. Unobtrusively supporting options like zoom makes interfaces much more inclusive at very little cost.

And when it comes to the underlying HTML code, you’re in luck: it has already been designed, from the outset, to be inclusive. HTML is a toolkit for inclusion. Using the right elements for the job doesn’t just mean the few who use screen readers benefit, but keyboard accessibility comes out-of-the-box, you can defer to browser behavior rather than writing additional scripts, the code is easier to read and maintain, and editors can create content that is effortlessly presentable.

Wait… are you talking about universal design?

Hmmm. Yes, I guess some folks might think of “universal design” and “inclusive design” as synonymous. I just really don’t like the termuniversal in this context.

The thing is, it gives the impression that you should be designing forabsolutely everyone in the universe. Though few would adopt a literal interpretation of “universal” in this context, there are enough developers who would deliberately misconstrue the term and decry universal design as an impossible task. I’ve actually had people push back by saying, “what, so I’ve got to make it work for people who are allergic to computers? What about people in comas?”

For everyone’s sake, I think the term ‘inclusive’ is less misleading. Of course you can’t make things that everybody can use — it’s okay, that’s not the aim. But with everything that’s possible with web technologies, there’s really no need to exclude people in the vast numbers that we usually are.

Accessibility can never be perfect, but by thinking inclusively from planning, through prototyping to production, you can cast a much wider net. That means more and happier users at very little if any more effort.

If you like, inclusive design is the means and accessibility is the end — it’s just that you get a lot more than just accessibility along the way.

Conclusion

That’s inclusive design. Or at least, that’s a definition for a thing I think is a good idea which I identify as inclusive design. I’ll leave you with a few tips.

Involve code early

Web interfaces are made of code. If you’re not working with code, you’re not working on the interface. That’s not to say there’s anything wrong with sketching or paper prototyping — in fact, I recommend paper prototyping in my book on inclusive design. Just work with code as soon as you can, and think about code even before that. Maintain a pattern library of coded solutions and omit any solutions that don’t adhere to basic accessibility guidelines.

Respect conventions

Your content should be fresh, inventive, radical. Your interface shouldn’t. Adopt accepted conventions in the appearance, placement and coding of interface elements. Users aren’t there to experience interface design; they’re there to use an interface. In other words: stop showing off (unless, of course, the brief is to experiment with new paradigms in interface design, for an audience of interface design researchers).

Don’t be exact

“Perfection is the enemy of good”. But the pursuit of perfection isn’t just to be avoided because nothing ever gets finished. Exacting design also makes things inflexible and brittle. If your design depends on elements retaining precise coordinates, they’ll break easily when your users start adjusting font settings or zooming. Choose not to position elements exactly or give them fixed, “magic number” dimensions. Make less decisions in the interface so your users can make more decisions for it.

Enforce simplicity

The virtue of simplicity is difficult to overestimate. The simpler an interface is, the easier it is to use for all kinds of users. Simpler interfaces require less code to make too, so there’s an obvious performance advantage. There are many design decisions that require user research, but keeping things simple is always the right thing to do. Not simplified or simple-seeming or simplistic, but simple.

Do a little and do it well, for as many people as you can.

The Basics of Web Design using Adobe Dreamweaver CC

Developing a new website

Before you begin any web design project for yourself or for a client, you need to answer three important questions:

  • What is the purpose of the website?
  • Who is the audience?
  • How do they get here?

What is the purpose of the website?

Will the website sell or support a product or service? Is your site for entertainment or games? Will you provide information or news? Will you need a shopping cart or database? Do you need to accept credit card payments or electronic transfers? Knowing the purpose of the website tells you what type of content you’ll be developing and working with and what types of technologies you’ll need to incorporate.

Who is the audience?

Is the audience adults, children, seniors, professionals, hobbyists, men, women, everyone? Knowingwho your audience will be is vital to the overall design and functionality of your site. A site intended for children probably needs more animation, interactivity, and bright, engaging colors. Adults will want serious content and in-depth analysis. Seniors may need larger type and other accessibility enhancements.

A good first step is to check out the competition. Is there an existing website performing the same service or selling the same product? Are they successful? You don’t have to mimic others just because they’re doing the same thing. Look at Google and Yahoo—they perform the same basic service, but their site designs couldn’t be more different from one another.

How do they get here?

This sounds like an odd question when speaking of the Internet. But just as with a brick-and-mortar business, your online customers can come to you in a variety of ways. For example, are they accessing your site on a desktop computer, laptop, tablet, or cellphone? Are they using high-speed Internet, wireless, or dial-up service? What browser are they most likely to use, and what is the size and resolution of the display? These answers will tell you a lot about what kind of experience your customers will expect. Dial-up and cellphone users may not want to see a lot of graphics or video, whereas users with large flat-panel displays and high-speed connections may demand as much bang and sizzle as you can send at them.

So where do you get this information? Some you’ll have to get through painstaking research and demographic analysis. Some you’ll get from educated guesses based on your own tastes and understanding of your market. But a lot of it is actually available on the Internet itself. W3Schools, for one, keeps track of tons of statistics regarding access and usage, all updated regularly:

  • w3schools.com/browsers/browsers_stats.asp provides information about browser statistics.
  • w3schools.com/browsers/browsers_os.asp gives the breakdown on operating systems. In 2011, they started to track the usage of mobile devices on the Internet.
  • w3schools.com/browsers/browsers_display.asp lets you find out the latest information on the resolution, or size, of screens using the Internet.

If you are redesigning an existing site, your web-hosting service itself may provide valuable statistics on historical traffic patterns and even the visitors themselves. If you host your own site, you can incorporate third-party tools, such as Google Analytics and Adobe Omniture, into your code to do the tracking for you for free or for a small fee.

Click to view larger image

Analytics provides comprehensive statistics on the visitors to your site. Google Analytics, pictured here, is a popular choice.

As of the fall of 2015, Windows still dominates the Internet (80 to 85 percent), with most users favoring Google Chrome (60 percent), followed by Firefox (21 percent), with various versions of Internet Explorer (7 percent) a distant third. The vast majority of browsers (99 percent) are set to a resolution higher than 1024 pixels by 768 pixels. If it weren’t for the rapid growth in usage of tablets and smartphones for accessing the Internet, these statistics would be great news for most web designers and developers. But designing a website that can look good and work effectively for both flat-panel displays and cellphones is a tall order.