This is default featured slide 1 title
This is default featured slide 2 title
This is default featured slide 3 title
This is default featured slide 4 title
This is default featured slide 5 title
 

Category Archives: web design

Web Design Trends For “Start Here” Pages

When visitors land on a new website they usually have no idea where to begin. They usually just look around for nav links that might provide the info they’re looking for. But the newest trend of the “start here” page offers a much better experience.

Brand new users on your site should be inspired to keep browsing deeper into your posts. The best way to achieve this is with a single unified intro page featuring links, a small guide to the site, and even some background about yourself & the site’s history.

In this post I’ll look into the trend of start here pages to see what they offer and how you can take advantage of them in your own projects.

Introduce Your Website

The biggest reason to use a “start here” page is to introduce new visitors to your website. Since each site offers something different the “start here” pages will have a different goal based on content.

Your page should share vital information and aim to educate visitors about the site. But it should also drive visitors further into the site by sharing the best resources and links to get started.

Personal blogs run by one person could have a “start here” page that introduces the person and their history with the website. This is the case with Darren Rowse on his site ProBlogger.

This is actually one of the more well-designed examples because Darren has years of experience with writing, design, and user conversions.

He offers a bunch of links to relevant posts right off the bat. He also has an embedded intro video for new visitors who want to learn more about the site. Down lower on the page you can read about Darren’s journey and how he built ProBlogger into the empire it is today.

By starting with a personal touch readers can be enticed to keep browsing further into the site. The page is full of CTAs for Darren’s newsletter and free e-book which may garner more clicks from people who now understand the mission behind ProBlogger.

For a much simpler example check out the Modest Man page. This features a large fullsize photo of the site’s owner Brock McGoff. But most of the page centers around the value add from Modest Man as a website, not around Brock’s personality.

You can introduce a site however you want in whatever manner feels right. If you prefer to stay behind the scenes that’s totally OK.

Just understand that the goal is to educate and encourage visitors to keep clicking deeper into the site. Your start here page should answer common questions for newer users and help guide them further.

Make A Personal Connection

I briefly touched upon this idea earlier but I do recommend using a start here page on personal sites. These seem to work better for high-traffic sites where new visitors might not know about your or what you do.

But the goal with a personal page is to introduce yourself, your history, what you do and why you do it. Some people feel comfortable sharing their hobbies or family life while others keep it strictly business. There is no wrong answer.

The goal is to establish a personal connection with your visitors, or at least a semi-personal connection since it’s happening through a computer screen.

One of my favorite marketers is Gary Vaynerchuk and he has an incredible start here page on his personal site.

Since he does a lot of speaking and social media outreach most people already know who he is.

But it’s not fair to assume that everyone knows. So his start here page targets people who just want to learn more about Gary’s lifestyle. He shares info about his past and his business-building lifestyle.

Even more importantly he links out to all his social channels and links to some of the best articles on his site.

This is a good example of a personal value add where people can learn more about Gary and maybe even become followers of his work online.

On the other hand you can do something like Michael Hyatt or Chris Ducker where they both offer specific tips and handy resources for new readers.

These pages introduce the person behind the site, but they put more focus on valuable information for the reader. If you’re running a personal site chances are that you offer something of value whether a product, service, or both.

Use your “start here” page to share your personal history but also to prove that you’re an authority in your industry.

List Important Articles

Sites with 100+ pages are much harder to search through even with category archives. Your best posts often get lost in the shuffle so you should do your best to include these links in your start here page.

New visitors won’t know where to start on your site or which posts are worth reading. Create lists of your best articles and encourage new visitors to check them out.

The start here page for A Life of Blue talks about travel and living with a nomadic lifestyle. These topics permeate most articles on the site, but some posts are more valuable to new visitors.

As you scroll down the page you’ll notice a sub-heading labeled “What should I read first?”

This is a beacon for new visitors who might be asking themselves this very question. It has a list of 10 popular posts related to travel and living free outside any specific lifestyle.

Other links point towards a free e-book and the site’s category archives. These are all valuable to new visitors but a list of recommended posts is the best place to start.

Another example I really like is the start here page for Hilah Cooking. While it does have a brief intro it also has many recommended links broken up into sections.

These aren’t just links cherry picked at random. They’re detailed recipe guides organized by preferences like basics, American classics, and vegetarian meals.

Internet users are incredibly impatient and they want to move fast. Providing a list of links is great, but organizing them based on context is even better.

I also like how this page is relatively short. It keeps attention where it belongs and gets visitors moving into the site. This should be the goal of every start here page, and recommended reading links offer a method of further engagement & pageviews.

Designer’s Guide to Promoting Yourself

You can be the most creative and productive designer in the world, but it doesn’t mean anything without paid work. Designers can rely on repeat clients but it’s important to keep meeting new potential clients and building future relationships.

In this post I’d like to share tips and strategies for getting your work out there into the eyes of clients and other designers. There is no one best method to use, and in fact you should employ multiple strategies to garner the largest reach possible.

But make a game plan and learn why self-promotion is so important. Through practice it’ll become a lot easier like second nature.

It All Starts With A Portfolio

This should be obvious but I’m surprised how many designers have a weak portfolio of work, or even worse nothing at all.

Everyone uses the Internet and there’s no reason to believe this is slowing down.

If you do any digital work then you should have an online portfolio. This includes all creative jobs whether you’re an icon designer, web designer, digital artist, motion graphics designer, or anything similar. And this doesn’t mean that you need a custom website domain (although it’s a big help).

But you can setup a simple free portfolio on a service like Tumblr, Dribbble, orBehance.

People often browse these websites specifically looking for talent to hire. Your work needs to be good to actually land jobs. But having anything online is better than nothing.

You can always delete old work and upload new work as your skills improve.

But just get yourself online and get your work up. This makes it so much easier to share your work whenever someone wants to see what you can do.

The worst situation is when you meet a new potential client that’s looking for a designer but you have nothing to show them. So if you don’t have anything up online that should be your first step.

The problem is that some designers have no work history, and therefore have nothing to put in a portfolios. In this case I recommend building practice projects and using them as work samples. These projects can demonstrate your skillset and also force you to keep practicing.

Build A Social Following

