Category Archives: Web Design

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.

Design Puzzle on Front Page

Home page design isn’t just about headers, content, and footers. It is about asking the right questions and making sure those questions apply to your website visitors. It’s about finding solutions to problems and bringing it together within a cohesive design.

Have You Ever Wondered?

  • How do I make my website memorable?
  • How do I make sure people stick when they hit my home page?
  • How do I make sure website visitors dig into my content and explore my product or service offering?
  • How do I make sure website visitors take a moment to reach out to us by email, phone, or inquiry form?

If you read those questions and thought “yes that is exactly what I want to ask” then know you’re not alone. I know a lot of people, marketing departments, and companies who all wonder the same about the design and function of their website.

If you take a step back and read through the list, you’ll notice all the questions included I or me. None of them focused on the visitor.

Best Practice in Home Page Doesn’t Include Me or I

Best practice in home page design is about website visitors, their needs, and their wants.  It isn’t about an idea that is cool or something you may have seen on four other websites. It is about your target market, what they need, and how your offering can help.

We receive a number of inquiries each day from people who’d like us to help create a new website or update their existing website. In most cases the inquiries go a little like this:

  • I am inquiring to see if I can get a price for you to redo our current website. Please have a look at the link to website provided and get back to me.
  • We are considering upgrading our website. Are you able to help us?
  • I would like a website that looks exactly like XYZ.com. Can you create that for me?
  • I would like my website to be more professional, can you please help?
  • Can you look at my website and tell me what needs to change?
  • I know my website is a mess and I’d like you to clean it up.

A lot of individuals and organizations tend to design websites according to their own needs or they base it on a website they’ve visited and liked. Or, in more recent years, they think of a cool internet marketing idea and want to implement it.

All of this is fine, but what they many times fail to do is compare this idea or need for update to what their website visitors need and want. I’ve found this is especially true if the website is brand-new and the idea is referred to as “cool.”

Have You Ever Asked Yourself?

  • Who comes to my website?
  • Are these visitors all similar or are they broken up into groups (website personas)?
  • What problems do these people have and what issues are they trying to solve?
  • Can my product or service offering solve these problems?
  • What content do I have that can best articulate my solution and provide assistance?
  • What next step should the website visitor take so I can help solve their issues?
  • How can the visitor and I stay in touch with each other?
  • Can the visitor easily contact me?

What we’ve done is simply take the original questions and redirect them so they are more focused on the visitor. This task is easy, but many times overlooked.

Now take those above questions and apply them to your existing website. How does your website answer those questions? If it doesn’t, it is time for a refresh.

What Should You Consider in Your Website Refresh?

There are lots of elements that go into the core design of a website. I’m not talking about each and every page. Instead I’m referring to the main design elements, home page, header and footer.

Below is a list of some website design elements we review, discuss, and plan for in early stages of our projects:

Elements of a Website Header:

  • Logo
  • Tagline
  • Social media icons and/or references
  • Search box
  • Primary navigation menu (core destinations)
  • Secondary navigation menu (secondary destinations such as account or login)

Elements of the Core Home Page:

  • Rotator or static image
  • Video
  • Site introduction or overview
  • Featured content
  • Persona call out and directions for movement
  • Call to actions
  • Promotions and/or deals
  • Recent blog posts
  • Upcoming events

Elements of a Website Footer:

  • Widgets for lists to core content
  • Contact information
  • Site navigation to sitemap, policies, terms and conditions
  • Disclaimers or legal notices
  • Copyright

That’s a lot stuff right? Yes it is and why I don’t expect new clients to have answers for all of the items in the list, it would be great if they’ve thought through some of it and how each would provide assistance for their target market and visitors.

If they haven’t, I’m happy to walk through it with them and dissect the different elements and how they can help provide solutions for visitors.

Web Design is a Puzzle

I recently had a friend tell me that I’m a fan of puzzles. I’ve never believed that to be the case, but once I thought about it for a minute, I knew he was spot on. I do like puzzles. Thinking back in time I remember spending endless hours with the Rubik’s Cube, Missing Link, and the Pyraminx Pyramid Puzzle. I solved all three and to the surprise of my parents, I mastered the Rubik’s Cube rather quickly.

As an adult I still like puzzles,  but now I like puzzles with a purpose.

I fell in love with SEO years ago because it was a puzzle. Trying to figure out what the search engines wanted and how it would alter ranking was fun. Google has become a lot more transparent, so the puzzle is no longer as challenging. As such, it has completely removed the fun factor for me.

