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

5 Ways Creative Web Designers

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 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.

The Unique Content Block allows you to create external sections of content. You can integrate and replicate them into your pages.

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

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

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

What is an Interaction Designer?

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 know who to use a tool or application and what happens next.
  • Malfunction takes into account mistakes that are bound to happen.

Further, there are certain considerations to keep in mind when creating design interactions. Usability.gov offers basic questions in six different categories that can help shape how the design comes together.

  • What can a user do with their mouse, finger or stylus to directly interact with the interface?
  • What commands can a user give to interact with the interface?
  • What about the appearance gives the user a clue about how it functions?
  • What information do you provide to let a user know what will happen before they perform an action?
  • Are there constraints to help prevent errors?
  • Do error messages provide a way for the user to correct the problem?
  • What feedback does a user get when an action is performed?
  • What is the response time between an action and response?
  • Are the interface elements a reasonable size to interact with?
  • Are edges and corners strategically being used to locate interactive elements?
  • Are you following standards?
  • Is information chunked into a few items at a time?
  • Is the user end as simple as possible?
  • Are familiar formats used?

Role of an Interaction Designer

If you find yourself thinking about or asking the questions in the list above, you are an interaction designer.

An interaction designer is the person on the design, development, creative or marketing team that helps form and create a design strategy, identify key interactions of the product, create prototypes to test concepts and stay current on technology and trends that will impact users.

This may sounds like a lot of different concepts compiled into one fuzzy job description. To make is it simple: Companies hire an interaction designer to make sure their digital applications work and function in the hands of users.

The career paths of interaction designers are varied. Some formal design programs are teaching it. Others come into it from experience or by chance. But one of the common traits of interaction designers are a thirst for how things work, not being afraid to ask questions and an ability to visualize and play with elements and concepts in new ways.

Interaction Design Concepts and Principles

So what really pushes forward the field of interaction design? What makes it different from just design? That line is pretty blurry. We mostly talk about interaction design because it carries weight and focus. But the reality is that interaction design is just one piece of good design in terms of digital, web and application design and development.

The “Complete Beginner’s Guide to Interaction Design”, published by UX Booth in 2009 is still a great reference. While some of the key players and tools have changed the concepts that drive interaction design are the same.

Here’s a look at each of those concepts:

  • Goal-driven design: Why does your site or interaction exist? Figure it out and make sure your application does this one thing exceptionally well.
  • Interface as magic: You don’t even really see the best interfaces. “The best interaction designs don’t exist: they don’t take a long time to load/respond; they don’t make users think; and they don’t give user’s cause for grief.”
  • Usability: “Interfaces which make the state of the underlying system easy to understand and use are favored.”
  • Affordances: “The best (industrial/interaction) designs are those that speak for themselves; in which, as the saying goes, form follows function.”
  • Learnability: “A great deal of what comprises a usable interface is made up offamiliar components. … The best interaction designers don’t reinvent the wheel every time a similar design challenge comes. Rather, they call upon a set of patterns.”

Interaction Design Showcase

So we can’t talk about interaction design without showing some great examples of work happening around us. Each of the projects or shots below is something that gets to the heart of what this concept s all about. Make sure to visit the links to really learn more about how each of these projects (or shots) came together and work.

Everything You Need to Know About Virtual Reality and Web Design

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.

Not impressed?

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 to Star Trek’s holodeck.

The hardware to achieve this, while still in infancy, is here. HD cameras, 360-degree cameras, fast graphical processors and VR handsets are the pathfinders to a new era. Expensive, bulky and sluggish at this time, as the rate of adoption will rise, the hardware will get cheaper, smaller and faster.

Microsoft’s Hololens are shipping to developers. Not the developer type? Sony’s PlayStationVR is available for preorder. In a hurry? Oculus Rift can be purchased now for $599. Expensive? Samsung Gear can be ordered for $99. If you already have a Galaxy, you could experience VR at the price of two high-quality cases. Or, if you are extremely budget conscious, Google Cardboard is available starting at $15. You can even build your own.

In fact, you can even browse the virtual web as you are reading this. Open the Janus Browser, and you can experience a very probable future of the web. You’ll have a lot of fun in Janus Reddit section, trust me.