Have you heard of the Seinfeld spec script written by Billy Domineau? He wrote a magnificent spec of Seinfeld with a plot surrounding the 9/11 attacks. Within a couple weeks of posting it online the script was shared on Twitter by fans and professional writers. Billy quickly received major media coverage and offers from talent agents looking to represent his writing.

This all happened from creating one project that blew up on the Internet. Never underestimate the power of social influence. This can radically improve your career and it doesn’t mean you have to go viral to see success.

One mistake I often see is a complete lack of social media presence. Designers can be somewhat isolated people which can lead to ignoring social media altogether.

But if you create awesome stuff then people will want to follow your work. This could be on Twitter, Instagram, YouTube, Dribbble, or all four networks combined(among many others).

The simplest way to promote new work is to share it with an existing fanbase of friends, colleagues, or strangers who already know what you do.

With the Internet you can have followers around the world who have never met you before, but they can still appreciate your work and even reshare it to bring in more attention.

This is Billy Domineau’s story and it can be yours too.

I’m a big fan of Gary Vaynerchuk on this subject because he talks in plain English and lays out all of his social marketing knowledge bare for the world to consume. I would highly recommend browsing his YouTube channel if you have the time.

He talks about building your own personal brand online, providing genuine value, and being confident in what you create. This will take time but once you have an existing fanbase it gets much easier to keep growing.

Digital Outreach

When you think of social growth you often think of random people and vague social circles. But the concept of outreach goes in the opposite direction by focusing on direct contact with specific people.

This means reaching out and purposefully trying to build relationships with anyone on the web or in real life. The web is often easier because people can respond on their time. But this doesn’t make it any better to see results.

I love digital outreach when done properly. Don’t just send an e-mail to an editor of the NY Times asking to write for them with zero background or prior history. That seems desperate and spammy.

Instead think strategically and try to build real relationships. How could you get to know an editor at the NY Times? What value could you offer them? What sort of dialogue could you strike up that would make your conversation memorable?

These questions aren’t easy to answer and they’re much tougher with a big personality or social celebrity. It’s better to start small by contacting other designers in your niche, or bloggers that might cover your work.

Build a rapport and look at outreach as relationship building. You don’t want a one-off favor from someone only to then completely ignore them never expecting to speak again.

Outreach should help you build close-knit relationships with very specific peoplewho can help you, or whom you can help. Both strategies build your network and you never know who somebody else knows or could connect you with.

Also since most freelance jobs are about who you know this is a crucial strategy for self-promotion. If you know a lot of people and feed value into those relationships you increase your chances of serendipitous meetings.

Marketers have a different concept of outreach but it follows a similar formula(add value and build relationships). Check this post on BuzzSumo’s blog to learn a bit more.

Attend Conferences & Events

In-person networking is just as important as digital networking. But it’s also very different because when you talk in person you can read facial expressions and body language that you just can’t pick up from a tweet or an e-mail.

Almost every industry has its own series of conferences or local meetups/events. I would highly encourage every designer to attend at least one of these events to see what they’re like.

Don’t go with the expectation of selling yourself or landing new jobs. Yes you can find work, but it’s more valuable to make friends and build lasting relationships with other designers. You might end up making a designer friend that gets offered a job and they simply don’t have time for it, but they know you’re good so they recommend your name.

You’ll never be able to predict how relationship building can turn into work. It’s best not to worry about the work opportunities and instead focus on relationships.

Most larger conferences have guest speakers who impart their experience and advice working in the field. These talks can be enlivening and help you improve as a designer.

But the true magic of every conference is the networking. Just try to move past the idea of networking being dirty or sleazy like a used car salesman.

Look at everyone attending as someone like yourself. A designer who wants to get better and work on awesome projects. But these attendees are also humans with a family, hobbies, likes and dislikes.

Bring a humane approach to your networking and you’re guaranteed to see growth.

If you’re looking for a big list of design/creative conferences read this post on Quartz. It’s slightly outdated but most conferences listed in that post are annual so you can check the newest dates for this current year.

You can also search for conferences on Lanyrd to see upcoming dates, events, and venues to plan tickets in advance. Meetup is another site with smaller local meetups rather than big orchestrated events.

But all of these events have one thing in common: people. Learn to meet people and treat them like people and you’ll have a much better career as a working designer.

Wrapping Up

Promotion can be broken into what you’re promoting and how you’re promoting it. As a designer your work should always be A+ quality. But if nobody knows what you do or the type of work you can make then you’ll never get anywhere professionally.

I certainly hope this post can help you view self-promotion as a necessity to success. And if you approach it from a people-first perspective then you’ll have a lot more fun and success doing it.

5 Ways Creative Web Designers Work

An awesome website created by a talented and creative web designer is a thing to behold. Websites like these, set the bar so high that even approaching that level of craftsmanship seems out of reach. It sometimes seems that this task requires a level of creativity we have yet to achieve.

Like many other things in life, it’s doable. It may take years of training, and involve a fair share of sweat and tears but, — it is doable.

Yet, there are ways that you can reach that level of craftsmanship more quickly. And one of them is with the help of a state of the art creative design tool like this highly flexible WordPress theme.

Let’s see how creative web designers work their magic

What are some of the key characteristics top-tier creative designers have in common? Here are five of the more common ones:

1. They work with concepts – and not just with design techniques

Coming up with great conceptual designs takes research, experience, and digging into what other creatives achieved. Success comes when you are able to take a concept, and bend it into something that offers a realistic solution to a client’s brief.

This visual concept was created by a skilled web designer using Uncode WP theme as a starting point.

In the example above, that looks easy-going with a playful twist, the relationship between the headline and the visual provides a grand introduction.

2. Creatives keep their head in the clouds, but their feet firmly on the ground

Creativity involves thinking outside the box. The visions and ideas you come up with have produce practical outcomes. Creatives are able to tailor their ideas to the extent that the websites they build exhibit top performance.

Top creative designers never neglect the UX. Uncode, the creatives’ WordPress theme created by the Undsgn team is a valuable tool. Here’s an example. Uncode’s unique and original adaptive image feature automatically delivers a re-scaled version of your pages to different screen sizes.

Another example: Instead of the longer response time associated with serial requests, the creative Undsgn folks incorporated an innovative solution.