My love for puzzles is now focused on website design. For me, the puzzle is understanding our client’s target market, their visitors’ needs, their offering, and then making it all come together through website design. That puzzle changes with each new client and each new website. It stays fun each and every time.

If you’d like me to help with your puzzle, just reach out to us and let us know how we can help.
We’ll start with a whole lot of questions and then we’ll put the pieces together as we design your new home page.

Exams and Tribulations Hiring Website Developers

Within 48 hours I had received three different pieces of communication from people speaking negatively about their website developers. Which is beyond frustrating since this is my profession and we’ve been working with WordPress development for over seven years.

Does a website design and development project really need to be filled with trials, tribulations, and ongoing angst? Can the process ever go smoothly and within the expectations set prior to money changing hands?

Yes it can, but these successes are never the stories we hear about.

My communication this week made me think of the phrase “trials and tribulations” and it took my back to Sunday school and listening to Bible verses from Corinthians or Romans. So much disappointment and struggles fills these project. Money is wasted, time lost, and sales disappear into thin air.

Think I’m being overly dramatic? Let me share some real-world comments received within the last two days.

Value Content first Before creating a Website Design

Website design should be crafted around the user, their needs, and the desired outcome of a website visit. It should be focused on the user’s challenges and the website’s ability to solve these issues.

It should not be focused on coding trends and prepackaged templates.

Design Trends Come and Go, But a Focus on the User Should Not

I’ll receive emails from people discussing their website design requirements and many times these lists will be focusing on specific project criteria like infinite scroll, hamburger menus, hero images, video backgrounds, and motion.

Rarely do people approach a design firm and present data based on their visitors, the user’s needs, and the ultimate goals of a website visit.

Website owners get caught up in design trends, their competitors’ websites, and what they believe is modern and current design elements. In doing so, they lose track of the actual website visitor.

All too often people select a website template or blog theme and get caught up in the graphical presentation or bells and whistles it offers. It’s an emotional buy that supersedes the desire to help the actual website visitors.

Once they buy the stock theme, they force their content to fit within the template’s available content blocks. Or worse yet, they force a custom design to adhere to the same style and presentation of a top competitor’s website.

In most cases this leads to disappointment and buyer’s remorse.

The reason this occurs is this process follows the path of purchase, design, development, and finally content. That path is in the wrong order. The process is going backwards and it leads to frustration.

Content First Leads to Educated Design Decisions

Documenting your desired user flow, visitor paths, and call to actions is something that is typically done after the graphic design is completed. Unfortunately that’s the wrong approach because it forces you into matching content to the website theme or design. It should be just the opposite.

Before you find yourself falling in love with a competitor website, coveting a stock WordPress template, or reaching out to a graphic designer, you need think through the goals and objectives of your website or blog.

You need to document your user personas, their individual challenges, your solution offering, and the paths you’d like these visitors to take within the website.

While graphic design in very important, it must take place at the right time within the project to truly allow you to showcases the website, content, and offering in the best light possible.

One of my favorite quotes on this subject is:

“Content precedes design. Design in the absence of content is not design, it’s decoration.” – Jeffrey Zeldman

Messaging and content are the building blocks and foundation of the website. This means they should be carefully thought through and documented well before any colors, fonts, and layouts are considered.

The design elements should complement, highlight, and showcase the key messaging and most important content.

Focus on the Right Content

While I am saying you should have content written before beginning design, I’m not saying that you have to have all your content written. That would be a difficult task to accomplish for most website owners and businesses.

I encourage clients to focus on core website sections and pages. During the sales process I usually go through their website and look for areas I think would benefit from custom design templates. These will vary based on the client, industry, and target demographic.

Here are some common areas that can benefit most from a content first strategy:

  • Home
  • Main about or company page
  • Main services page and individual service pages
  • Main storefront and individual product pages
  • Resource section, categories, and/or resource items
  • Personas
  • Landing page templates
  • Main blog page and individual blog posts
  • Contact page

Sometimes I’ll suggest just a few custom design templates and other times I’ll suggest fifteen to twenty. It really depends on the complexity of the content and the variations in the content flow and call to actions.

As we progress into a project with a client, we like to have as much information as possible on core elements and how these might be altered based on different areas of the website.

Content elements that matter in a content before website design approach:

  • Headlines and subheaders
  • Core messaging
  • Paragraph text
  • User personas and visitor paths
  • Call to actions
  • Images
  • Videos
  • Navigation
  • Social media accounts
  • Search engine optimization