The technology behind VR is quickly advancing. WebVR, the experimental Javascript API that provides access to virtual reality devices such as Oculus Rift or Google Cardboard, is available in Firefox’s Nightly builds, in experimental builds of Chromium, and in the Samsung Internet Browser for Gear VR. Test your browser for compatibility here. You can even emulate a VR headset for testing the API without needing any VR hardware with Jaume Sánchez Elias handy Chrome extension. You can even experience VR without a VR headset, but to truly understand the concept, you should get one.

Ready to roll? Head on to MozVr, select one of the 11 showcased projects and prepare to be amazed. (My personal favorite is Inspirit). If you’re still here instead of frantically reading the documentation available onMozilla Developer Network, then I’ll point you to Vizor.io, where more VR goodies are available. If you happen to have an HTC Vive, you are probably on your first steps to becoming the Picasso of the VR with Mozilla’sA-Painter.

Most of the projects above are based on A-Frame, the open-source WebVR framework for building virtual reality experiences with HTML. Powered by three.js, A-Frame is created to make virtual reality accessible to the web developer and, intrinsically, to jump start the WebVR content ecosystem. A-Frame is made on top of an entity-component-system pattern and integrates with a lot of existing web development frameworks and tools. Being fully extensible if a feature doesn’t exist, you can write a component to enable a missing feature or, if you find a particular component limiting, you can fork it.

While impressive for a new technology, the simulations are far from the virtual Amazon we are all looking for.

In fact, we may never have a virtual web. Unlike games, or entertainment, where VR is more or less bound to happen, a functional virtual reality web is a complex ecosystem. While individual sites could offer an interactive virtual reality version to differentiate themselves from the crowd, the plethora of sites available on the internet will still limit to a 2D version floating in a 3D environment.

And this won’t work. The basic desktop monitor is at 30 to 40 centimeters away from the user. All UI elements are there in front. A slight eye movement is sufficient to focus on the element. In virtual reality, the canvas is the environment. There is no bottom or top of the screen. Moving your head to the left, and you have additional canvas. Look down and the canvas expands. You could artificially establish a frame, where you could align icons or notifications (F22 Raptor anyone?), but this is no longer virtual reality. This is augmented reality. Virtual reality is all about creating an immersive environment.

Instead of a screen in front of us, we can have apps, browsers and even a window to the reality surrounding us. Such an environment is based on depth and scale. 

To give you an idea of the canvas in virtual reality, we’ll refer to a passive VR device such as Oculus Rift. According to a paper by Mike Alger, based on useful observations provided by Samsung’s Alex Chu, the main canvas is the field of view when the user is looking straight forward. For example, Oculus Rift’s actual field of view is 94.2 degrees (110 according to specs), close to the 120-degree view of binoculars. Oculus recommends a distance of 0.75 meters to provide a comfortable experience for the basic user. This canvas can be extended 30 degrees from the center with a maximum distance of 55 degrees to the side as a result of head rotation. Upward the canvas can be increased to 20 degrees with a maximum of 60 degrees and, downward with a minimum of 12 degrees with a high of 40 degrees.

The shift to a new paradigm in UI/UX is necessary to avoid the “window” metaphor in VR environments. Developers are adapting the metaphor to suit the needs of basic VR device. On the Samsung Gear VR, the familiar web interface floats in front of your eyes. Head gestures, taps and voice commands are functioning the way we are accustomed to with a traditional keyboard and touch interfaces. And while this is sufficient to sell the consumer the idea of virtual reality, it is not enough to convince the user of the advantages of simulated realities.

Should you invest your time in learning WebVR? Definitely yes. In the immediate future, designers and developers will start including VR features on their websites. Interactive maps, educational tools and visualization tools are elements which could set your website apart and give you an edge on the competition.

Obviously, the traditional web will continue to coexist with VR. Some things are just not practical in VR. While I could read a blog post with a virtual reality handset with SPRITZ integration, I still prefer to actually read it on my iPad. And, while I love my Kindle, I prefer to read a book the old-fashioned way. The smell of typographic ink, the habit of turning pages, the written notes I scribe and the sense of accomplishment after I finish the last page are totally worth it.

Essential Skills To Become A Great UI/UX Designer

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.

