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
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
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.
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.
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.
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
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
While designers and developers may often work from separate rooms or even countries, each needs the skills of the other to create a complete
These two little words are being used a lot in the design sphere these days. But what truly is interaction design? And what makes you an interaction designer? Here, we’ll answer both of those questions and offer a showcase of some great interaction design work.
Interaction Design 101
Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviors and actions. Successful interactive design uses technology and principles of good communication to create desired user experiences.
Interaction design in terms of websites and apps is something we have been talking about for 10 years or so, but those bigger conversations and much never. One of the best and most cited introductions to the concept was published by Bob Baxley in 2002 in a 12-part series that defined interaction design for web applications.
“Introducing Interaction Design” breaks the field into five pieces that are still useful and relevant today:
- Human/machine communication is the translation of conversations between the device and user.
- Action/reaction looks at how interactions happen and unfold.
- State ensures that users know what is happening and why in terms of the application.
- Workflow ensures that users
How will the web look in virtual reality?
The 2D web could become immersive, interactive and tangible. Imagine Wikipedia as an extensive multimedia library. Instead of reading about the Egyptian pyramids, you could wander around them, explore the inside of the pyramids, view the texture of blocks used to build it or solve a puzzle to gain access to the pharaoh’s tomb. You could even have a virtual guide accompanying you, narrating the history of the pyramids and answering questions. And all this while being accompanied by distinct ambient sound effects and sounds.
What about surfing Amazon, searching for the ultimate wedding dress? You could try them on, see yourself from a 3D perspective. You could create multiple avatars to compare several dresses to could choose the one that fits and have it delivered in one day. Visit a virtual car dealer, test-drive the car, select options, tweak the seat position, see if it suits you and … summon it (Hello Tesla!). Science fiction? Twenty years ago, shopping on the internet was science fiction. Twenty years ago, the idea that you could watch the Olympic Games on your VR headset was equivalent
It’s frustrating to find job offers looking for a UI/UX designer. While these two skillsets are closely related, their skills don’t always overlap. A quality UI designer may not understand user experience psychology. Just like a top-tier UX designer might not be a master of Photoshop or Sketch.
But there is a good amount of overlap, and to be a great UI/UX designer you’ll need to dip a toe into both worlds.
In this guide I want to comb over the fundamental skills that you should learn to promote yourself as a quality UI and/or UX designer. Job security is much easier when you can alternate between both roles. And it’ll be easier for you to see the big picture in any creative project.
If you want a quick overview of specific features I highly recommend browsing this UX checklist.
Remember that a UI/UX designer speaks for the user. But you are not the user. This is an important distinction because most people using your product will not have the same expertise.
This is why usability testing can be so important. Ask users directly what they like and don’t like.
Working as a creative artist in any field is tough. To succeed it’s imperative that you have a unique voice coupled with a portfolio demonstrating your skills.
These skills could range from websites, print design, icons, mobile apps, vectors, animation… the list is as bottomless as an all-you-can-eat buffet. And much like visiting a buffet, your clients want to work with someone who’s going to deliver above and beyond their expectations.
The best way to prove yourself to a suspecting client is through your portfolio. Back before the Internet was super radical and cool, most portfolios were shown as physical pieces of work.
Nowadays you can show off your work using a great website which can also include some personal information and contact details. Your online portfolio can be seen as an extension of your work that helps sell your talents to prospective buyers.
In this article I cover an assortment of modern trends in creative portfolio website layouts, specifically focussing on graphic designers and web designers. The beauty of an online portfolio is that you get a chance to showcase your creativity and your work, allowing people to view from any device with
We asked our staff one short and sweet question this past week: What are the best free portfolio sites on the web?
Keep in mind that many of our staff see 100 or so portfolios each and every week. So we’re here to share the fruits of their hours spent gazing into monitors at portfolio sites of all shapes and sizes. Of course, if you’re an Interactive Designer nothing beats having your OWN portfolio site with a brand and user experience created by you. But for many folks out there who don’t have the time or skills to start from scratch, there are several great options (and did we mention they’re free?).
But back to our question. We tallied up the responses provided by our excellent agents and present you with the best sites to showcase all your hard work without spending your hard earned money. You can thank us later.
1. Coroflot (36% of the votes)
No surprises here. Billed as “the largest, most established, most diverse pool of professional creative portfolios in the world,” no one doubts that this is one massive site. Launched in 1998,Coroflot hosts over 1.4 million creative images for over
The life of a designer is not always an easy one. There are projects that you do for clients and sometimes projects that you do just because you want to create something new. Getting those projects out there can be the toughest part of all.
But it is not impossible. It just takes a little planning and work. Here are 10 easy (and mostly free) ways you can promote a design project. (And all of the examples are from designer portfolios.)
Take Advantage of Social Media
Social media sharing is one of the easiest ways to showcase your work. The catch is that you might not know how many people have seen it.
Log on to multiple social media networks and share. (There is no shame in asking for retweets or shares either.)
But how do you know which networks to use? Start with the biggest networks – Facebook, Twitter and Google+. Then consider pinning to Pinterest or sharing on LinkedIn. Use networks that are visual so that you can show your work and not have to describe it in words.
Remember to share in different places at different times of day.
As a designer I think we’ve all experienced the difficulty of creating something personal, including a portfolio. You end up spending countless hours in Photoshop, trying a hundred different things and after two months you realize that your homepage still says “under construction.”
This might not be the case for everybody, but being my own client is quite challenge and that’s why I want to share how you can better set up a personal portfolio.
What’s the Purpose of Your Portfolio?
Before jumping in Photoshop and pumping out cool ideas, start with the core of your “business.” You are the client. Just as any other project you need to set goals first.
- Do you want to sell products?
- Simply showcase your products?
- Get to know you?
- Educate your audience?
These are just a couple of examples and you don’t necessarily have to pick one. A good idea might be to write down the goals you came up with and give them values. In my case that would be: Sell products (0/5), showcase products (2/5), get to know you (2/5), hire you (1/5).
This might seem strange, but the main purpose of my personal portfolio is
We often speak about decluttering in the sense of physical stuff like closets or storage. But, we can also speak about decluttering designs too. Decluttering can help improve usability and the user experience on websites.
Here are four tips for decluttering you designs.
1. Shorten the Copy
Dating back to 1997, Nielsen Norman Group conducted a study to learn how users read on the web. I’m sure you know that they don’t read. Instead, most people scan the pages. Yet, there are plenty of websites filled with unnecessary words. Unfortunately, copy that is messy or indirect is common. You can clean up the content of a website by removing the amount of words on the screen.
Remove unnecessary words. Shorten run-on-sentences and remove redundant sentences, too. Always have one idea per paragraph. It’s a good form of writing and it’s better for those readers who scan. Finally, and this is true especially of long-form content, use the inverted pyramid structure. Start with the conclusion and add more detail as the content gets longer.
This is one of my favorite apps, Days. It’s an app for counting down days until an event. The app’s
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
Ready to refresh your website? The start of the year is a great time to take a hard look at your existing design – or even new projects – and think about how to incorporate some of the latest trends into the framework.
From functionality to color and typography, 2017 will be a year of new ideas and new visual concepts to explore. Some of those designs are already starting to pop up, providing you with just enough visual inspiration to get off to the right start in the new year. Let’s take a look.
Web Design Trends 2017
Missing from the design landscape for a few years, gradients are making a major comeback. But the look of the color blurring technique has shifted.
In the last round of gradients, there were subtle variations throughout the design. Apple’s iOS icons were a prime example. Now, gradients are big, bold and use plenty of color.
The most popular usage is a two color gradient overlay on photos. (This technique can look absolutely amazing!) It’s a great option to switch up your look or to make a less-than-interesting photo
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.
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
Interfaces are all about communication and getting things done. A website’s UI is a means to an end, and the designer’s job is to create an interface that helps the user reach that end quickly.
Icons are perfect for interfaces because they convey meaning without words. Users can learn how an interface works just by studying the visuals and interacting with the elements.
In this post I’ll cover a few different ways to use icons to improve the quality of UX on a website. There are no perfect uses but there are commonalities between great icons and an improved user experience.
Icons naturally help users navigate through a website based on visuals alone. The best icons are the ones that most people recognize so you always want to stick with these first.
But you can design icons for links with label text for clearer usability.
Take a look at the portfolio site of Tim Roussilhe using a vertical navigation menu.
Tim includes icons above each link label to distinguish between purpose and behavior. It’s one of the clearest methods for icon use because it’s easy to see and easy
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
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
Documentaries have a profound effect in terms of their ability to both teach and inspire. As designers, we are one of the primary creative industries and always looking to find and use inspiration, whether it be from images, art, products, or even music.
Below I have compiled a list of six inspiring design documentaries that should help serve as excellent resources to help you learn something new, however advanced you are as a designer. They have all taught me something new about design and design thinking, as well as inspiring me with new styles and ways of working.
All of the following six design documentaries are available watch freely with only one requiring a Netflix trial or subscription.
#1 Design Is Future
This is an inspiring documentary that is exceptionally well put together. ‘Design Is Future’, which is held at Disseny Hub Barcelona during Barcelona Design Week, explores ideas for the future of design and talks about its rise to prominence over the last decade or two.
It explores some interesting thoughts about the role of design, design thinking, and poses questions to some of the most forward thinking design professionals around today.