Monthly Archives: December 2016
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.
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.
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
Traditionally web designers and we developers have been separate job titles.
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:
- 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.
- 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.
- Individuals and interactions over processes and tools
- Working software over comprehensive documentation
- Customer collaboration over contract negotiation
- 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
Modal windows are those popup windows that appear over the screen rather than opening a new tab/window. They usually darken the background to bring attention to the popup.
Everything in the window takes precedence over the page so these modals are meant to draw attention. They can be annoying and outright infuriating but numbers don’t lie:they work.
Let’s delve a bit into current trends of modal windows to see how they work and why you’d use them.
Dark Backgrounds & Clickable Areas
Modal windows follow a similar design strategy and they’re not very complicated.
They mostly all use a darkened background on the page to bring attention to the modal content. This shouldn’t be a pitch black background because that can feel intimidating.
Instead the user should see a touch of the page behind the background, but it should have a reduced opacity. This could be 90% or 50% depending on how much you want to hide the page.
Also the user should be able to click on the background to hide the modal.
This isn’t universal but I hate when designers remove or ignore this feature. Yes there’s usually an X button or close button, however it takes more effort to move the mouse onto that button.
It should be possible to just click the background and hide the message right away.
Some modals use fancy animations to appear on the screen. This is usually preferred because it reduces the harshness of a random popup.
Having the modal window slide, fade, or bounce into view makes it a touch easier on the eyes. But don’t drag out the animation either!
Most users will ignore the modal so they don’t want to watch a full 3 second animation. Get to the modal quickly and let the user either read or close the window.
Designs vary from site to site but most of them use a white modal background with dark text. It’s the simplest way to design a high-contrast message that can blend with any website.
Overall these are some basic trends so they’re not absolute. But keep your eyes open as you browse the Internet because you may be surprised how many different styles are out there.
There are some popular trends used by marketers who want to display modal windows for certain visitors.
The vast majority of modal popups happen a few seconds after the pageload. Most visitors haven’t even had time to read through the site to understand what it’s about. This seems like the worst way to do modals unless they’re informational for things like cookies or adblock settings.
Other display styles typically work better since they’re geared towards user behaviors. Here are the three most common techniques:
- Exit modals appear when the user’s mouse leaves the page
- Timed modals run after X seconds/minutes
- Location modals appear when the user scrolls down a certain amount
Each scenario is different and should be used based on the audience.
If you run a blog with lengthy content like Smashing Magazine then you might do a scroll-based popup. Other blogs like WPBeginner actually did the exit modal strategyand saw a huge increase in daily email signups.
There’s no denying that this stuff works. It’s just a matter of how you’re willing to run modals and what the end goal is.
Popover Marketing Messages
Modals are primarily used for marketing so the copy should prey on ideas and emotions. Recently modal windows have taken a turn towards the guilt trip approachfor their buttons.
Instead of just having buttons that say “yes” and “no” they instead go so far as you make you feel bad or guilty for closing the window.
It seems like this would just make people angry but it really does increase conversions. Check out this Conversion XL post to see a few examples.
Beyond the typical yes/no signup modal you can also find guilt trips in the marketing for adblock messages. These appear on some larger sites that now want to ban adblock users.
The best success comes from excellent copy and a short but sweet message.
Pure CSS vs. JS
It’s never a great idea to completely reinvent the wheel so modal window plugins are basically the norm. But which one you pick can be a very complex process.
Here are my preferred JS modal window plugins(all free).
The Remodal plugin goes a step further including custom CSS3 animations. The design style is incredibly simple and pretty easy to customize too. It’s actually one of the easiest plugins to get working right out of the box.
And it runs on jQuery/Zepto so you have your choice of dependencies.
If you’re looking for unique and well-designed check out SimpleModal. This is yet another free plugin but it has a candy coating with some brilliant theming.
I don’t like how the background doesn’t darken as much but you can tweak the code to customize that. What I do like is the variety of content you can run. SimpleModal can work with embedded content, iframes, Ajax requests and pretty much anything you need.
All of these are fantastic choices and many have vanilla JS + jQuery options.
If you prefer the CSS route here are some nice alternatives.
- CSS Modal
- Basic Modal
- Modal Pure CSS
My favorite from this list is this CSS Modal created by Hans Christian Reinl. It’s hosted on GitHub for free and it has all the typical modal window features.
It darkens the background, lets you style the window and close button, plus it’ll close if the user clicks/taps anywhere outside the window box.
That’s the most important feature for me because I hate when modal windows force you to click the X to close. Most users expect modals to close if they just click elsewhere on the screen. This is almost impossible with pure CSS and that’s why CSS Modal is a great pure CSS solution.
Hiring a web design can be an exciting process. When I talk about hiring a web design in this post, the advice can be applied in a variety of ways. First, it could mean hiring a single, usually freelance, designer for a job you need to be done. It could also refer to a web design agency.
Additionally, it could be advice for hiring a web designer for your own team. The advice is valuable for web designers who are looking to improve their portfolio. Now, let’s discuss five different but important things when trying to hire a web designer.
The work shows off responsive design
It’s still surprising how many times responsive designs don’t make it into a web designer portfolio. It’s hard to say if a designer is capable of delivering responsive design if it’s not there. It could be omitted by mistake or because they have never done it. You can’t tell if it’s not there. Now, this guide refers to a web designer.
The web is a flexible medium that works on the tiniest devices and their tiny screens to larger devices and their larger screens. It’s important for any 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.
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.
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.
I truly admire the portfolio of Hyun Seo. At first glance, there is a whole lot of text and not a lot of UI screenshots. That’s a good thing. Hyun’s case study on IBM’s Cloud Security Enforcer start of with a lot of text. It’s him explaining the project to a potential client or company. The case study is about ¾ text and ¼ screenshots. The screenshots are all the way at the end, by the way. The case study communicates well his role in the project, the problem and how he tackled it.
Is 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.
Another example of a good and quick case study for Revue by Awkward. The case study is quick and the point. The case study explains the thinking process of how Awkward arrived at a solution. Like I said, the case study is quick and to the point but it clearly shows Awkward’s problem-solving skills.
Showing off the design process
I found that the best portfolios have case studies that show off the design process for each individual project. Most often it highlights that made the project awesome, interesting, or even difficult. It’s so much better than a separate process explanation because it’s relatable when it’s tied to a specific project. As a potential client or boss, you’ll get a clear idea of how the designer or agency works and thinks.
Additionally, showing off the process will let everything else in this post fit right in. Sharing the process will also share a web designer’s communication skills. It will clearly indicate the designer is a problem solver because they are showing you how they solved the problems at hand. Having a few different projects will allow you to share different skills.
Some case studies can have a quick snippet about the done research, or about how responsive design was important to that project.