Am asynchronous response approach that enables the browser to download multiple images simultaneously. Creative designers are always looking for solutions, and the Uncode team brings a host of creative solutions to the table.

3. Creative designers mix techniques in with styles and trends, without sacrificing visual coherency

Learning what’s the latest and greatest is an essential part of being a good web designer. To be a creative designer, you have to learn and practice the art of blending and mixing different trends and styles.

The mix is subtle, but impressive. This showcase example provides insight into how a creative web designer achieved coherency. And spiced it up a bit in the process.

4. Creative web designers select tool that satisfy their need for perfection

A tool that is does not allow you to create pixel-perfect designs can be a source of frustration. Creative people, like you, strive to implement their ideas to perfection. If you can imagine it, your WP theme should enable you to build it.

Take a concept like this one. With the help of Uncode’s extraordinary flexibility, you can customize to your heart’s content. And you can create a beautiful, completely original layout.

5. Think out of the box, but into the brief at the same time

Sometimes, there is a tension between the client’s perspective and the creative designer’s vision. You want to transform a great visual idea into reality. A good creative is able to think outside the box. At the same time he or she can show a perfect respect for the requirements outlined in the brief.

Uncode’s concept was the starting point for this website. The visual experience arising from these concepts creates a visual world around the product. And ir provides the user with information relevant to the product.

Discover more about Uncode – the theme dedicated to creative web designers

The beauty of having a flexible theme to work with is you can create a universe of original amazing websites. All are coming from a similar starting point, but are different.

You can compare a flexible theme’s concept to a mind map’s central image. Using it as a source of inspiration, you can go out in many different directions to create award winning websites.

Uncode has some awesome starting concepts.

“There isn’t anything you can’t do with it.”

“The theme itself is extremely flexible – there isn’t anything you can’t do with it. Seems you are only limited by your imagination.” mecan, ThemeForest user

It takes a highly flexible, customizable theme to meet the creative, idea generating mind. This is how Uncode does it:

  • An Advanced Grid System. With design options that allow you to push your layouts to the cutting edge
  • Unsurpassed flexibility. 30+ homepage concepts to mix, match, or combine
  • Adaptive Images. It detects a visitor’s screen size, and delivers a re-scaled version of the page.

 “I purchased the Uncode theme a couple of weeks ago, and I’m amazed at how detail-oriented and responsive the guys who created this theme are. They clearly value customizability, flexibility and high quality design. Thumbs up!” Olivier Berton, ThemeForest user.

An improved Visual Composer. This popular page builder has been enhanced. It has extra, advanced, functionalities and a clean, organized skin.

Why Designers and Web Developers Must Work Together

It seems like a common sense idea: Designers and developers must work together.

But too often, these individuals work apart while working on the very same project. The designer works to create elements and color palettes and typography that looks great, while the developer codes and prepares the material for web publishing. And this can cause discord between the designer and web developer and in the final design itself.

If designers and developers work together on projects from start to finish, the result is a more cohesive web project with great aesthetics, user interface and clean code. There is less work and rework during the collaborative process, hopefully resulting in a project that can be completed in less time.

Designer vs. Developer

Traditionally web designers and we developers have been separate job titles.

Typically web designers use graphic design software such as Adobe Photoshop and Illustrator to create what websites and elements will look like. This aesthetic is then coded using HTML, Javascript, jQuery, CSS and other programming languages by a web developer to make everything work on the web.

While designers and developers may often work from separate rooms or even countries, each needs the skills of the other to create a complete website. So they have to work together.

Pros of Working Together

Simply, the biggest reason that designers and developers should work together is to create a more complete web project. From the look to interactions to experience, the project will only bet better when designers and developers collaborate. (And it’s almost impossible not to these days.)

And while we are talking about designers and developers working together, don’t forget to invite interaction designers to the party as well.

Collaboration plenty of other benefits:

  • A second set of eyes to look everything over and find flaws or mistakes
  • More creative brainstorming and design
  • A more complete experience, because designers can understand what the developer is capable of creating
  • A more cohesive finished product, where all the parts look like they belong and interactions fit the aesthetic
  • You’ll learn something about how design/development works
  • Merges ideas for a more rounded vision of what a project is supposed to be
  • Fosters focus on the mission and goals of the design project

Cons of Working Together

While I’d like to say there are not any cons to working together, that would be naïve.

There are not many downsides to collaboration. But there are two things to consider:

  1. There can be some costs associated with having everyone getting together at the same time, especially if workers aren’t typically in the same location. Use tools for teleconferencing and online sharing to communicate when you can’t get everyone in the same room at the same time.
  2. Sometimes people will disagree or just won’t get along. But we’re all grown-ups, right? We can work through it.

Things You Can Do

Now that you are thinking about all the reasons why you should work with a designer or developer, how can you put it into action? It starts with clear communication.

Web designers and web developers have to put the project first and think about the big picture during the process and as decisions are made. Understand that you will win some and lose some fights along the way.

The best place to start is by taking your co- designer or developer our to lunch, or coffee or for a walk. Get to know him or her and their style before you draw the first sketch or wireframe. Talk about how you plan to work together as a team and set some ground rules.

Everyone involved in the project should make a point to check in with everyone else often (maybe even schedule it in to the project calendar) to make sure that everyone is on task and on time. Remember to be nice; offer constructive criticism and be open to feedback from others. And be open to the fact that you are going to learn new things along the way, be appreciative of that.

5 Tips for Designers

  • Explain design theory in a simple manner to help developers understand where the aesthetic is coming from.
  • Consider interactive elements as you design, and how they will work. Make sure all parts are designed for al stages of interactivity.
  • Design completely. Don’t expect a developer to copy and edit like parts. Create element for every state and have it ready.
  • Ask for help along the way. If you are not sure if a specific font will work on a website, ask.
  • Provide design elements in usable file formats and at the appropriate resolution and size for web use.

5 Tips for Developers

  • Learn about design. Knowing a little theory in terms of color and type and even the lingo can go a long way.
  • Be upfront about what you can and can’t do. If a designer is going down a road that is not going to translate on the web, say something sooner rather than later.
  • Be available to answer questions and help during the design process.
  • Get involved in the process from the start. Help brainstorm design ideas that will work with the UX.
  • Maintain the integrity of the design – even parts you don’t like or agree with – in the development process. You will only make enemies by changing things visually without a “development” purpose.

