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
 

Monthly Archives: January 2017

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.

Designer’s Guide to Promoting Yourself and Your Work

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.

7 Web Design Trends to Try in 2017

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

1. Gradients

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 a little more intriguing. You can also use a gradient background to draw the eye when you don’t have other imagery to work with.

2. Video with Sound

People are becoming more accustomed to watching videos – from short bits of YouTube to movies – on their devices. Websites can mimic this cinematic experience as well with a full-on video with sound display on the homepage. (It does not have to be auto-play to be effective.)

Proceed with caution. Include an option to toggle sound off and on, because not all users will appreciate it. The content needs to be so stellar that users will demand sound as part of the experience. (This is a trend that can be tough to pull off but can work beautifully if you have the right video and sound content combination.)

3. Virtual Reality (Almost)

Virtual Reality will likely be the most talked about design element of 2017. With more devices on the market – and at affordable price points – VR is going to be big. Gamers will probably get the most out of VR initially, but it could definitely reach into marketing and other applications.

You’ll need to be ready to design for it. But moreover, you need to be ready to create virtual reality experiences that don’t require a headset. This includes website designs with 360-degree video and other highly interactive experiences with three-dimensional effects.

Anything that takes interaction to the next level will have that VR feel and be perfectly on-trend.

4. Even More Parallax

Parallax scrolling effects were a big trend in 2016 and designers have only gotten cleverer with these mouse-based movements. That trend will continue with more impressive – and fancier parallax effects.

Look for parallax effects that move up, rather than down, and movements that capture a much more layered design. The key to almost every design trend in 2017 is that touch of reality and parallax will be no exception. The more real the movement looks on the screen, the more users will want it.

5. Super Simple Homepages

More designs will start to strip away the type heavy homepage styles that have been popular for a while. More designers are opting for design that feature only a word or two on the first screen of the design.

And before you worry about SEO, these pages are often packed with plenty of information below the scroll. This is a great example of how user habits are changing web design as a whole. Thanks to plenty of scrolling on mobile websites, users are scrolling more on websites regardless of device. This makes it easier to design a light, airy hero area and pack the design with content on the scroll.

Here’s the trick: Just make sure to give users enough in this simple design to make them want more so that they will engage in scrolling behaviors.

6. New Navigation Patterns

Navigation does not have to be glued to the top of the design. From hidden or pop-out styles to navigation on the side or bottom of the pages, it is trendy to move the menu. (As long as the placement is still quite obvious.)

When considering a change to navigation styles, think about user patterns. Is the nav easy to find and does it work in a manner that users will understand intuitively? If so, go for it. If not, rethink the idea.

7. More Tactile Design

Web design is rooted in physical things. It started with Material Design and the development of more tactile planes and layering of objects. This interface trend is expanding to the visuals as well.

Designers are much more rooted in reality. This includes images, rather than illustrations, and plenty of elements that feel like the user can reach out and touch them. The images are more natural as well, featuring elements that are made from materials found in nature and crafted into usable objects.