User Advocation

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. Gather feedback. Try to find the root cause of their issues and make only the necessary changes.

Every great UX designer will be a true advocate for the user. The user experience goes beyond a glossy interface to encompass how the UI feels, behaves, and responds to user interaction. Pay careful attention to the details and be willing to scrap ideas even if you think they’re great.

In a situation where you like something that most users don’t it’s generally wise to drop the idea and rework it a little.

Listen to the user’s complaints and try to understand what they’re really saying. This is true of both UX and UI designers, although most user testing involves the UX side of things.

A pretty interface means jack if it can’t operate properly.

Advocate for the user through your words and actions. This is ultimately the #1 requirement of a UX designer. It’s a tough skill to nail down because it’s not exactly a specific skill. But I’d say having an open mind and being willing to rethink ideas will help you understand the user’s perspective much easier.

Visual Communication

Perhaps the most valuable skill of any designer is visual communication. Most designers get ideas in their head and need to explain these ideas to project managers, developers, or other designers.

Being able to sketch is a great skill to have for this very reason. But you can also communicate ideas digitally by creating digital wireframes, mockups, or interactive prototypes.

The tool or medium you use to create visual assets really doesn’t matter. Naturally it’s great to have many tools in your toolbox. But if you don’t know Photoshop and only use wireframing tools this can work fine.

It’s very important to communicate your ideas visually to the design team & the development team. It’s possible to do this with words but you’ll have a much easier time showing rather than telling.

Be able to communicate with business and marketing guys too. This means using layman’s terms to explain more complicated features.

Explain what the UX plan is to everyone using whatever visuals or words necessary. One part of this is to master a visual medium(whether sketching or software). The other part of this is communication.

Just because an idea makes sense to you doesn’t mean it’s being explained properly to make sense to others.

Ask your team and clients if they need clarification on anything. Don’t let anyone sit there nodding too afraid to speak up and ask questions. Soft skills are vital to UX work.

Learn to love communication and your job will be that much easier!

Digital Design Software

Not all UX designers know how to use Photoshop, Sketch, or Illustrator. But every UI designer should know at least one of these programs.

The differences between these two jobs are small but noticeable. UI designers must create visuals whether icons, logos, or interface mockups. UX designers are more concerned with how these interfaces behave and how users complete their objectives.

But if you’re going the UX design route it’s still wise to study Photoshop or Sketch(or both).

Just mastering one of these programs will help you express your visual ideas much clearer. You’ll also be much more lucrative to employers.

And with so many online tools it’s important to branch out when needed.

Desktop software like the Adobe suite is crucial to the design process. But UI/UX platforms like InVision and UXPin can both prove vital to your portfolio of skills. These are tools for rapid prototyping and creating interactive demos from scratch.

You can accomplish this same task with a frontend library like Bootstrap, but not all UX designers want to learn coding.

Truthfully it doesn’t matter how you create prototypes. But if you have a broad range of skills using various design programs your resume will be much more lucrative.

One last tool I’d recommend learning is a digital UX animation program. The two most popular choices are Principle and Adobe After Effects. These programs let you import digital mockups and manipulate the layers to create custom animations.

Check out this TutsPlus tutorial if you want to learn more. It’s not easy picking up all these programs but you’ll be thanking yourself later.

A great UI/UX designer should be thinking about every step of the design process. It starts with wireframing and prototyping, then moves through digital graphic/UI design into full interactivity.

These animation programs allow you to simulate interactivity without actually building a demo interface with code. Project leaders like to see these kinds of assets and your skills will prove invaluable to the process.

Empathy & Critical Thinking

Being empathetic seems very abstract but it’s quite powerful. If you can empathize with users you’ll be able to understand their concerns, their struggles, and their complaints with an interface.

The best UX designers consider the target audience for any given project. The user experience design for a dating website will be very different than the UX for an RPG video game. Think critically about your target audience to contemplate and understand what they need.

Interpret the individual problems of each project and consider the target audience by understanding how they think & act.

This is a difficult skill to teach because it requires awareness and understanding. When you watch a user interact with a website you should catch all the little details and nuances about their behavior.

If something was difficult for the user they’ll definitely complain during user testing. But a complaint is a problem, not a solution. As a UX designer your job is to gather user feedback and interpret what it means to come up with real solutions.