One of the greatest bits of advice for designers and developers is not all that new, but is still relevant. The “Manifesto for Agile Software Development” highlights four principles that all web designers, web developers and interaction designers should live by.

  1. Individuals and interactions over processes and tools
  2. Working software over comprehensive documentation
  3. Customer collaboration over contract negotiation
  4. Responding to change over following a plan

Skills Everyone Can Benefit From

Skills

To help bridge the gap between designers and developers and to better work in concert, both types of web professionals need to speak the language of the other. Designers and developers should start to expand their skillsets.

Every designer and developer should have a basic understanding and knowledge of:

  • Design principles, such as color, space and typography
  • Optimal image formats and sizing
  • Basic understanding of HTML and CSS
  • Use of web fonts
  • Trends in design and development
  • Understanding of user wants and needs
  • Grids, framework and wireframing

Design Trends For Modal Windows

Modal windows are those popup windows that appear over the screen rather than opening a new tab/window. They usually darken the background to bring attention to the popup.

Most websites running modal windows add some type of call to action whether it’s a button or a form or something. But it can also be a simple message about browser features like disabled JavaScript or an adblock extension.

Everything in the window takes precedence over the page so these modals are meant to draw attention. They can be annoying and outright infuriating but numbers don’t lie:they work.

Let’s delve a bit into current trends of modal windows to see how they work and why you’d use them.

Dark Backgrounds & Clickable Areas

Modal windows follow a similar design strategy and they’re not very complicated.

They mostly all use a darkened background on the page to bring attention to the modal content. This shouldn’t be a pitch black background because that can feel intimidating.

Instead the user should see a touch of the page behind the background, but it should have a reduced opacity. This could be 90% or 50% depending on how much you want to hide the page.

Also the user should be able to click on the background to hide the modal.

This isn’t universal but I hate when designers remove or ignore this feature. Yes there’s usually an X button or close button, however it takes more effort to move the mouse onto that button.

It should be possible to just click the background and hide the message right away.

Some modals use fancy animations to appear on the screen. This is usually preferred because it reduces the harshness of a random popup.

Having the modal window slide, fade, or bounce into view makes it a touch easier on the eyes. But don’t drag out the animation either!

Most users will ignore the modal so they don’t want to watch a full 3 second animation. Get to the modal quickly and let the user either read or close the window.

Designs vary from site to site but most of them use a white modal background with dark text. It’s the simplest way to design a high-contrast message that can blend with any website.

Overall these are some basic trends so they’re not absolute. But keep your eyes open as you browse the Internet because you may be surprised how many different styles are out there.

Display Techniques

There are some popular trends used by marketers who want to display modal windows for certain visitors.

The vast majority of modal popups happen a few seconds after the pageload. Most visitors haven’t even had time to read through the site to understand what it’s about. This seems like the worst way to do modals unless they’re informational for things like cookies or adblock settings.

Other display styles typically work better since they’re geared towards user behaviors. Here are the three most common techniques:

  • Exit modals appear when the user’s mouse leaves the page
  • Timed modals run after X seconds/minutes
  • Location modals appear when the user scrolls down a certain amount

Each scenario is different and should be used based on the audience.

If you run a blog with lengthy content like Smashing Magazine then you might do a scroll-based popup. Other blogs like WPBeginner actually did the exit modal strategyand saw a huge increase in daily email signups.

There’s no denying that this stuff works. It’s just a matter of how you’re willing to run modals and what the end goal is.

Popover Marketing Messages

Modals are primarily used for marketing so the copy should prey on ideas and emotions. Recently modal windows have taken a turn towards the guilt trip approachfor their buttons.

Instead of just having buttons that say “yes” and “no” they instead go so far as you make you feel bad or guilty for closing the window.

It seems like this would just make people angry but it really does increase conversions. Check out this Conversion XL post to see a few examples.

Beyond the typical yes/no signup modal you can also find guilt trips in the marketing for adblock messages. These appear on some larger sites that now want to ban adblock users.

Business Insider is one example that displays a popup modal for every adblock user. It does not let you close the modal without disabling adblock or paying for a subscription to the site.The goal of any modal window should be persuasion to take action. This could relate to a sign up form or it could be about disabling adblock, or basically anything else you want the user to do.

The best success comes from excellent copy and a short but sweet message.

Pure CSS vs. JS

It’s never a great idea to completely reinvent the wheel so modal window plugins are basically the norm. But which one you pick can be a very complex process.

JavaScript plugins offer the most style and control. I prefer these because almost every user will have JavaScript enabled, so they’re a pretty safe bet. However pure CSS can be more compatible so there are two sides.

Here are my preferred JS modal window plugins(all free).

leanModal

leanModal is a simple jQuery plugin and super easy to customize. It has a pretty small library so it’s perfect for almost everything. However it doesn’t support embedded content or slideshows so it’s not great for dynamic content.Still if you just need an e-mail signup or an adblock message then this plugin can do no wrong.

Remodal

The Remodal plugin goes a step further including custom CSS3 animations. The design style is incredibly simple and pretty easy to customize too. It’s actually one of the easiest plugins to get working right out of the box.

And it runs on jQuery/Zepto so you have your choice of dependencies.

SimpleModal

If you’re looking for unique and well-designed check out SimpleModal. This is yet another free plugin but it has a candy coating with some brilliant theming.

I don’t like how the background doesn’t darken as much but you can tweak the code to customize that. What I do like is the variety of content you can run. SimpleModal can work with embedded content, iframes, Ajax requests and pretty much anything you need.

All of these are fantastic choices and many have vanilla JS + jQuery options.

If you prefer the CSS route here are some nice alternatives.

  • CSS Modal
  • Basic Modal
  • Modal Pure CSS

My favorite from this list is this CSS Modal created by Hans Christian Reinl. It’s hosted on GitHub for free and it has all the typical modal window features.

It darkens the background, lets you style the window and close button, plus it’ll close if the user clicks/taps anywhere outside the window box.

That’s the most important feature for me because I hate when modal windows force you to click the X to close. Most users expect modals to close if they just click elsewhere on the screen. This is almost impossible with pure CSS and that’s why CSS Modal is a great pure CSS solution.

