Monthly Archives: April 2017

Creative web designers

 

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

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

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

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

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

 

Drawing Through Color in Web Design

Working with color can be so much fun. Color can set the mood and tone of a design. Color can make a design appear clean or messy. Another thing we can use color for is to draw attention to a desired piece of content or element.

In this post, we’ll go over the various way in which color can be manipulated to draw attention to something. Some of the examples will talk about repetitiveness, some about photography and others about how a lack of color can be a strategic thing too.

Let’s get started in analyzing how to draw attention through color.

Nursing bras, photography, and attention

There are a plenty of website designs out there that make use color in a strategic way. Color is so versatile and comes in all different shapes and forms. For instance, when I speak about color in design most people assume about things like text or buttons. We’ll get to that. For now, I want to talk about the less obvious way we color effects a design, through photos.

Storq is clothing store for pregnant women. Overall, the website doesn’t feature too many colors. However, on the product pages, the photos command attention. Part of it has to do with the fact the photos are large. The other part has a lot to do with the fact that the photos are the only elements on the page that have color in it.

The photos feature darker shades and similar shades too. Storq uses photography that fits right in with the overall design. They don’t use dramatic or stark colors in the photos to draw attention; that would be too much and unnecessary.

Neon or contrasting colors are not the only ones that can draw attention when thought through with the context of the design.

Colorful texts can draw attention too

Let’s talk about changing the color of text such as headings or large pieces of copy. I have found two amazing examples of how text colors can leverage a visitor’s attention too.

The first example is that of The Nature Conservancy in California. The website is a great example for two reasons.

First, the design leverages color but also a hierarchy. Hierarchy is a fantastic design tool in pinpointing what is the most important to the least. It’s clear at a first glance, what is important to look at first in the above screenshot. “Our approach” is the darkest piece of text in that whole section.

The rest of the text is the same color but what is more important is determined by size. In this example, color is a unifying factor, except for the heading off course. At the same time, color is used to draw attention away from more trivial elements like the numbers on the left-hand side of the headings.

It’s nice to know the order of the sections but, more or less, the numbers are irrelevant to the experience. Therefore, they are lighter in color.

Additionally, we have an example of Founders. By the time you make it halfway down the home page, you’d have seen at least three different font colors.

When you first take a look at the green hero text, it grabs your attention because of its front and center. But the second you realize it’s actually a dark green color, it gets to keep your attention for a little longer. Here the green is a little unexpected so it keeps a visitor a little curious.

At the very least, if the green headline go unnoticed, it’s hard not notice the change of color in the text within the middle section again.

The headlines are a dark blue while the supporting content is gray in color. The contrast of the light gray against the blue heading gives a lot more prominence to the headlines themselves. The gray makes the headlines stand out a whole lot more. I love that such seemingly irrelevant but highly effective manipulation can be done with just color.

Scrolling in Web Design

Scrolling Best Practices

Long scrolling, parallax effects and similar mechanisms are still relatively new to the realm of design (~4 years) , but still some rudimentary trial-and-error has produced some fundamental best practices.

Summarized from Web Design Trends 2015 & 2016, here are some everyday tips for successfully implementing long scrolling.

  1. Don’t be afraid to alternate long with short scroll. Let the content dictate the scroll length, not the other way around. It’s totally fine (and quite popular) to use a short-scroll homepage and long-scroll landing pages (like Products, Tour, etc.).
  1. Consider sticky navigation, such as that used by Free Range Designs, so that users can always “get back” quickly or bounce from element to element in the scroll.
  2. Suggest scrolling with design elements or tools so that every user can quickly see how the site works. Arrows, animated buttons or similar user interface tools are fun and easy ways to help the user determine what to do next. Some sites even include a small button with instructions like “Scroll for More” or “Get Started” to help navigate a site with unconventional techniques.
  1. Make clear distinctions between scrolling clicks or taps and other calls-to-action so that your website gets the desired interaction.
  1. Do some research and look at how users are interacting with the scroll. In Google Analytics, for example, you can open the “In Page Analytics” tab to see how many people click below the fold. Based on the data, you can then tweak the design as necessary.
  1. Don’t go overboard. Long scrolling does not mean 500 pages of continuous content – a long scroll can also be simple. Tell your story and then stop. Don’t force it. Deca, below, uses a scroll that is only a few pages long.

Focus on your user goals and accept that even infinite scrolling sites are not truly endless. When creating longer-scrolling sites, understand that users still require a sense of orientation (their current location) and navigation (other possible paths).

  1. Include visual cues that help orient users in the scroll, such as the helmet icons used in the left hand side for “The Seven Types of Motorcycle Rider” site below.

Scrolling can be a double-edged sword, so stick to its recommended usage to avoid it doing more harm than good.

Tips on the Best Web Designer

1.The work shows off responsive design

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

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

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

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

2.The work includes research

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

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

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

3.The work shows off good communication skills of the web designer

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

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

4. the web designer and artist or a problem solver

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

Actually, a web designer who is a good communication will make this distinction easy for you to see. They will clearly communicate their problem-solving skills.The case study on the redesign of the Met from Fantasy explains a few different problems their redesign tackled. The design focused on helping users find exhibitions, plan a visit and even support the Met through donations. Unfortunately, their case study does not go into too many details of each problem. But, it is still a clear indication that the agency takes business objectives seriously.