Practice by surfing the web and browsing other websites. Write down your complaints. Don’t be afraid to ask “why” every step of the way.

Think about why something behaves the way it does and how it could be improved.

With all the advancements in web technology UI designers can do anything. So technically there’s no limit to the question “what can we do?”.

But not every choice will be a good one. Ask yourself “why are we doing this?”. If you can’t come up with a valuable reason then it might not be a great choice. Critical thinking is vital and should be applied to the entire creative process.

Current Portfolio Trends of Creative Designers

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 an Internet connection. But instead of just throwing various platters into your buffet table why not take a more constructive approach?

These trends should offer a durable framework of ideas that you can blend to see how they’d fit into your own website.

Accessible Work Samples

It is crucial that I overstate the importance of your work samples. Make sure you have some good samples and you better make sure they’re easy to browse. If not then the UX monster will come and eat you… or worse, clients will just leave your site without a second thought. Presentation can be just as important as the work itself. When in doubt, simplify.

A great example of simplicity can be found in the portfolio of Jake Parker. His portfolio includes a wide variety of content like book covers, graphic novels, and visual development artwork. The homepage doesn’t include much content and the only 3 links available make navigation pretty simple. Clicking through his work leads to single-page items along with multi-paged content rotators.

How you choose to display content depends on how much work you’ve created so far. Every designer will display their work differently but visitors only want one unified experience – to see what you can do in the most efficient manner possible.

Single-Page Designs

Don’t think of a single-page portfolio as an implication that a web or graphic designer hasn’t done much work and therefore only needs one page. I’ve seen plenty of single-page sites with dozens of work samples and multi-page sites with only a few samples. The primary benefit of using one page is to remove HTTP requests and make the browsing experience smoother and faster.

This works best if you don’t need to include lots of extra details on each project. Many designers like to include which skills were used on a project, how long it took, or even additional screenshots. This is perfectly fine and certainly looks good to clients but may require more than just a lone page.

One of the coolest single-page designs I’ve ever seen has come from Drew Wilson’s portfolio. He’s a talented dude who’s created a lot of different startups and applications. His website is split into horizontal sections with different backgrounds for each project. Towards the bottom of his portfolio he lists a timeline of projects with links out to the live websites.

Although this is a more pristine example you might be surprised at how many designers prefer to use single-page portfolios. These layouts are a common starting point for new designers who just want to get something online. But single-page portfolios can also be great for experienced designers who want to condense their work into a quick presentation.

Full-width Hero Images

If you want to capture attention quickly try building a 100% width hero section. This would span the entirety of the browser window even if your content is centered to a limited width on the page. Some designers choose to add portfolio project screens while others might include a background video or photograph.

Gil Huybrecht uses a fullwidth header, or hero image on his homepage to showcase a photo of himself. This is very common for freelancers because it gives a personal touch to the website. Potential clients often enjoy seeing what you look like or seeing your office workspace. It depends if you can get a good photo of something that would match your website design.

Another option would be to create a custom header background. This could be hand-drawn or digitally created. This is another great method of demonstrating your skills beyond what can be found in your project work.

Content Sliders

In the same vein as a fullwidth hero image you might up the ante to include adynamic content slider. Whether fullwidth or just typical content width, these sliders can provide a quick look at your work samples. Dynamic sliders are the most common and many will rotate through all items in a circular carousel.

Plus if you’re familiar with setting up jQuery plugins you’ll have no problem finding a free open source script for your portfolio.

Joachim Löfstedt has a great example on his homepage. Each item in the carousel links to an internal project page with more information and photos. This would be the best way to draw attention to your work. Content is easy to navigate and this slider offers first-time visitors a quick look at Joachim’s greatest projects.

Big Readable Typography

Not every portfolio is content-heavy but most are going to need some form of text-based content. Picking the right fonts can be a tough call because you need to gauge how they look in comparison to other page content. I’ve found the easiest solution is to make your fonts bigger rather than smaller – weed out fonts that don’t fit and replace with better options.

Small fonts have their place in layouts where content has been designed to fit into tight spaces. But not everyone enjoys this style because it’s often harder to read. Plus someone who’s quickly browsing your site may completely miss the content if it’s too small to notice.