5 Tips on Hiring the Best Web Designer

Hiring a web design can be an exciting process. When I talk about hiring a web design in this post, the advice can be applied in a variety of ways. First, it could mean hiring a single, usually freelance, designer for a job you need to be done. It could also refer to a web design agency.

Additionally, it could be advice for hiring a web designer for your own team. The advice is valuable for web designers who are looking to improve their portfolio. Now, let’s discuss five different but important things when trying to hire a web designer.

The work shows off responsive design

It’s still surprising how many times responsive designs don’t make it into a web designer portfolio. It’s hard to say if a designer is capable of delivering responsive design if it’s not there. It could be omitted by mistake or because they have never done it. You can’t tell if it’s not there. Now, this guide refers to a web designer.

The web is a flexible medium that works on the tiniest devices and their tiny screens to larger devices and their larger screens. It’s important for any website to have a good responsive design. At this point in time, there is no excuse in not at least including a screenshot of the responsive design as part of a project’s case study.

Jenny Johannesson shows off the responsive design in her portfolio. Her case study on Internet.org starts off with working on the project with a mobile first approach. That’s huge! It’s actually quite impressive too. In her case study, mobile devices aren’t even an afterthought. They are a central part of her project and how she approached it.

Additional, the portfolio of Toy Fight includes a case study for Outpost. As part of the case study, the agency includes a section for mobile design. They explain that the approach towards mobile design was well fitting for mobile just as it was for the desktop design of Outpost’s website.

The work includes research

Every web design project should start with some sort of research. Research allows you to start the project in the right direction, on the right foot. There are so many different ways to go about research. There is no single method of getting insight.

Research can include things such as user interviews, AB testing, analytics and metrics, heat maps, heuristic evaluations, personas and scenarios, surveys, or usability studies, among many other.

Netta Marshall includes a quick blurb on how research impacts a project she worked on for Tally. She explains how the research was conducted – through Craigslist volunteers – and how many iterations her testing produced – 2 full redesigns. Although she doesn’t go into too much detail here, it’s clear that Netta doesn’t design something willy nilly. There is a process that she follows and it impacts the product she is trying to build.

The work shows off good communication skills of the web designer

More or less, design is about communication. A lot of what designers do is communicating with their clients or bosses and then again with the target audience of the website. It’s important to show good communication skills within a web designer’s portfolio.

A web designer’s job is never only just the final UI design. That’s the just the pretty end-product. A great web designer will walk their audience through their case studies. They will communicate their projects, their part in it and their process, among a whole lot of different information.

I truly admire the portfolio of Hyun Seo. At first glance, there is a whole lot of text and not a lot of UI screenshots. That’s a good thing. Hyun’s case study on IBM’s Cloud Security Enforcer start of with a lot of text. It’s him explaining the project to a potential client or company. The case study is about ¾ text and ¼ screenshots. The screenshots are all the way at the end, by the way. The case study communicates well his role in the project, the problem and how he tackled it.

Is the web designer and artist or a problem solver?

Yes, websites created with a talented web design will be beautiful. But that’s not why people or business need them. Websites are a way to solve business problems such as increasing sales, clicks, or sign ups. Different projects will have different problems and different measurements of success.

Actually, a web designer who is a good communication will make this distinction easy for you to see. They will clearly communicate their problem-solving skills.

The case study on the redesign of the Met from Fantasy explains a few different problems their redesign tackled. The design focused on helping users find exhibitions, plan a visit and even support the Met through donations. Unfortunately, their case study does not go into too many details of each problem. But, it is still a clear indication that the agency takes business objectives seriously.

Another example of a good and quick case study for Revue by Awkward. The case study is quick and the point. The case study explains the thinking process of how Awkward arrived at a solution. Like I said, the case study is quick and to the point but it clearly shows Awkward’s problem-solving skills.

Showing off the design process

I found that the best portfolios have case studies that show off the design process for each individual project. Most often it highlights that made the project awesome, interesting, or even difficult. It’s so much better than a separate process explanation because it’s relatable when it’s tied to a specific project. As a potential client or boss, you’ll get a clear idea of how the designer or agency works and thinks.

Additionally, showing off the process will let everything else in this post fit right in. Sharing the process will also share a web designer’s communication skills. It will clearly indicate the designer is a problem solver because they are showing you how they solved the problems at hand. Having a few different projects will allow you to share different skills.

Some case studies can have a quick snippet about the done research, or about how responsive design was important to that project.

Tips To Create a Web Design Style Guide

Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimized to meet business objectives and create enjoyable experiences for users.

One of the ways to ensure that team is on the same page when designing separate parts of the website or saving designs from developers is to create design documentation or a web design style guide.

It is beneficial to have a style guide in order to create a cohesive experience among different pages. Also it helps to ensure that future development or third-party production will follow brand guidelines and will be perceived as part of the overall brand.

Luke Clum has touched the surface of using style guides as your first step in web design last year and I would like to take a more in-depth look on how to create a usable web design style guide for your projects.

What is a Style Guide?

A style guide is a collection of pre-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a cohesive experience at the end.

Why Is It Important?

It is extremely important when multiple designers are working on a big website or web app to ensure that they don’t interpret too much and don’t alter or adjust styles based on personal preference. In development, having defined elements of the website makes it easy for developers to reuse these elements. Moreover, it can make it easier because they will get what elements they have to code and will see exactly how they need to look from the start.

In order to make developers lives easier, it is the designer’s duty to include all possible interactions such as hover, click, visit and other states for buttons, titles, links, etc.

Creating a Web Design Style Guide

1. Study the Brand

First, you need to study the brand so that you understand what it stands for. Get to know the story behind the brand, observe the team and figure out the vision, mission and values of the company. It is important to dig deeper into the brand so the style guide you produce will visually and emotionally represent the organization.

If you’re a designer who can’t code, simply open Photoshop and give your document a title and a short description of what the document is and what it is for.

If you can code, it is better to create an html document with pre-coded assets so they can be easily reused.

2. Define Typography

According to Oliver Reichenstein, typography is 95 percent of web design.

You must get typography right because it is one of the most important communication tools between visitors and your website.