The more your graphic designer knows and has available, the more unique and targeted your design will become.

Finding Balance

Not all situations will allow a content before website design approach. You have to find balance and you have to pick and chose your battles.

If this approach is going to be difficult, I suggest starting with universal elements such as navigation, SEO, and call to actions. Then begin narrow down the focus by reviewing user personas and their visitors paths.

Focus on known elements and weave these into design by starting with the home page and then allow the design to build from his central hub. While moving through this process, stay focused on the visitor, what they need, and what action you ultimately want them to take.

The process can seem overwhelming, but like anything in life, you need to break it into chunks and evaluate the large list bit by bit.

Why do some web design designers let themselves go?

We like to keep our eyes out for new websites to ensure that we’re on top of the game, and far too often we see new websites being launched that are, putting it nicely, below par.

Yes there are home-built websites, or ones produced by web designers who don’t have the necessary skill sets, but there are others built by web agencies that, in our opinion, can do a lot better. It appears as if they have given up, or just gone through the process of doing the minimum required to get paid. But why wouldn’t they do a decent job?

When I started making websites back in the late nineties I loved it, and wanted to make every last pixel perfect. Even though by today’s standards the websites weren’t brilliant, I really took pride in what I did, and did my best.

Fast forward ten years to around 2007 and Webbed Feet wasn’t just me, it was a team, and we were doing things commercially. Many web and design agencies have issues keeping projects ‘on track’ and preventing them from overrunning, after all we’re all in business to make money. We were no different and had projects that actually lost us money, and urgently needed a strategy to make everything run to plan.

So we had discussions to rectify this, and there were the two obvious solutions; either put our prices up, or cut corners and reduce the quality of what we produce. Neither of these suited us, so we decided to change our processes to make things more efficient. These processes included scoping out and quoting projects in far more detail, having client sign-off stages during the build, changing how we develop websites, and not tendering for every project that we see. There’s a lot more to it than that of course, but we slowly but surely started keeping things profitable without reducing quality or drastically increasing our prices… it worked!

Fast forward another ten years, and we do still make mistakes when quoting, but are doing much better and have strict quality control procedures. If our team presented us with work of the same quality that we have seen other agencies produce recently, we’d have stern words with them and make them finish it properly. However, our team wouldn’t present that to us, nor would they let us launch it in that state. Why? Because all of our team have pride in their work, and we encourage them to do a good job.

So why don’t all other web design agencies do this? Why do so many launch websites of such a poor quality? Why have some capable web designers ‘let themselves go’?

We believe this is because of the lack of processes similar to those we have evolved over the years. Getting these in place has probably been the single hardest thing we’ve had to do in order to get quality websites launched at a cost-effective price.

We consciously made the decision not to release sub-standard work, even it meant years of work finding a way to do it. We believe some other agencies quite simply haven’t done this.

In order to turn a profit they turn to pre-built platforms such as Joomla orWordPress, buy and tweak a template, install a few plugins or modules, and cut and paste some content and stock images. That’s it, they’re not a creative agency striving to produce the best, they run an electronic production line churning out whatever they can.

That’s up to them of course, who are we to tell them how to run their business? But we feel for the clients. Yes some people choose to buy a cheap website, and that’s their prerogative, but others can often spend thousands of pounds in good faith on the back of a good salesman, and don’t get what they paid for. Even worse than that, what they are missing from their initial website needs to be retro-fitted by a competent web design agency and can end up costing the client more money in the long run.

This gives the good web design agencies a bad name (and there are a lot of these too) as it taints our industry.

If anyone is concerned about what they have had, or are having made, then don’t hesitate in picking up the phone and we’ll give you somehonest feedback.

Vacancy to create creative web designer

We’re an award-winning web agency who have been creating bespoke websites since 2001. We’re expanding and looking for someone to join our friendly and informal team. We have clients ranging from small local businesses to large corporates.

We’re recruiting a junior creative web designer to join our team in Salisbury.

Applicants must have a flair for design, experience with graphic design specifically for websites, and be familiar with wire framing and design mock-ups. Print-based graphic design is advantageous, but not a necessity.

From a web-perspective applicants must know HTML and CSS inside-out, and ideally have an understanding of JavaScript.

Crucially, applicants will be judged on their portfolio rather than their qualifications. So any successful applicant will likely have examples of websites and graphic design that they’ve built either commercially, or as part of their private portfolio. We’d also like to see, where available, the interim stages of a design (such as mock-ups and sketches).