Yet huge oversized fonts aren’t always the best choice either – try to strike a general balance with more weight leaning towards larger font sizes. You have an extra scales of justice lying around right?

The portfolio of Adam Mottau demonstrates this balance eloquently. His name/logo and the page headers are typically much bolder and larger while content and navigation links are a bit smaller. But none of the text on his site is “too small” in my opinion. Actually the font sizes could even be increased without any negative effects on the composition.

Notice how elements on his portfolio utilize a lot of negative space. Since he’s using a single-page layout the extra space helps to distinguish between content areas. But it also leaves room for typography to breathe without cramming it all together.

Attaining Focus

Possibly one of the more important trends to consider is a careful attention to detail. This idea spans all layout styles because focus is needed to keep attention where you want it. Everyone has some level of focus and it’s up to you to channel that focus appropriately. Think about your design not just from a designer’s perspective, but from a user’s perspective. How usable is your portfolio to a non-technical small business owner?

Ollin is an exceptionally talented icon designer with a lot of great work online. His portfolio is minimalist, clean, simple, and definitely performs well on any device. The focus on this portfolio always sticks to his work, or in the case of his blog it sticks to his writing. There’s nothing else distracting you and there’s no way to veer off the intended path.

By using Ollin’s website as an example I don’t mean that every portfolio should be this simple. However his site is perfect for demonstrating how to keep focus on what you want. Depending on the page you might not always want focus to be directed onto your portfolio work.

Top 5 Free Portfolio Sites

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 150,000 creatives. There are no membership requirements, invites, or application processes. They also have a very nice and well-integrated job board. Bonus!

2. Behance Network (20%)

Many of our agents will been attending a sampling of Behance’s 468 Online Portfolio reviewstaking place around the world from May 14th through 21st, but the site’s been on the radar for lots of creatives since they launched in 2006. Garnishing millions of pageviews a month, Behance lets you create a truly stunning portfolio connected that’s connected to the design community via activity feeds, groups, collections, etc. Not only is this site beautiful, it’s a truly effective tool to build your portfolio.

3. Carbonmade (16%)

What started out as one designer’s frustration at the pain and expense of putting his illustration work online, Carbonmade has turned into home for nearly 400,000 portfolios. Though it doesn’t have the social media bells and whistles that Behance and Coroflot have, the fact that it’s a straightforward portfolio site that’s incredibly easy to use makes it appealing. Plus, it’s got a unicorn on the landing page, come on, that’s worth bonus points. Carbonmade offers a “Meh plan” that includes 5 projects and 35 images for free.

4. Cargo (12%)

Cargo offers their members a stunning way to create freestanding personal websites with their own URL, but it comes with a catch: you must be invited to join. Don’t be too disheartened, Cargo awards memberships to a number of people who contact them and share their work with the staff. The site is divided into both a front side, which is the public website, and the back side, which connects them to fellow Cargo members.

5. Dribbble (4%)

Much like Carbonmade, Dribbble began as a side project, this time for Rich Thornett and Dan Cederholm, one of whom felt he was a pro basketball player trapped in the body of a software developer (which explains the running basketball theme throughout). Designers share small screenshots of designs and apps they’re working on which can either be arranged in a portfolio or explored by screenshots that can be grouped by popularity, “debuts” (new submissions), orkeywords. Users can comment and critique individual pieces. A really great, very easy to use site.

If you’re looking for a more in depth review of the technical side of some of these sites, Erik Hans Rasmussen has a great post over at Vandelay Design on what makes them tick.

And remember, you can have several portfolio sites. For instance you can keep your Behance one even after Cargo offers you another. And with so many options and so many people looking for work, we’d recommend getting yourself out there. Recruiters actively troll these sites looking for new talent, and it’s a great way to get exposure to more opportunities.

7 Ways to Promote Your Design Project

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. Share more than once and respond graciously to comments.

Share on Portfolio Sites

While most of us already have portfolios, it is important to share and have an up-to-date presence on sites such as Dribbble and Behance. Designers frequent these sites. So do clients looking for new talent.

Post active projects – as long as they are not confidential in nature – and ask for feedback. Use built-in sharing tools on these sites to get your work out there even more.

Ask Influencers to Share