Set hierarchy and identify it. There are headline types: h1,h2, h3, h4, h5 and h6. Then body copy, bold and italic variations. Think about custom copy that will be used for smaller links, intro text and so on. Provide font family, weight and color.

3. Color Palette

It is incredible how humans perceive color and associate hues with known brands. Think of Coca-Cola, I bet you see that red now.

Begin by setting primary colors for your style guide that will dominate your website, dominant colors should include no more than three shades. In some cases, however, you will need secondary and even tertiary colors to illustrate your user interface, make sure you define them too. Also include neutral colors like white, grey and black for the primary brand colors to stand out.

4. Voice

The voice that I am referring to is actual copy. You have studied the brand before starting the style guide and found out that brand is youthful and trendy. If there are no directions for voice of the copy, you have to define it. It can be a simple example given showing that voice has to be professional yet funny and welcoming. Instead of stating“You’ve got 404 error” you can say “Oh boy, you’ve broken the interwebs. 404 error.” If the voice were more corporate, you wouldn’t do that. Brilliance hides in small things.

5. Iconography

Icons have existed for thousands of years and are older than text and words. Take advantage of using icons in your projects because they will give an instant idea to visitors as to what’s going on and what will happen next. Picking the right icons will give more context to content than color palette, copy or graphics. When using icons, make sure to think about the target audience, religion, history, so you avoid misconceptions and misunderstandings. One more thing to mention, think about the brand and its values so you don’t use hand-drawn icons on a large banking website.

6. Imagery

Pictures speak thousands of words. Make sure to include imagery that defines the style and direction of pictures the website should use. Once again, think about the values of the brand and its mission. For example, a water charity uses striking imagery that has strong emotion, good cause and calls to human emotion for them to be fortunate to have essential living commodities like water, food, electricity and education.

7. Forms

Forms are what make your website or web app interactive and dynamic so the user can enter the data and you can then manipulate it and do the work.

Make sure to establish a hierarchy and include possible feedback from forms — active, hover, add error, warning and success messages including things such as a password being too weak, email being not valid or simple success messages e.g. “email was sent.”

Personal Branding Guide for Designers

 Personal branding is the practice of people marketing themselves and their careers as brands. Being good at your craft is not enough these days, being unique and authentic will make the cut, but only if enough people know about you. As Michael Simmons writes, authenticity is key in the digital age. Having a strong personal brand and following can lead to enormous opportunities and recognition.

Personal branding is becoming one of the most important key factors in any industry. Skills and boring resumes are not guaranteeing you anything anymore. You have to really start developing your own brand and building a tribe, or in other words an audience that will help you getting jobs, supporting you, sharing your work and getting recognition.

In today’s article I’d like to share some personal branding guidelines I’ve been experimenting with in the last couple of years. The techniques and methods used led me to speaking engagements, interviews on Forbes and Fast Company, business growth and business leads, not to mention the connections and friendships I’ve made.

Why should you care about building a personal brand?

There are numerous of reasons why you should consider strengthening your personal brand. The thing is your personal brand exists anyway, it’s how people perceive you, your work and your actions. To make sure that your brand goes together along with your values and how you wish to be perceived is to manage it. Moreover, building a recognizable personal brand will help you with the following:

  • Professional opportunities;
  • A better job;
  • Better contacts and clients for your company;
  • Industry recognition.

Vision

Develop a strong vision and make sure that you use it everywhere you go. Whether it’s to go to the moon or sail around the world, make sure it’s something big and bold, people remember these things. If you haven’t watched Simon Sinek TED talk “How great leaders inspire action” presenting “the golden circle” and “start with why” theory, make sure to check it out and come up with your own vision.

Who are you targeting?

Who is your message receiver, who are you talking to with your brand? The common mistake is everyone, we want to appeal to as many people as possible. The harsh truth is that if you try to please everyone, you’ll please no one. There is always someone who loves you for one thing and hates you for the other. Every person has an opinion, so you shouldn’t be concerned about appealing to everyone. Better think about your vision and long-term goals.

Use high quality images

No matter how great your website looks like and how many great stories you have to tell, people are visual creatures after all. Humans form opinions based on the first impression and images send more than needed information to make a strong impression and form an opinion about the brand.

According to 3M Corporation people are extremely drawn by visuals compared to written information.

“90% of information transmitted to the brain is visual, and visuals are processed 60,000X faster in the brain than text.”

German designer Tobias van Schneider is a great example of high-quality imagery usage in personal branding communication that noticeably stands out.

Some more great examples:

Kerem Suer

Karim Rashid

Jeff Broderick

Jim Ramsden

Viens-la

Be consistent creating

According to Austin Kleon, an author of the New York Times bestseller “Show Your Work!” you have to consistently post bits and pieces of your work, your ideas, and what you’re learning online. Instead of wasting your time “networking”, take advantage of the network.

Think about all the great work you do but no one knows about it. Make sure to take an advantage of today’s internet ecosystem, post your drafts, ideas, updates, work in progress and complete work to get early feedback, recognition and potential leads.

There are some brilliant communities just for designers, Dribbble, Behance, DeviantArtjust to name a few. Other medium can be your personal blog and portfolio.

Master storytelling

Storytelling is an enormously powerful skill that can set you apart from other faceless designers in the industry and help you shape your brand that people are interested in and eventually think of when in need of a designer.

Instead of showing just your work, add some of your daily life to it, share work in progress, share your daily routine, share how do you find inspiration and the list goes on. A great example is Tomas Jasovsky, a Slovak designer who tried to get into a big company like Facebook, Spotify and after not getting in decided to pack his belongings and travel around the world with his girlfriend. He’s calling himself a nomadic designer and everything he shares is mixed with traveling, design, food and adventures. Who’s not interested in such a lifestyle?

Make connections

It’s incredibly important to start building your professional network and get industry leaders into your circle as you will be perceived as one of the leaders as well.

“Your network is your net worth.” – Tim Sanders, author, public speaker, and former Yahoo! director

There are many ways to start connecting with people and you should not necessary focus just on designers, any connection is good and may lead to a “top dog” designer that you may not be able to reach from another designer.

How do you get people interested in you? You don’t, you start by listening to them and trying to provide them value in any way you can, only then people will start connecting with you in a genuine way and forming long-lasting relationships. If you want to learn more about networking principles for designers check out my article I wrote last year:key networking principles for design entrepreneurs.

