Category Archives: Web Design

Creative Web Designers Work on Awesome Websites

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

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

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

 

Let’s see how creative web designers work their magic

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

 

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

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

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

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

 

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

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

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

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

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

 

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

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

This is an example of an effective mix – from the Uncode showcase.

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.

Designers and Web Developers

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.

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

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

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.

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

Why Styles Are Continuously Changing

I was recently looking through some screenshots of apps from earlier versions of iOS. It had me thinking about where design is headed over the next five to 10 years, why we continue to iterate on style, and whether design is really getting better or simply changing in a long-term cycle for the sake of change. Is design progressive or cyclical?

In the case of digital design, there is a constant desire to see and create new styles. I’d liken it to the iPhone, for example. The style of the design is difficult to fault, yet we constantly crave a radical redesign at every year’s keynote event. The style might be different but often it’s very difficult to argue it is in fact better. The iPhone 6/7 might look different compared to the 5, but does it grip in your hand as well? Does it rest on the table flat? It’s a classic case of constant desire for change that does not always yield a better product. The same concept can be applied to digital design. We love seeing new things, experiencing new things, and design is no different.

Creatives are differentiating styles in order to maintain a unique selling point for services. Again, it’s not changing styles because they are better and help the user — it’s change as a byproduct of boredom, competition and the requirement to stand out.

Companies are always looking for ways to differentiate through design. When one company creates a design direction that draws great appeal, others follow. As such, the style no longer differentiates, and as with fashion, this can serve as a catalyst for change

Take the above example of Instagram and imagine switching the style onto the current app feature set. I’d argue that while it may not align with what we’re now used to, it would exhibit a far greater deal of individuality, and even a better user experience — the contrast between elements is extremely clear and easy to understand. Buttons actually look like buttons rather than text labels, and the overall visual communication is clearer.

This all poses the question of whether design is really improving. Will we simply come to realize the benefit of not stripping back an interface to its stylistic bones? If so, is design nothing more than a way of keeping users and creatives interested and engaged over 5- 10- or 15-year cycles?

The most difficult elements of design

Understanding type can be one of the most difficult elements of design. There’s a lot of terminology and lingo that type designers (and designers, in general) use when talking about lettering. Sometimes it can be tough to decipher it all.

If you find yourself wondering what the difference between a hook and a counter are or you still aren’t sure how a serif and a slab are different, we have you covered with this typography cheat sheet.

It describes all of the different aspects of lettering, from terminology to components to type styles and methods of typographic manipulation so you will have a better grasp on how to understand and use typography in your design projects.

Are you ready to get started? We’ve got a great infographic to help you better understand the elements of typography.

In the case of digital design, there is a constant desire to see and create new styles. I’d liken it to the iPhone, for example. The style of the design is difficult to fault, yet we constantly crave a radical redesign at every year’s keynote event. The style might be different but often it’s very difficult to argue it is in fact better. The iPhone 6/7 might look different compared to the 5, but does it grip in your hand as well? Does it rest on the table flat? It’s a classic case of constant desire for change that does not always yield a better product. The same concept can be applied to digital design. We love seeing new things, experiencing new things, and design is no different.

Creatives are differentiating styles in order to maintain a unique selling point for services. Again, it’s not changing styles because they are better and help the user — it’s change as a byproduct of boredom, competition and the requirement to stand out.

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.

 

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.

A Design Workflow Comparison

The ever-expanding world of design can be tough to comprehend as a newcomer. With so many tools and techniques available it’s hard to know where to start.

Three of the most widely used design programs are Adobe Photoshop, Adobe Illustrator, and the newer Sketch by Bohemian Coding.

In this guide I want to compare these three titans of industry to see how they stack up for common design tasks. All three programs are incredible, but they each have their own strengths and weaknesses for certain creative tasks. One you know which tool best fits the task at hand you’ll have a much easier time learning and mastering digital design work.

 

UI Design

Interface design usually relates to websites and mobile apps, but can also include game UIs or any digital screen that takes user interaction.

For years Photoshop was the #1 choice for UI design. In PS you can build vector icons and textured backgrounds to mix into one common layout. But Photoshop was always intended to be a photo editing suite, and while Fireworks was better it has since been discontinued by Adobe.

This is where Sketch comes into play. The very first release of Sketch App was in late 2010. It has since grown massively with a large community fostering learning materials and entire websites dedicated to free Sketch resources.

When it comes to UI design Sketch is currently the king. This program’s purpose was to be a UI design suite for web & mobile. Patterns, textures, and vectors all intermingle with each other much easier than in Photoshop.

The only downside is that Windows users cannot run Sketch because it’s OS X exclusive.

The Uncomfortable Side of Design

It was awesome, but as soon as the day was over the animation was gone too. Some people don’t care and some didn’t even notice but those who did were left with a void. I’m not exaggerating; hear me out. The heart explodes with confetti, it bounces and is jolly and colorful. Overall, it makes the mundane tasks of liking or favoriting a tweet much more interesting and fun. When you take that away it’s a little sad and underwhelming.

Since it’s birthday, Twitter did update the heart animation to be a little but more than just a color change but it’s still nothing compared to the confetti explosion. All in all, this is a silly complaint yet people are disappointed enough to blog about it on The Next Web. It actually bummed people out, which is rude and awful.

 

Taking a Step Back

Let’s also talk about the aspect of hearts versus stars. If you recall, late 2015, Twitter changed its UI from stars to hearts. “The heart is a universal symbol, it’s a much more inclusive symbol,” said Casey Newton. Check out Twitter’s gif for what the new heart UI is all about. (No, it’s not the same as the confetti explosion from their birthday.)

The decision was business oriented because Twitter was excited for increased interactivity due to the change. Again, that’s all fine and dandy but what happens when you have a negative thoughts. How is a heart at all an appropriate response for a negative remark? It’s not, it’s insensitive and unhelpful. A star is also unhelpful, for what it’s worth.

 

It’s Not Just Twitter’s Problem

I am not picking on Twitter. It happens to be a great source of examples. What if there is breaking news of a terrible incident?

 

Emotional Intelligence and Design

Beth Dean wrote an amazing post on Medium about painful experiences brought up unintentionally by technology. The blog post was inspired by a website trying to verify her identity asked her if she knew her deceased mother. (It’s absolutely nothing in comparison to having a silly animation disappear.) In her post, she talks about designing with emotional intelligence. She identified emotional intelligence as having five traits: self-awareness, self-regulation, motivation, empathy and people skills.

 

Self-Awareness and Self-Regulation

A great example of self-awareness is Facebook asking a user if they want to see ads based on their behavior. Not only does it create a better experience it is more relevant to the user.

Features Web Design

As a business owner, have you ever been totally clueless as to why your website isn’t converting? Do you feel like you have everything in place, yet your audience isn’t following through on your call to actions buttons, and your bounce rate is sky high? There could be a few crucial web design features that are missing on your website, and adding and adjusting them might mean the difference between success and failure.

Use this article as a ‘checklist’ to see whether your web design is on par, and which features you can implement to boost conversions and encourage engagement.

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

So, ‘What’s Missing’?

 

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

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

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

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

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

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

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

 

2. No Trending UX and UI Features

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

  • Scroll Jacking is where the user’s scrolling is directed to an exact vertical point on the screen, such as the top of the next content container. It’s replaced native scrolling and is more targeted. Here are some examples for that:
    1. Design for Your Satisfaction
    2. Lookbook
    3. Brilliance of Perfection

Designer guide for get Job

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

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.