Sometimes you have to ask for a little help when it comes to promoting new work. Start with other friends in the design community. Ask them to share your work or project as well.

Then branch out. Ask some of the people who influence you online to share your projects. (What’s the worst that can happen … they say no?)

A little boost from third-parties can really help get your work out to an expanded audience that you may be unable to reach on your own.

Email Design Blogs

Step 1: Write a press release.

Step 2: Send it to every design blog or magazine you can think of.

If you want your work to be noticed, you have to tell the industry about it. A press release is a simple way to do that. (Here are a few tips on how to write a great release.)

Make sure to include a way to be contacted and an image of your work. (And yes, you should have a studio-quality photo or high-resolution digital image.)

Then be ready to talk about the design project if you are called. Why did you create it? Where did the idea come from? How did you do it? What do you how to achieve with this work?

Network

While a lot of the promotion tips thus far have been online-based solutions, it is important to actually get up, get out of the house and meet people. Networking is one of the single most effective tools you have when it comes to self-promotion.

Go to networking events near where you live and work. Bring plenty of business cards and be ready to show off and talk about your work with strangers. Attend design meetups in your area. (A lot of the big design groups sponsor them. Adobe, Behanceand Dribbble meetups, for example, are held regularly in cities all over the world.)

Interacting with others in the design community is a great promotion tool. Even if you are shy, get out go to a meeting and make a point to talk to just one person.

Create a Blog

Make yourself useful and helpful. Create a blog that relates to your work. Write about what you do or the process of creating or even tutorials on how to do certain things. This will help you become and authority in your field while showing off your work.

Not quite ready to start on your own? If you have a knack for writing or video, do some work on the side for a reputable design blog. (Designmodo, for example, hires designers who can write for this blog.)

Buy an Ad

It’s not a free method of promotion, but advertising works. Buy an ad – online, in a newspaper or magazine, on television or radio – to help you reach more people.

Base your ad on the type of design work you have created. Remember to show the work in the ad if possible and explain why your work is important. Place the ad in a medium that will help you reach your audience directly.

If you are a designer looking for local clients, place the ad in local media. If you are looking for clients online, run an ad with Google or Facebook.

Create a simple targeting plan and budget and stick to it to get the most out of your advertising dollars.

Offer a Simple Freebie

Bring people to your website with a simple freebie. Create a badge, color palette, texture or vector pack that you can give away to drive traffic to your site and your work. (It’s hard to pass up a good free item.)

Share your free download across your social media sites and make sure it links back to the item you really want people to see.

Tips for Creating a Great Personal Online Portfolio

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 not to hire me. In my case 90 percent of the inquiries I get are via Dribbble, so I decided to focus more on showcasing personal favorites.

Wireframing

Now that you’ve seen the examples, you probably want to start redesigning right away. That’s fine, but don’t open Photoshop yet. Grab pen and paper instead.

Set a time limit; let’s say one hour, and sketch out all the things that come to mind. Even when you think you’re done after 30 minutes, keep pushing. Nothing is “ugly” or “not done” in this stage. Aim for 20 completely different layouts.

(Note that these are not full wireframes yet but merely sketches.)

After this brainstorm session, it’s time to filter sketches and come up with a wireframe. Since the choices are personal (obviously) I cannot give you a set of rules, but I have a few pointers:

  • Be clean and clear. It shouldn’t be that hard to explain what you’re doing. Make sure the first impression is clear and inviting.
  • Make choices. As a designer you’re probably pretty well-rounded. This doesn’t mean you need to highlight everything you did in the past. Highlight strengths rather than overall experience.
  • Focus on your products. Unless you really want to express your brand identity I think it’s best to keep your design minimal. It’s like an art gallery; you don’t want the showroom to get more attention than the actual artwork right?

Code or Design

It’s finally time to go digital! The reason I mention code or design is simply because not every designer knows how to code. If you do; forget about Photoshop and try this.

Since you already have a solid wireframe at this point, start out by setting up the code to match functionality. On a personal note, even if I had a wireframe for my portfolioin the past, I would still change things around in Photoshop and ended up publishing nothing.

This is why I recommend starting with building the wireframe first. Not only does it keep me in the right flow, but it also saves a lot of time since I’m editing code while working in Photoshop.