Below are some handy websites and social networks for meeting new people.

  • Startuptravels – connect with the world’s startup scene. Meet entrepreneurs and startup enthusiasts in over 160 countries.
  • Meetup – one of the biggest platforms in the world for meeting people on pretty much any subject you can imagine.
  • Dribbble Meetups – Dribbble Meetups are a chance for designers to socialize, talk shop, and foster their local design communities.

Get some press

There is nothing more powerful than a well respected publication coverage of you, your story or your work. It adds a lot of credibility and trust to your brand and sets you apart from all the competition in your industry.

It’s not that easy to get press coverage though, you either use your personal unique story or build something remarkable and controversial, like an innovative redesign of an existing product or a new concept for something that would be cool if existed.

A great example is already mentioned Tomas Jasovsky, a Slovak designer who came up with a design concept for Instagram for Business and got coverage by tech publications, one of them being The Next Web.

Tips For Make Dropdown Menus

 In this guide I’ll cover a handful of design techniques for building usable dropdown navigation menus. This includes multi-level dropdowns and mega menus which all rely on the same core design principles.

Markers For Sub-Menus

It’s a good idea to include markers for links that have sub-menus attached. These small visual indicators let users know where links are placed and how to access them.

And these rules apply to all menus whether you’re designing with 1 tier or 4 tiers of links.

Markers can range from arrows to dots or squares or anything noticeable. Most users are smart enough to pick up what the symbol means, so long as it’s universal.

The Threadbird navigation is a fantastic example of this effect in action.

Some of their links have sub-menus while others don’t. In fact some of their links have sub-sub-menus which you can only discern by their unique marker next to each link.

Threadbird uses the right-pointing double angle quotation mark, simplified to raquo. Web designers prefer this symbol over a single arrow because it’s bulkier and easier to notice at a distance. Plus it holds its shape well even at smaller sizes.

You can find a similar design on the TutsPlus navigation. They use downward-pointing arrows for dropdowns and right-pointing arrows(closing point brackets) for the flyout menus.

One thing I don’t like in this design is the sub-menu arrow style. The arrow icons only appear while hovering a menu item, even though all the other links have submenus too. Good design practices would encourage keeping these arrows visible at all times.

But I do like the simplicity of the TutsPlus design. It’s a perfect example of how tiny little markers can go a long way towards better usability.

Space With Link Padding

It drives me crazy when I see designers misusing space in their navigation.

The majority of dropdown menus have a bit of space between links. But there’s a huge difference between margins and padding.

With margins you need to click/tap on the actual link text. The clickable area is only as large as the text itself. But with padding you can make the entire area clickablemeaning the user has a much larger target. In the context of menu links I’d argue larger is always better.

Webdesigner Depot has a cool animated dropdown menu courtesy of their recent redesign. When you hover the “blog” link you’ll get a two-column dropdown menu. If you hover any of these links you’ll notice they use padding to create space.

This means you can click in the white space around the link text which makes navigating the site a lot easier.

Most dropdown menus fall into one of two types: padding for spacing or margins for spacing.

You can tell by hovering the space around the link to see if your cursor turns into a clickable glove. Here’s an example of a site that doesn’t use padding.

The Philadelphia Orchestra has a fantastic website. Clean, usable, and easy to read.

But when you hover any of the dropdown links you’ll notice only the text is clickable. Worst of all their dropdown menus are pretty wide, but the link text is fairly short.

I can’t imagine a scenario where margins would be better than padding. By making the links block-level elements they can span 100% of the dropdown menu. This means the user could click anywhere in that link’s box and still visit the page.

To me the choice is obvious. If you can increase the click/tap area of links in your dropdown menus then you’ll greatly improve the navigation experience.

Clear Hover States

Designing an “active” class for hovered menus keeps attention where it belongs. Most designers use the CSS :hover pseudo-class which works great for actively-hovered links.

But it’s also a good idea to keep the main link highlighted when the user is hovering submenu links. This denotes a clear path of activity where anyone can glance at the menu and quickly determine which primary link is active & which sub-menu link is hovered.

You can design hover states with many techniques like font color changes, BG color changes, text underlines, highlights, box shadows, whatever. The goal is to keep the parent link activated even when it’s not being directly hovered.

DePauw University uses very simple contrasting colors between white and black. The default navigation uses white text on a dark background. When hovering a link you’ll notice that these colors reverse.

But when you hover a primary link with a sub-menu you’ll also notice it stays lit up the whole time. You can hover any internal link and still get that main highlight effect.

Each design can have its own styles so you don’t need to go black & white like DePauw. But the active styles should be noticeably different than the default links.

On Comedy Central’s website you’ll find the same effect. But instead of a white highlight color they use a lime green/yellow.

You can build a working dropdown menu without this active highlight effect. But UX designers know that just because something works doesn’t mean it’s working optimally.

I think all dropdown menus should keep an active highlight over the parent link. This also includes sub-sub-menus that go 2-3 layers deep.

Quick Dropdown Animations

CSS3 mixed with jQuery can make some powerful animations for the web. Dropdown menus thrive on animation whether they’re sliding or fading into view.

But animation should always serve a purpose. UI/UX designers need to use animationpractically. It should bring the interface to life but shouldn’t slow down the user experience in the process.

The best dropdown animations can be summarized with two words: quick yet noticeable.

Take a peek at the ESPN top navigation. You can hover any sports division to get a dropdown menu of teams and related links.

This dropdown clearly slides into view from top to bottom. However it does this quickly so you’re not stuck waiting 2-3 seconds before you can interact with the links.

Generally I recommend keeping menu animations at 1.5 seconds or less. This rule of thumb only applies to menu animations because they’re interactive elements. But you can easily extend animations for other page items up to 3-5 seconds(or more) if it makes sense.

Ironically the CSS MenuMaker website has a stunning top menu design. The dropdowns have callout arrows like speech bubbles to denote which primary link it belongs to.

But in the context of animation these dropdowns are swift. I’d estimate their animations run for 300 milliseconds quickly fading in & out of view.

But they only animate when focus moves elsewhere, so once they’re visible the links do feel solid.

That’s the key to a great dropdown menu animation. It should have that magical sense we all love in animation, but the animated element should also feel like a solid part of the page.