Applicants must be able to code the front-end of websites from scratch, not relying on WordPress templates or equivalent, and this must be apparent in any examples given.

To some extent we can match the jobs to your skill set, but we’d want a candidate to design the front end of websites, help with branding, improve existing website designs, and implement this with front-end coding.

Benefits include flexible working hours, pension, full training, free tea/coffee, staff pool table, relaxed environment, and career progression as part of our friendly growing team. We also have a tiny office dog Flipper some days.

The position will be in the Barnack Business Park, Salisbury, SP1 2LP, walking distance from local shops, parks, and the city centre.

To apply please forward your CV and examples of your work to us via email.

If you can see yourself as a front-end creative web designer, then we look forward to your application.

6 Skills You Can Learn Online

I am so much in love with this era we are in — an era where there is so much information online for self-development. A focused and determined person can learn many skills online and use them to diversify his or her income. With all the advanced, digital technology in this world, no one should give excuses of not having one or two skills to remain relevant and competitive.

In the days of yore, skill acquisition and dissemination were limited to certain geographical locations because of the low level of technological know-how. However, the advent of sophisticated technology — which propelled the development of many apps, software and social media — has made skills and knowledge easily disseminated and accessible.

Related: 8 Free Training Tools That Will Help You Excel at Your Job

There are countless websites readily available for you to acquire valuable skills and knowledge for free or with little fee for a productive 2017. These skills are:

1. Web design and development.

Web design and development is a highly sought-after skill. This is because we are in a digital transformation age where every business — small, medium and large scale — is extremely interested in showcasing their products and services to the world through their websites.

There are lots of sites that can teach you how to design and develop a website. By acquiring these skills, one is adequately positioned to scramble for millions of small, medium and large scale businesses who are contemplating launching or updating their websites.

2. Statistical data analysis.

Statistical data analysis is another vital skill that is in high demand by companies, entrepreneurs and students. The knowledge of Mini-tab,  Statistical Package for Social Sciences (SPSS) and E-view, just to name a few, makes a person highly desirable.

As a researcher, I have smiled all the way to the bank numerous times because I have some knowledge of statistical data analytical software. Most students in tertiary institutions need an expert data analyst — companies too, especially when sophisticated software is needed for forecasting market shares, profit and other vital results that will aid managerial decision making.

You can learn these data analytical tools online, and consult an expert for clarification should you encounter some difficulties trying to grasp the calculations and interpretation of results.

3. Fashion designing.

Humans are always in need of food, clothes and shelter. These are three basic necessities of life. Both rich and poor are in need of clothes. In our contemporary world where fashion is always a trending issue, everybody wants to look classic and beautiful. This has made fashion designers kings and queens in their profession.

There are sites that can teach you how to draw fashion or make fashion sketches, and there are lots of online videos that can teach you make dresses. The beauty of having this skill lies in the way customers flock around fashion designers within few hours of setting up an office.

Fashion designing is synonymous to a football match; there is never a dull moment from the blast of the whistle. What do I mean? Even at the apprentice stage, customers are already flocking around you.

Related: 10 Best Skills to Learn Online Today

4. Make-up.

Believe it or not, the makeup business is growing at an incredible rate. There are lots of online videos that can teach you the rudiment of make up. An interview with Ifeoma Agu, the CEO of Ivonmelda Makeova, shocked me. She is an expert in hairstyle but felt she needed a makeup skill to enhance her business growth.

However, since she couldn’t afford the training fees, she decided to download lots of YouTube videos on makeup. The rest is history. She is one of the most sought-after makeup artists in her state as a result of her quality service delivery. Remember, she learned this skill for free. You can do same.

5. Business research.

Many people want to venture into business while those who are already in business are seeking other businesses to invest in. Many companies and investors are actually seeking well-researched business ideas to invest in.

As a business researcher, you can work on your own terms. You decide whether to sell your business ideas or become a partner in the businesses. At the end of the day, you will be surprised to see that you are a co-owner of chains of businesses.

Acquiring this skill is not as difficult as you think. I am saying this because most people are indifferent when it comes to research. All you need is to be patient, focus and determined. Read online articles and journals or watch videos on business research. It’s also a good idea to consult an expert.

6. Own a blog.

You can actually learn how to create and run a blog online. By systematically following the step-by-step instructions on creating a blog, you’ll be acquiring the skill to create more blogs for prospective clients. You can create a blog for your web design and development business, statistical data analysis, fashion designing, makeup and business research businesses.