Edit and Publish

Last but not least, is to put your portfolio online as soon as possible. As long as you have a good foundation, you can always tweak and optimize your page at a later point. It might even be a good thing to optimize this later on so you can actually trigger returning visitors.

4 Ways to Improve Usability and User Experience

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 landing page has very little copy per section. The above screenshot is from a single section of the landing page. Notice the super short copy. It look good and reads even better.

Aiia is a waterproof speaker and its landing page is fantastic. Despite a scroll oddity, I am in love with the page’s cleanliness. The limited copy is a fantastic way to get the main idea across to users without getting lost in mountains of words.

2. Remove Visual Decoration

When it comes to visuals, sometimes we want to throw in an extra element just to make things pretty. We all want the design to look good. And although those intentions are good, the execution can become too much. That’s why I’m a big proponent of removing any decorations that are not necessary. The great thing about decorations is that they don’t hurt the user experience if you remove them.

I’d like to compare two websites. VConcept (above) and Born (below). VConcept has less content on the page but it’s much harder to digest. All of the decorations on the VConcept page get in the way. There is a triangular pattern background and a moving line background. The copy has three different styles – plain text copy, underline and gold underlined text.  Not to mention that the logo is in that paragraph as well. It’s just too much.

On the other hand is Born’s career page. Yes, it has a lot more text but it works because there are no decorations to distract. Imagine if those job posts were boxed in with a single-pixel border. The information would be much harder to scan.

3. Reuse Design Elements

Consolidate and reuse repetitive elements. For instance, when there are many colors, fonts or style variations it will get messy. Reuse design elements to keep things consistent; consistency makes for a clean design. There are rules of thumb such as “don’t use more than two or three fonts” for this specific reason. The same goes for colors and elements, too. If you have a newsletter capture at the bottom of pages, make sure it looks the same on all pages. Inconsistency could lead to some serious confusion.

Let’s discuss the color choices made by The Business Depot. They are an IT cloud product for enterprise customers which explains the cheeky web design. Between the home page, the product page and the contact page, they use too many various shades of the rainbow. On the home page, the colors are primary. They even look like they mean something for each page. But, once you click through you realize they don’t actually mean anything because the color changes depending on what page you’re on. For instance, when you go to the about page the colors are pastel. Yet, when you head to the contact page, they are vibrant and strong. Keeping the color consistent would improve the quality of the design.

Prismic uses too many colors, specifically on the blog. They color code blog posts. That can be a dangerous game, but the overall color scheme is cohesive. Better yet, on the post from the screenshot, the colors become monochromatic. The post uses other shades of blue to keep things familiar. If everything on this page was a different color, it would be a visual nightmare. I’d like to point out that the blue in the hero is the same from the logo and CTA button. Consistency makes things look cleaner.

I’ve always been a fan of Lonely Planet. The current design style is fantastic because they reuse similar design elements. Each city’s page uses the same template which makes things familiar. Lonely Planet has a lot of content so using a template makes it easy on readers.

4. Always Have a Single User Goal in Mind

The last bit of advice I have about decluttering is to understand the purpose or goal of a given page. It’s best if you frame the goal from a user perspective. An example of a user goal is to register for a free trial, learn about a specific recipe or sign up for a newsletter. If you’re designing a new page or website, double check what the goal is and make sure nothing gets in the way.

Always have a single and clear goal to aim for. This will help you remove things that distract from it. For example, if you want the user to download a sample chapter of a book, don’t promote another book over the chapter. Showcase the download button front and center. Repeat the CTA a few times if it’s a long page. And, remove everything that does not help the user download the sample.

Let’s take a look at the landing page for the mobile traveling app Hitlist. The obvious thing a user can do is to download the app. There are a few different ways of doing that. A user can enter a phone number to get a text link or click the App Store button. Of course, a user can click other links also. The main focus of the page is not obstructed by something else.

Speedlip is a nonalcoholic spirit. I am in love with the visual style of the website. I like how the  homepage doesn’t pull the user in too many directions. The whole page has only four CTAs. Two of them are to buy a bottle and the rest are for more information to further convince the user to buy Speedlip. It’s okay to have more than one CTA as long as they don’t compete with one another.