Closing

A quality dropdown menu considers both form and function. Yes it should look nice, but it should also function well and create a fantastic experience for the visitor.

These tips are some that I live by in my design work. They’re all pretty simple to add into your dropdown menus with very little code. And if you’re looking for more examples of great nav menus take a peek through our inspiration section.

6 Missing Features in Your Web Design

 At the end of the day your audience will be attracted to modern design, elements they sub-consciously accept as the norm, because they’ve had that user-experience on other websites. Think of modern design as a combination of art, design, and functionality. When these elements ‘work’ in harmony your page will be undeniable and ultimately guide the visitor to where you want them to be.

So, ‘What’s Missing’?

1. Web Design That’s not Unique to Your Industry & Brand

Your web design is the first impression a visitor will have about the business. This page should not only be reflective of your industry, products or services, but it should stand out from competition and reflect your company culture. The Following should be considered:

  • Design should attract and imprint in the memory of your visitors to create “awareness”
  • Content should create a narrative to ‘tell your story’ through the website.

Make sure that your web design is unique and recognizable. Distinct visual approach & style, typography and interactive design elements play a big role in this department. All this creates the first impression in your visitor’s head and is crucial for the next interaction with your website.

Your content should engage. It shouldn’t be boring. A great way to incorporate additional interaction, to make your visitors stay connected is through the use of bold hero sections with enriched sliders, video content and content animations.

  • Hover Animations will make the website more intuitive and will give additional information regarding a feature function. Hovering over a feature or image will allow for instant visual feedback.
  • Large Scale Animations include effects like parallax scrolling and pop-up notifications.
  • Loading animations are used to keep a user engaged and are popular for one-page sites, flat design and minimalism.
  • Background animations and videos should be used in moderation but can add to the storytelling element of the page. It should be seen as an add-on and not a distraction.

A great example of this aspects is the creative WordPress theme TheGem recently released on Themeforest marketplace. This theme understands the need for individuality, creativity, awareness and interaction, offering many industry specific unique design concepts . When going through the demo pages of this theme you will see how different industry stories can be told in an attractive visual way, involving the user in interaction and remaining in his/her memory.

2. No Trending UX and UI Features

Even though your page visitor might not be able to pinpoint the exact reason why don’t find your website appealing, their subconscious will pick up that your page is sub-standard. Trending features within design can take a variety of forms, but for the last few years, these features are taking the front seat for UX and UI.

  • Scroll Jacking is where the user’s scrolling is directed to an exact vertical point on the screen, such as the top of the next content container. It’s replaced native scrolling and is more targeted. Here are some examples for that:
    1. Design for Your Satisfaction
    2. Lookbook
    3. Brilliance of Perfection
  • Material Design and Flat 2.0: As Google launched their new style language, Material Design, the designers got an opportunity to evolve minimalistic flat design principles in something more attractive, combining it with some old yet pretty features of skeuomorphic design (for instance through layering). This is aimed at making designs appear more realistic and appealing to the visitor. You can check some examples of creative flat 2.0 realisation on this pages.
  • Font Icons & Scalable Vector Graphics (SVG): This feature is popular for the basic reason that it scales graphic designs without compromising the quality which is very important for responsive & retina design.
  • Minimalism and Ghost Buttons: It’s all about keeping your visitors focused on what they need to do, read and see instead of distraction them with too many images, text, videos and pop-ups. The same goes for the trending ‘hamburger menu’ to simplify the browsing process for the user.

Making use of trending design features shows that you are focused on a user-friendly page. You want to make your page visitor’s experience as valuable as possible, which will hopefully lead to conversions and lead generation. Your design team or theme creators should have a deep understanding of current UX trends to make sure that the web page and design has a long shelf life.

3. No Call to Action

One of the most biggest signs of bad UX is the lack of intuitive design. As a developer, your aim is to anticipate the behaviour of the page visitor, and more so, guide the behaviour to be favourable to the brand. Call to Action buttons are there to motivate visitors into action. These could be in the form of newsletter signups, registration, ‘buy now’, ‘learn more’ or ‘contact us’. Call to Action Buttons not only drives traffic to certain pages, but it influences engagement and improves conversion rates.

If your web page design doesn’t feature a clear call to action sections button, you are preventing your visitors from taking action and ultimately lose leads.

4. No Search Functionality

In this digital age, web users want their needs met immediately. A split second can change their minds, and not being able to navigate or search for what they want on your page, will drive them to the competitors. A Search bar is of utmost importance whether it’s to search for blog content for a certain keyword, or a product or service on the page. Again, it’s about making the interaction and engagement with your page as easy and seamless as possible.

5. Low Performing, Slow Website

Many modern websites look really good, however being slow, results in high bounce rates, low page speed, yslow scores and low search engine rankings. This is because there are too many scripts and requests, no optimized images and no caching. Other websites (like for example TheGem WordPress theme) , is visually appealing and interactive, and pays a lot of attention to optimisation by only implementing what’s needed. As a result, the web performance is increased, and so is the Google Ranking.

The key to improving the web page’s speed is by:

  • using the right size of images and design
  • reducing the number of scripts
  • using of HTML/CSS minifiers
  • enabling website caching

6. Your Web Page Is Not Working Well on Mobile

48% users say that if they arrive on a business site that isn’t working well on mobile, they take it as an indication of the business simply not caring. (Source: MarginMedia.com) Not having a responsive website is almost as good as not having a website at all. Businesses need to have responsive web design in order to give them online credibility. As Noetiforce explains; ‘Responsive Web Design is the DNA of modern web applications’.

If you are starting to design your website, start with the mobile version first, before you expand your creative power on the desktop version. You shouldn’t worry about possible design limitations of such approach – just take a look at amazing designedcreative WordPress Themes on Themeforest; many of them, like TheGem, were created with the mobile-first approach in mind.

Through studying the trends of modern web design, we can deduct what works well online, and what doesn’t. This article is aimed at taking a look at where your website might be lacking. Although we shouldn’t judge a book by it’s cover; we do it anyway. With the focus on great UX and UI, you can ensure that the users will be buying in on your product and services because of high quality design, trending features, a great user interface, brilliant functionality and a page that performs at the speed of light.