Becoming a Happy and Fulfilled Web Designer


How Do You Live a Happy and Fulfilled Life as a Web Designer?

Becoming a happy and fulfilled web designer is a dream every web design professional is chasing, even in the midst of success. Life, it seems, is filled with discontentment even when you reach the top.

You might have asked yourself these questions: Why am I here? What is the point and purpose of my life? These questions reflect that all of us long to live a life that matters – a life with meaning and purpose.

Sean Howard also asked these questions many years back when he was the Vice President of strategy in an agency.He came to a point where he unconsciously cried in public because he was unhappy. After some self-assessment, he realized that he was building something without purpose or meaning.

The Importance of Community

When we talk about purpose and meaning, it has something to do with making an impact in the lives of others as well as in the world we live in. This seems like a tall order, an impossibility, which can make us stop dead on our tracks. This is where community plays a big role in pursuing our purpose.

Just like the support network you have in your office where you can complain about your boss and about work, the community acts as your support network as well. You need all the support you can get both short term and long term. Anyone who is a creator – whether a creator of art or a creator of code – who is building their brand needs to be surrounded by a community that supports them.

Aside from providing support, being a member of a community provides you a big audience who are willing and enthusiastic about what you can offer. You won’t have to worry about promoting what you have to offer or go somewhere to promote it because you already have a community.

Finding Your Purpose and Passion

Purpose is what attracts people to people. People follow people who have a clear sense of where they are going. A clear sense of purpose is also a common trait among great leaders.

However, it is very sad to hear someone say, “I don’t know my purpose” or “I don’t know what my passion is.” In finding your purpose and passion, no one said it better than Aristotle when he said: “Where your talents and the needs of the world cross; therein lies your vocation.”

Therefore, it is fair to say that in order to find your purpose, you need to find a need or a problem that matters to you which can be solved using your talent. When those two things overlap, there lies your purpose.

What Real Talent Is

Talent also plays an important role in fulfilling our purpose. However, in order for your talent to become effective in fulfilling your purpose, we need to re-define it for it has become one of the most misunderstood words.

Our long-held definition of talent is someone who is prodigious, a genius who can do something in a very extraordinary way. This definition is an error and has placed a lot of us in boxes, living life in mediocrity and unhappiness.

What talent really is someone who never stops, someone who never gives up no matter how difficult it is. Talent, according to Sean Howard, is a predisposition for a task to be rewarding.


Becoming a happy and fulfilled web designer means being able to find your purpose. You can do this by using your talent to solve a need or problem that matters to you. You don’t have to be a genius to do this, you just need to be resilient and consistent. And this task becomes easier by having the support of a community.


Watch the video and learn more how to have a happy and fulfilled life as a web designerYou can also get a copy of Sean Howard’s book here

Powered by WPeMatico

Cards in Web Design: The Ultimate Guide

Web design is very dynamic. You can always see the web design landscape re-constructed with the emergence of new technologies, techniques, trends, and styles. Now, the landscape is changing once more with the use of the new design framework called cards.


Cards are almost omnipresent nowadays – from real estate to news websites, they are there. In fact the big names – Twitter, Facebook, and Google – are into cards already.

Cards are simply those little rectangles filled with interactive images and information. They have become the choice of a lot of websites before because of responsiveness, clear aesthetics, and usability.

However, there are a lot of misconceptions about what a card-based design is. But one thing is certain – a card is NOT just a box or a rectangle in your website. It is NOT just a design. For a certain design to qualify as a card, it must have functionality and be self-contained. If it is possible, it should also be flippable.

Perhaps, the clearest metaphor you can use for a card-based design is a pancake – it is flat, but it has two sides. That is the first criterion for a card – it has to have two sides. It doesn’t have to be necessarily flipped, but each card should contain an overview of information and more options to get you further involved. A card doesn’t just contain one piece of information but embedded with an invitation to do more.

In short, a card isn’t just about a beautiful design, but about the usability of that beautiful design.

Different Types of Card Design Styles

Cards in web design have undergone significant changes in styles since its inception. It has embedded itself as a core pattern in magazines, grids, flat design, and pin-style design formats. Despite the different techniques, it has the same basic concept and primary action – a chunk of information which the user can click through for further exploration and interaction.

Here are the different card design styles:

1. Flat Design

The earliest example of the card-based flat design was introduced by Microsoft in 2006 and based on the Metro-typography design language, which is chunky and colorful. The modern version, however, takes more of gradients, shadow, and texture of the skeumorphic design technique.

2. Magazine-Style Design

The magazine-style design needs strong visual balance because of the multiple categories of the card. It contains a block with an image and text which serve as a “teaser” to more detailed information in another page or website. As the namesake suggests, it is used by magazines and news websites but is also ideal for other content-heavy sites, like a blog or portfolio, as well as sites which are regularly updated.

3. Pin Style

Pinterest embodies this style, which became a popular trend in WordPress themes. During its early stages, the cards only contain links and specific bits of content. It has now evolved with more links and content styles including videos, forms, images, and social sharing tools. In some interfaces, cards include mini-interactions, like the Facebook notifications.

4. Grid Style

Also called the masonry style, it contains block which are connected perfectly or spaced out throughout the layout. Some designs have container-style patterns which are woven together while others showcase images and graphics in a more purist grid.

How to Effectively Use Cards in Your Projects?

There are a number of reasons why card-style architecture is popular. Some of its advantages are:

  • A lot of design styles are compatible with this format, ranging from flat to complicated.
  • It works well with different types of content. It also makes content easier to understand.
  • It works well in responsive frameworks.
  • It gives an organized and structured look for a lot of information.
  • It is easily shareable.

There is no fixed rule for this type of design architecture. However, two elements are almost always present in an effective cards in web design layout – simplicity and rich content experience. There are also other design techniques which contribute to its overall aesthetics and functionality.

Here are some guidelines you need to remember when creating a card-based design.

Space, Space, Space

A common element in a card-based design is space – white space. Plenty of white space is necessary to place a spotlight on each element so they can be clearly seen and understood.  Imagine all these elements to work in a 600-pixel area: a header, a CTA button, an image, and a link text.

Therefore, a lot of space around each element gives your users time to reset while looking from card to card. Putting plenty of padding between each element will also bring attention and focus to the card similar to how the content hierarchy works.

A Piece of Information is Enough

Having said enough about space and the elements included in each card, it is logical, then, to say that each card should only have one piece of information in it. This concept unifies both the image and all supporting text giving your design the cohesion it needs. It also makes different types of content work in the same space, looking organized and intentional. In addition, it allows your users to choose the type of content they want to read and share.

Choose a Clear, Crisp Image

In a card-based design, the image is the most important. Therefore, you need to use a great image, even when placed in a small space, that draws attention individually. If you don’t have an image, go for an art-style type or a very creative headline that will immediately attract users.

A Simple Typography will Do

Your typography should place the spotlight on your image, not take away from it. To do this, choose a simple typeface in easy-to-read colors, like black and gray. Some of the most popular typefaces are medium to round sans serif because of their neutral design feel and easy readability. It is also advisable to use only one kind of typeface in varying sizes.

Add an Unexpected Detail

An element of surprise works wonders. Try adding an unexpected detail, like a 3D effect or an angled edge, to give your design some flair and emphasis. Other techniques that prove effective are hover effects and color overlays. You could also put an effect only to the most significant parts of content to balance the visual weight of each card.

Make an Open Grid

As much as the elements inside each card is important, so is the space outside each element. Create a grid framework that contains some types of contrast as well as consistent spacing between each card to provide plenty of room for each element. This becomes even more important when you consider where breakpoints might fall in a responsive layout.

Don’t Forget Usability

Design isn’t just about aesthetics, but also about usability. Design should incite the user into action whether it is to click the subscribe button, read the rest of the article, or purchase an item. The ultimate goal of your interface is to provide easy interaction that will lead your users to any of those actions.

Aside from that, you should also consider how each interaction works, especially in a mobile platform. Therefore, you should also go beyond the clicks, and try swipes or taps instead. Also make sure that the buttons are highly visible and easy to use, with enough room between the objects to prevent touching the wrong button or action.

Best-Rated Card-based WordPress Themes and Templates

Here are some WordPress themes and templates that have incorporated cards in some aspects of their design.


Liesel – Cafe, Dining and Bakery WordPress Theme

1. Liesel – Cafe, Dining and Bakery WordPress Theme ($58)

The Liesel theme is a good example of a card-based design where you can showcase your cafe and its menu in a beautiful and professional manner using the flipcard plugin. Developed by the Dahz team, the theme comes with a WordPress customizer, revolution slider, and portfolio galleries. Although designed specifically for restaurant and food businesses, it is also an ideal theme for personal portfolios.

Liesel Theme Best Features:

  • Portfolio post type
  • Parallax and page loader
  • Visual composer plugin
  • Multiple website layouts
  • Customizable sidebar and footer
  • Fancy header

View Demo and Purchase Theme Here


2. Flatoo – vCard, Resume, Personal WordPress Theme $48

Flatoo is a minimalist theme designed by Theme -Squared as a professional and multipurpose v Card to place your personal information in. Whether you are a creative, a tech person, or a businessman, the theme is a good start to create an impressive resume online.

Flatoo Theme Best Features

  • Drag and Drop Page Builder
  • 3 Fully responsive layouts
  • Animated Image Grid background
  • Full-width background slideshow
  • Filterable portfolio
  • Pie chart skills

View Demo and Purchase Theme Here


AWSM – Responsive CV Portfolio Template

3. AWSM – Responsive CV Portfolio Template $14

AWSM is a funky and hip theme ideal as a CV or portfolio template. It contains different kinds of color schemes which will allow you to present your profile in a professional way. Other features that add to the professional feel of the theme are CAPTCHA and Google maps as well as CSS3 and jQuery animations.

AWSM Theme Best Features:

  • 8 Color themes
  • Support for Google fonts
  • Filterable portfolio
  • Awesome Skills box
  • Awesome Projects box
  • jQuery Responsive Colorbox Gallery

View Demo and Purchase Theme Here


4. Spa Lab – Beauty Salon WordPress Theme $58

Created for hair salons, wellness centers, and other healthcare businesses, Spa Lab boasts of advanced features, such as menu card designs, shop and product, reservations, and many more. It also comes with powerful theme options to help you with your branding. The theme helps you create gallery pages for treatments, spread news using the blog, capture leads with news letters and special gifts.

Spa Lab Theme Best Features:

  • One Click Dummy Content Import
  • Unlimited Layout
  • Therapists / Procedures Pages
  • WooCommerce Shop
  • 600+ Google Fonts for body, header, menu
  • Viusual Shortcode Generator
  • 20 Preset Skins and Unlimited Color variation
  • Column management for every page & post, global settings also available
  • Sidebar Manager

View Demo and Purchase Theme Here

Sponshy – HTML5 / CSS3 Resume Template

Sponshy – HTML5 / CSS3 Resume Template

5. Sponshy – HTML5 / CSS3 Resume Template $14

Sponshy has received an honorable mention on AWWWRDS for its responsiveness, clean design, and easy customization. Even its clients praise the theme for is clean and organized code. You can choose from three different styles and 14 pre-defined color schemes. It also comes with Mailchimp integration as well as a Flickr, Dribble, and Twitter feeds.

Sponshy Theme Best Features:

  • More than 600 icons
  • Font Awesome 4.2.0 integrated
  • Bootstrap 3.2.0 compatible.
  • Valid HTML5 Markup.
  • Smooth scroll.
  • Pricing tables.
  • Animated position text.

View Demo and Purchase Theme Here

Screen Shot 2015-07-23 at 1.45.35 PM

Voxr – Responsive vCard WordPress Theme

6. Voxr – Responsive vCard WordPress Theme $38

Voxr is a fully responsive WordPress theme which works well with different devices, such as tablets, mobile phones, and desktops. It comes with demo data to let you set up your blog easily and an Admin Panel for fast and easy customization. It also has 6 pre-defined colors as well as an unlimited color option to help you customize your theme and make your own brand stand out.

Voxr Theme Best Features:

  • Bootstrap 3
  • 2 custom widgets
  • More than 30 custom shortcodes
  • Animations
  • 6 predefined themes & 12 predefined Patterns
  • Using jQuery
  • Lightbox

View Demo and Purchase Theme Here


Selfy – Responsive & Retina Ready WordPress Theme

7. Selfy – Responsive & Retina Ready WordPress Theme

Selfy is a theme that aims to promote you and your brand minus the technical hassles. Theme Canon especially designed this theme for those who do not know how to code and have little or no web design or development background. It comes with a video tutorial to walk you through the setup in a short time.

Selfy Theme Best Features:

  • 2 Alternative homepage layouts
  • Full color and brand control
  • Full screen slider
  • Smart WordPress features
  • Blog and post options
  • 4 Different gallery styles
  • Flex gallery plugin slider

View Demo and Purchase Theme Here


AgriTourismo – Responsive WooCommerce Theme

8. AgriTourismo – Responsive WooCommerce Theme $58

Although AgriTourismo is specially designed for wineries, it also works well with other businesses, such as an eCommerce store or a travel agency. The Page Builder allows you to choose from sliders, Twitter widgets, social share buttons, and many more. It also has a Visual Composer which allow you to drag and drop each element, saving you a lot of time.

AgriTourismo Best Features:

  • 11 Different Blocks
  • Drag and Drop  Interface
  • Layer Slider
  • 170+ 3D and 2D hardware accelerated transitions
  • BuddyPress Ready
  • WooCommerce Ready

View Demo and Purchase Theme Here


Doctype Persona – Responsive vCard Template

9. Doctype Persona – Responsive vCard Template $9

The Doctype Persona is a simple yet elegant business card template which has incorporated the card design to present your portfolio in an organized and professional manner. It has a reordering and sliding effects as well as contact information and resume page. If you are looking for a template to impress prospective clients, the Doctype Persona is a good one to start with.

Doctype Persona Best Features:

  • 8 Different Background Patterns
  • Skeleton CSS Framework
  • jQuery Enhanced
  • Unlimited Color using LESS
  • Compatible with all major browsers

View Demo and Purchase Theme Here


Doe – Responsive Resume HTML Template


10. Doe – Responsive Resume HTML Template $14

Doe is another one-page HTML template which incorporates the use of card-based design in some of its features. The theme has a modern concept designed to impress clients and employers including sections that highlight each of your skills and work.

Doe Theme Best Features:

  • 2 Layout Variations – Slider Parallax / Video Parallax
  • Skeleton Framework
  • One Page Parallax Design
  • Working Contact Form
  • Responsive Design

View Demo and Purchase Theme Here

Categorizing Your Cards

After you have all the design sorted out, the next big question is what kind of information or content will you put in those cards. Some of the questions that might arise are: Should the information be grouped by type or subject? In which category does this FAQ belong to? The best way to do organize all these content in a user-friendly way is through card sorting.

You can do this using pen and paper or you can use card sorting websites, like ConceptCodify or Optimal Workshop. Each has their own advantages and disadvantages although the traditional method has a personal touch to it. If you decide to use the offline card sorting method, here are some tips to consider:

Prepare Your Cards

Create a spreadsheet that lists all the things or items you are going to test. These can includeproduct categories, labelsm, or pages in a site map. Write each of these items in a single card and place a number on the opposite side. If you are going to create a vast system, break these tasks into chunks.

Choose Which Process to Use

When organizing and analyzing the results, you can choose whether to run an individual or group session. Your choice will depend on how complex the system you are building as well as the time and budget you have. If you are going to run a group session, the most ideal number of participants that will yield a statistically useful result is at least 15 people.

Look for Participants

Once you have all the tools and the process ready, it’s now time to look for participants. Look for people who are already website users or those who are familiar with the niche or system you are trying to build.

Get Everything Ready

Before the card sorting session starts, provide clear instructions to the participants. Explain that you want to organize the cards into groups that make sense to them and that there are no wrong or right answer. As the session progresses, you can also act as a moderator and answer questions that the participants might have.


Once the sorting process is finished, it’s time for analysis. Understand the trends and things that correlate with each other by looking for items that appear most together, newly formulated labels, items that were placed into more than one grouping, and items which the participants had a difficult time classifying.


Cards are one of the most flexible layout formats which create a consistent user experience. They are also aesthetically pleasing to the eyes. And because users are constantly looking for ways how to get more information quickly, card-based design delivers it quick and easy.

Powered by WPeMatico

10 Reasons Why You’re Not Getting Enough Clients

One of the advantages of being a freelance web design professional is you are free from the 9 to 5 grind aside from being your own boss. However, after being one for a certain period of time, you might be wondering why you can’t seem to get the breakthrough you’ve been expecting – that is getting enough quality clients.

no client

You have the skills, you know the tricks, you’ve done all the suggestions and advice you can get. Or have you?

This is one of the biggest struggles or dilemma any freelance web design professional has. So what is the real reason behind it? Let’s look at 10 common but often overlooked reasons why you’re not getting enough clients.

1. You are not networking.

When you have done a good job, your clients will turn into raving fans and become your spokespeople, right? There’s a certain percentage that this can happen. However, you should also consider the possibility that these satisfied clients might keep you to themselves. If this happens, what’s your Plan B?

If you don’t go out and market yourself either online or offline, how can other potential clients know about your existence? It also helps if you collaborate with other web design professionals – you don’t just gain clients, but you also gain new insights.

2. You are not consistent.

Any marketing campaign becomes successful when it is consistent. A good initial conversation with potential clients is meaningless if you don’t follow-up. Many opportunities are lost because professionals lack consistent follow up in their network. You can build consistency and therefore get enough clients by constantly creating positive conversations through email, social media, or offline.

3. You have nothing unique to offer to potential client.

In the world of freelancing, it has always been a race to the bottom – whoever offers the cheapest price wins the project. Why? Because everybody offers the same service and skills. Some can even do it faster than you do. Unless you stand out and have something unique to offer, you won’t turn your customers into raving fans and get the referrals you want.

4. You have nothing valuable to offer.

Something becomes valuable if it is desirable. You add value not just by offering something unique and excellent, but also by building relationships with your client. Everyone wants to know that somebody cares for them, especially when they least expect it. Your clients feel the same way – a small thank you note or a message asking them how they are makes a lot of difference.

5. You have a weak online presence.

It is a fact that when a potential client is looking for someone to design their website, they will ask for referrals. It doesn’t stop there, however. They will definitely check out each of those referrals’ profiles online for a background check. If you forgot to keep your online profile up-to-date, you might lose potential clients because of that.

6. You haven’t identified the specific client you want.

What kind of people are your dream clients? Does your website or profile has a message that deliberately convey that to the clients you want to attract, or are you still trying to be the jack-of-all-trades? The message on your profile or your website is a powerful tool to educate people about the type of clients you are looking for.

7. You are looking in the wrong places.

Networking is a good way to build your influence. However, if you are looking in the wrong places, you are also wasting your time. It means that instead of networking at general-type events, it pays more to network at events within the web design industry in order to find the right clients.

8. You have stopped upgrading yourself.

You are only as good as the last project you had. New technologies, tools, and strategies are being developed regularly. If you don’t take the time to keep yourself in step with these new technologies, trends and tools, you are driving yourself to extinction. Take time to learn and upgrade yourself, so you can add more value to yourself.

Might it be suggested to start off by investing into this ebook “Never Run Out of Projects Starting Today”. Pardon the shameless plug, but it’s guaranteed that this will help you upgrade those business and technical skills.


This book includes ten in-depth discussions and examples on the following topics.

1. Getting Steady, longterm projects
2. Placing up a Portfolio that Sells
3. How to Price Yourself
4. Connecting on Social Media
5. Advertising on Job Search Sites

6. Where to Get Clients Offline
7. Where to Get Clients Online
8. Creating Your Design Proposal
9. Creating a Client-Designer Contract
10. Client Management and Organization



9. You are using the wrong marketing tactics.

Are the techniques and strategies to reach potential clients the most effective ones available to you? Are they the most appropriate for your target market? Do they match the skills and expertise you have? Use these questions to assess your techniques and strategies. If they do not work, it’s time to change them.

10. You appear desperate.

You need clients, but you don’t have to show how desperate you are to have one. Potential clients can sense if you are overly desperate about getting the project. Desperation can either attract the wrong clients who will abuse that desperation, or drive them away because of distrust why you have no clients. Instead be confident and be natural when talking to potential clients. Show them your expertise confidently.

Sadly, That’s Not All of It

And it cannot be stressed that a list of ten things cannot help you get more clients overnight. It takes constant practice, sacrifice and investment to build a steady flow of clientelle. You can learn much more through building your knowledge, and really putting money where value is provided.

Yes, the ebook, “Never Run Out of Projects” was mentioned, but if you’re not convinced that that is value enough, maybe you would also like to check out the video course version of the book.


Getting clients and keep them for the long term is difficult. What you say and do not say will greatly affect how you attract potential clients. However, once you know what’s stopping you, you can change strategies and fix mistakes you have been making.



Powered by WPeMatico

How to Have an Impressive Web Design

While it is true that some people maintain a website just to share to other individuals their passion and talents, it can’t be denied that websites are primarily meant for business. This is the reason why it is important for you to come up with an impressive web page design that is not just appealing to the eyes but provides ease of navigation to those who visit it.


Learn how to have an impressive web design

For many people who visit your client’s page, the website is the physical store. Because of this, wouldn’t it be proper for you to make it more enticing and customer-friendly, in the same way, that you would do if you were an architect of a physical store? Hence, it makes a lot of sense why you should plan your client’s web page design carefully.

However, don’t be tricked into thinking that you just need to focus on your landing page. An impressive web page design is more than that. You also need to factor in the general workflow of your page so that it will not only be visually appealing but functional and easy to navigate as well. Here are some of the most important tips that you can follow to have an impressive web page design:

1.Visualize, Plan, and Jot Down Your Thoughts

This may seem obvious, but many designers immediately sit in front of their computers and work on the design of their web page with the help of Photoshop. Yes, in this era when things can be easily done digitally, it is still best to start your web page design with the use of pen and paper. Nothing can be a better start than this. Visualize what you want to happen with your website. Before allowing your thoughts to tinker with the layout idea, consider first the content. Next, visualize how you would like the layout to look like. This will involve a lot of hits and misses, so it’s best to work on this aspect with the use of pencil and paper. After which, ask yourself how you would merge the layout with functionality. Again, this will engender a lot of trial-and-error until you can finally get what you want.

2. Consider the Top Level Framework First

When making your initial sketches, one of the most important things that you need to consider is the highest level of the framework that will solve or even avert the design problems that you may encounter along the way. This means that you need to pay attention first on the UI (user interface) before considering the UX (user experience). You have to remember that the UI design process will involve the following stages:

  • Capturing user experience. This will involve the studying of use cases, aims of users, and common problems.
  • Coming up with a UI pattern that is in conjunction with the UX but is not necessarily limited to its UX.
  • A visual appeal that prioritizes the parts correctly.
  • Usability tests.

3. Include a Grid to Your PSD

Yes, it sounds basic. Prior to beginning your design with the use of Photoshop, you need to have a grid that will serve as your guide. You may opt not to use a grid, although there is no sensible reason why you shouldn’t, but rest assured that the result of the design without the help of the grid will not be as impressive as it should be if you use one. This is because the grid will guide you mount your would-be layout on different areas. Additionally, it will direct you to the recommended screen size as it assists you to come up with templates that are not only responsive but are also in conjunction with spacing and other issues associated with design.

4. Determine the Typography that you will Use

Although it is generally true that you shouldn’t use more than two types of typefaces for your web page design, you always have the choice to go for more or even less. However, regardless of your choice, always remember to go for a font that is easily readable, especially when used in lengthy texts. Be brave with your experimentation. If you think bold fonts are necessary, go for it.

5. Identify Your Color Theme

Apart from paying attention to the type of font that you will use, you should also be keen on the types of color that you will use. As much as possible, don’t go beyond 4 colors. Generally, you should only choose 2 main colors that are clear and bold, and the 2 other colors should complement the 2 major colors. In the event that you’re tempted to go for more colors, just make sure that you don’t go for more that are under the same hues. It would also help if you provide an ample white background so that the eyes of those who will visit your website will be relaxed.

The following are some of the most important tips that can help you choose the right color combination for your website design:

  • Refer to the branding of your company. Referring to your client’s company color scheme is one of the safest ways for you to pick the right color for your website. If not, you can use it as your reference to look for other colors that will complement and match the color(s) of your company.
  • Base it on your content. Another thing that can guide you to pick the right color for your website theme is to base it on the subject of your infographic. For instance, if your infographic is about apples, you can play with the shades of red. This will make the information of your infographic more attuned with your theme.
  • Get a hint from nature. You can also pick your color choice based on nature. You may pick the colors based on the seasons. Whatever your choices will be, as much as possible, they should not exceed more than four.

6. Divide the Layout

Always remember that the simpler the structure of your website is, the easier it is for those who visit it to navigate. You should make sure to establish a link between the reason behind the layout and its impact on those who will use it. Likewise, make sure that the kind of layout that your website will have can help in highlighting its most important aspects. The trick here is to come up with the simplest form of layout for the simplest purpose. As you go on, you can add more components that are, likewise, important.

The following are some of the most commonly used web page design layouts that have never gone out of style over the years:


A blog using the Two Column, Wide Header layout

Two Column, Wide Header. Without question, this is the most common layout that you will find on the Internet. This is already a classic and impressive web design. This layout consists of a wide header that is usually 960px long and has two columns: one is wide, and the other is narrow. The narrow side primarily functions as the navigation panel. More often than not, in blog sites, the navigation column is placed on the right side. Uncrunched makes use of this layout.


Gary Vaynerchuk adapts the Three Column, Wide Header layout

Three Column, Wide Header. For you to imagine this easily, this is the layout used by WordPress and Blogger. If you are not sold to the idea of going for the above-mentioned layout, this is your next best option. As its name suggests, this layout is made of 3 columns. The two narrow columns are often used for navigation purposes while the wide column is where the content is placed. A wide header is found on top of the columns. See Gary Vaynerchuk’s website to know how this layout looks like.


Flickr is impressive with the Four Boxes layout

Four Boxes. This layout is most common to products and news blog sites. It comes with a wide header that runs from end to end, another wide box that also serves as a header, and three columns that evenly occupy the screen. The large box is usually used to showcase the products of a website or where the articles are placed. The 3 columns can be used for product information, or secondary articles. This layout is used by Flickr.


Siete de Febrero is a good example of an Undefined Grid Layout

Undefined Grid. This layout is heavily inspired by the common grid layout. It has a site-wide header that contains the navigational elements that are spread across the width of the site. Siete de Febrero is one website that has embraced this layout.


The Paper app landing page is a good example of the Large Screenshot layout

Large Screenshot. This layout includes a large screenshot that is placed immediately below the header. More often than not, there are between 2-4 grid-based boxes after the screenshot. It is in these boxes where more information about a product are placed. Ex. Paperapps uses this layout.

Single Column. This is a favorite layout of many microblogs that embrace the principles of minimalistic design. The single and center column is narrow and has a footer where navigational elements are placed. Tumbler uses this layout.


Instagram is one of the popular apps using the Featured Image layout

Featured Image. This is most popular to smartphone app developers. This layout involves the use of a large image in either side of the page and a single column where the content is placed. Instagram is one example of a design that uses this layout.


Gawker presents information using the Fixed Sidebar layout

Fixed Sidebar. As its name suggests, this particular layout makes use of fixed sidebar where all the navigation elements are found. On the other hand, its primary column contains all the content. Gawker is the best example of this layout.


Dialectica Studio tells their story in a Grid Based Gallery

Grid Based Gallery. Many designers and photographers go for this layout as it also serves as their portfolio site. This involves the use of a header, heading, and a photo gallery that is grid based. Check Dialectica Studio to have a concrete idea on how this particular layout looks like.


Nothing represents the Magazine Style layout than the New York Times

Magazine Style Layout. This layout is the most ideal if you want your website to be visually rich. Generally, the content of this layout is arranged according to their freshness. The freshest stories/ articles are placed in the largest box just below the header, while the older articles are placed in the second box. Other contents of the page are placed in the smaller post box. New York Times uses this layout.

7. Innovate and Challenge the Established

One of the major things that you need to bear in mind is that, as a designer, it is your responsibility to define the ease of navigation of your website. At times, this may call you to challenge the norm. For instance, would you still need to include a search option in your design? In the past, it may have been necessary. However, these days, in many cases, the answer is a resounding “no”. Think of other things that are existent in many websites. Do you really need those as a component of your web design? It is of vital importance that you assess the current designs and challenge their importance. Your answer can help you come up with a design that is apt for the need of the current times.

8. Outdo Yourself

Never rest on your laurels. Yes, this adage still applies to web design up to this very date. Just because the last web page design that you have had was a bang up, this doesn’t mean that you can do the same approach again. Apart from challenging the conventional designs, it’s also best for you to challenge yourself. Always push yourself to the limits to come up with an impressive web design that is not only visually appealing, but is functional and relevant to the present times. Explore the possibilities.

9. Be Attentive to the Details

This does not only apply to web designing but in all jobs. However, as a web page designer, it is of high importance that you pay attention to every bit and detail of your design. Does every component look good? Are they placed in the most ideal places? Do the color of the images jibe? Won’t a particular component affect the loading of the page? These are just some of the questions that you need to ask yourself as you progress with your design.

10. Give Each Component Equal Importance

You have to consider all the components of your design with equal importance because, when you come to think of it, they’re not there if they are not needed, right? What sets one component apart from the other is the degree of importance, but on the whole, they all play an important role. Hence, make sure that you design each in a way as if it were the only one that you are working on. It’s like paying attention to all the ingredients that you will use in a dish. You know that you should only pick the freshest and the best, because if one is of poor quality, it may affect the overall outcome of your culinary creation.

11. Enhance your Design

More than the aesthetic aspect of your design, there are certain things that you need to closely pay attention to and enhance. For instance, if you want your website to be devoid of blurry pixels, you need to ensure the contrast between the strokes and background colors. Of course, there are many other things that you need to pay attention to, apart from this. The bottom line is that you need to reassess all the inclusive components that you have come up with. All.

12. Keep your PSDs in Place

Regardless of the size of the website that you are working on, you need to make sure that your PSDs are well arranged. You may not realize the importance of this in terms of speeding up the process of designing and sharing files with others who are also working on the design of the website.

13. Consider All the Medium

One of the most important things that you need to pay attention to is the varying mediums where your website will be used. You might design a website that can easily load on desktops or laptops, but have you considered its loading capacity in mobile phones and tablets? Hence, don’t only focus on the conceptual aspect; always take into consideration the technical aspects, too. Build it under the best case scenario as you take into consideration the worst case scenario as well.

14. Go on Loving your Design until You Hate It

Many designers actually do this. They keep on gazing on their design, feeling proud of themselves until they get to a point wherein they can notice even the slightest flaw that they have made. Admiring their work eventually leads them to wanting for more, even to the extent of being their work’s own staunchest critic. Is this bad? Of course, not! This is one way of bringing yourself to pay attention to the slightest details of your design. This also leads you to challenging yourself to do better. This is not only true to web page designing. How things are done may be different with other jobs, but the practice should be observed in all fields.

15. Coordinate with your Client Every Now and Then

Many designers make a mistake of spending too much time in designing a webpage based on their personal taste and without taking into consideration what the client really wants. As a result, because the design that they come up with is not in line with what the client wants, all the time and effort that they have spent in coming up with the design end in smoke. It’s a given that clients instruct their designers what they want. The problem arises when there is lack of communication between the designer and the client as the latter bases his design on his interpretation of what the client wants. Hence, every now and then, make it a point to coordinate with your client to make sure that you are on the right track.

16. Coordinate with Your Developer

Just like many web page designers, web developers are also some of the most hardworking individuals on the planet. Nonetheless, they are some of the most secluded people in the process of website designing. Sure, it is not their job to work on the design of the website that you are developing. However, do you know that they are some of the most creative people that you neglect? In fact, the knowledge that they possess can help you come up with a design that really rocks. Therefore, before you begin your website design, make sure to encourage the web developers to pitch in their ideas. This will not only enable you to come up with a design that can be fully actualized; it can improve your camaraderie, too.

17. Simplify Your Explanation

When presenting to your client, make sure that your explanation is in black and white. If possible, speak a language that will make it easy for him to understand. You have to bear in mind that your knowledge and terminology in terms of web design are not necessarily on the same level with that of your client. You may be better than him in this regard. However, you should not take the chance to rub it on his face that you are better. Ensure that everything is understood so that the design that you will come up with is in accordance to what he really wants. Additionally, if there is something that he doesn’t approve of, it can be easily tweaked. You can save some time and effort in revising your work.

18. Be Open to Suggestions and Criticisms

You may think that the design that you have come up with has everything covered, and it is the best that you have ever made by far. However, you need to remember that each person has his own taste and preference. If the product of your hard work and creative juices does not fall in the good graces of other people, don’t take it personally. Bear in mind that they may see things differently from how you do. Listen to their suggestions and criticisms. After all, they may have a point that you failed to see because of your ego.

19. Keep Track of Your Design Once It is Up for Development

In order for you to make sure that what you have worked on and what the client has approved is really carried over by the web developers, make sure that you keep track of the process. Again, this boils down to coordination in order to achieve what should be done. After all, your job as web designer does not end once the PSD and styles-sheet are released. If the design that you have come up with does not sit well with the developers, for whatever technical reason they have, don’t allow them to tweak it. Ask them to give you time to revise what needs to be revised.

20. Share Your Approved Work to Others

Once your client has given the nod on your design, share it to other people who understand the nature of your work and are knowledgeable in the field. This will not only enable you to get feedbacks that you can use on your next project; it can also enable you to get comments that you can use to revise and further enhance your work upon the approval of the client.

Powered by WPeMatico

How to Hack Web Design Learning Process


How Do You Hack Web Design Learning Process?

When you say hacks or life hacks, it’s usually about shortcuts or the easy way out. These are the tricks and techniques you use in everyday life to make things easier.

In education, however, there are simply no shortcuts. Or isn’t there?

There might not be in getting a degree in university, but there are techniques to gain necessary skills and education in web design that will be beneficial to your practice and business.

Tomas Laurinavicius, founder and editor-in-chief of Despreneur, tells his secret and his experience about learning web design, developing your skills, becoming at the top of your game, and entrepreneurship through self-study.

Theory and Practice

Tomas taught himself web design when he was in high school. Later, he invested more and got a formal education enrolling in classes which combine business and design. However, he found the classroom lessons boring and continue to self-taught himself by getting resources from the Web.

So which strategy really works? Or which path should you go?

Deciding whether to get formal education or learn by yourself is a choice which depends on your end goal.

For Tomas, his interest shifted on the business side of web design – he wanted to become self-employed doing his passion. And he have observed that learning the business side in the classroom isn’t enough because it doesn’t provide him the skills and experience he needs to become an entrepreneur.

On the other hand, if you want to aim for a top position in a big agency, getting formal education is a must. Once you’re there, however, you need to focus on a certain niche and become an expert on that.

On Charging Clients

One of the greatest dilemmas web designers face, especially if you are self-taught, is when to start charging clients.

The answer is simple – If you want to add value to yourself, you have to start charging unless you are doing a project for a non-profit.

But before reaching that place, self-discipline is a very essential element. You need to have discipline to develop certain skill sets and knowledge needed as a web designer.

Developing your creative thinking skills is also a must. You need to continuously see patterns in designs and reinvent them so it would become appealing to a certain culture or group.

On the other hand, if you want to focus on the entrepreneurial side of design, you also need to gain confidence by starting to work with real people and real clients. There would be mistakes but you learn how to communicate with them and get to solve their problem.

Getting Out of the Comfort Zone

Developing your self-confidence also means getting out of your comfort zone. One of the best way to stretch your self-confidence is to constantly put your work online. This exercise breaks the mindset that people might laugh at or criticize what you have place because you think it isn’t good enough.

Contrary to that, however, is that as much as there are people who don’t really care what you share online, there are also those who take notice.

Travel can also take you out of your comfort zone because it exposes you to cultures different than your own. It also forces you to talk to people and do things you don’t normally do.


Learning is indeed an ongoing process. However, learning isn’t limited within the four corners of a room, nor it is confined in a certain place. Learning is everywhere and anywhere. The most important thing is you have to get out of your comfort zone to learn and try new things.


Watch the video and hear more how to hack web design learning processand don’t forget to share and spread the love.

Powered by WPeMatico

Quest for Disruption: Why the Web Design Industry is Ripe for a Change

Much like a shark, businesses and industries die if they stop moving. Few years ago I was managing a successful design agency in the heart of Tel Aviv and business was booming. However, not soon after establishing ourselves as a go-to agency for companies looking for design agencies, I identified several problems that were significantly hindering efficiency.


Change is coming in the web design industry

I realized that our team, comprising designers and developers, were unhappy and frustrated with the workflow. Web designers and developers were struggling to find an effective way to work together and consequently provide clients with the service the required and deserved.

Starting with the Client

I began to think of ways in which we could transform our business while benefiting the industry at large. Clients were always complaining about the lengthy design process, the high costs and the inability to truly put their initial concepts into workable design solutions.

The lion’s share of my day was spent on the phone with clients who were complaining about the high costs of changes they wanted to implement after we had already submitted the work. The changes were usually requested even after the client had already approved the final work.

Don’t Trust Me!

In Israel, trust and good relationships go a long way. Sometimes clients would simply give up on their demands and complaints about high costs because they trusted me. We would shake hands, exchange pleasantries and suddenly everything was resolved and back to normal.

Suddenly, a barrage of poignant questions hit me: why the hell should they trust me? Why isn’t the process smooth? Why am I not delivering fast quality sites without the need to talk about trust? Why is the process so complicated?

In the throes of complicated and nearly existential questions, I began to consider alternatives.

Identity Crisis

My first instinct was to follow the money trail. A whopping 70% of the budget went into the development process and coding. I then asked myself who should really be out there as the face of my agency. The answer was obvious: The designer needs to be at the forefront of the process and the face of the operation.

At this point I hit a wall. There was no chance I would put the designer in front of the customer because it would cost a fortune. Therefore, in order to create a serious alternative to the existing order,  I needed to go back to the drawing board and understand the full process, from inception to execution.

Shifting the Balance of Power

Since development took so much of the budget I began to think about solutions around this realization. Why should a design agency be at the mercy of coders? Why not take the developer out of the equation and create something automatic? Why not build something that would generate code automatically like a machine?

This is the line of thought that led to the development of the technology and the eventual founding of Webydo. Once we started, we quickly realized that it’s not such an easy task.

This of course meant, perhaps somewhat ironically. that we needed to hire a team of extremely talented developers to create a code-generating machine to allow us to put the designer at the forefront of the business.

I started speaking with techies, CTO’s, coders and all told me: it cannot be done. They argued that there was absolutely no way to take the developer out of the equation. They were convinced that there will always be a need for developers to make modifications.

At the time, some 6-9 years ago, a simple website between 5-10 pages would cost $10k.

This meant that every small or medium size business had to invest significant amounts from the annual budget in order to have a simple, branded website.

Pay for Design, Not for Technology

As part of my quest to find a solution I became fixated with the following three notions:

  1. Customers should pay only for the design.
  2. The technology should come with zero cost.
  3. Clients shouldn’t have to wait for months to get their website.

At the time, it took a lot of time and alterations to create a website and therefore we had to create something that would cost significantly less.

It’s about Designers

As part of the fundamental shift, we decided to focus our efforts around the design community.

They would tell us what they want and we would develop a product around these wishes.

We identified three types of users:

  1. Code-oriented and less visually inclined developers.
  2. Designers whose focus was only on the look and feel
  3. The amateur: their day job was neither in design or development, but built sites as a hobby, spending around 10h a month on designing websites

Our focus was to be on designers whose expertise was to work with Photoshop. As part of the focus we took a good long look at Photoshop and asked the designer community about tools they would like to see as part of the design software.

From this, I took away one nugget of wisdom: once you understand who is your target audience you understand that every segment has its own needs.

As a consequence, we decided to focus on publishing: from design to seamless ability to publish the website.

This meant that we had to divorce the hobbyists from the professionals. Professional designers live in a world completely different to that of the hobbyists and DYIers.

It’s All about Ctrl+Shift.

We decided to build the engine and users would provide the rest: what features to add and how the UX should work. We began to ask our designer community what they wanted to see in a design software. We opened a democratic type process without any preconceived notions..

The first request was to create shortcuts on the right side of the keyboard. Everyone in the office screamed that it would crazy to focus on shortcuts instead of adding new features.

But this was the highest voted feature and we decided to honor the designers’ wish.

Once we added the shortcuts, designers’ satisfaction rate went through the roof. After sourcing our professional designer crowd, we understood that a designer works with their right hand unlike amateurs who use the mouse. With professionals, it was all about Ctrl+shift.

This was a very personal, eye-opening lesson for me and my team. We realized how important it was to understand the differences between the segments and respect these differences.

Keep the Pressure at Bay

During the early stages of developing Webydo, my investors were insisting that we work with everyone, developers amateurs and professional designers. However, my counter argument was that if we were to disrupt the market, really help the professional community and how the future of design will look like, the focus had to be on the designers themselves.

Everything else could be automated.

Our designer community was loud and clear. They wanted 100% creative freedom and 85% would not suffice. This meant that our goal was to provide designers with a publishing tool that would convert any design into fully functional website. Second point of focus was a solution with technology. We understood that designers don’t care about technology, but they want technology that empowers them. They simply want to do whatever they want and do not care about the specific workings of the technology.

So, listening carefully to designers, we developed a web-powered tool without the weight of technology: this meant that we had to provide a hosting service, the purchase of domain names, billing, design, delivery and a good CMS to liberate designers from the weight of technology.

Now we had a technology that liberated the designer from the code and allowed them to focus on design while effectively servicing clients from one platform.

Our first users taught us what Webydo should eventually become: the DNA of a design business. We realized that a designer needs a mini CRM (Customer Relationship Management). Once the designer creates a site for one client and another one is in queue, the work must be archived into folders.

What’s more, designers have no time or interest to mess with hosting. We decided in the very beginning that we had to give a full service solution, or no solution at all.

New Era of Strength

Twenty years ago developers were at the front and designers were in the background. This meant that oftentimes designers were not able to deliver the vision of the client because they were not communicating with one another effectively. Because the ability to make changes to a website was not immediate and required the attention of the developers, clients often left their sites unfinished or unpolished.

Now we understand how the website acts and functions. Therefore the number one priority is to understand that the technology needs to serve the end-purpose: a beautifully designed website that meets the criteria of the client. Moreover, today we have fewer barriers for technology.

Browsers are strong which means that designers can use SaaS and integrate Dropbox, Google Drive as part of their toolbox.

Let Developers Develop and Designers Design

Following my initial epiphany and the preceding problems I identified, it’s clear that the whole industry is up for disruption. Webydo isn’t about unseating the developer, but empowering the designer. Both professions are crucial, but they should exist separately, each focusing and cultivating their own unique strengths.


Shmulik Grizim is the founder and CEO of Webydo. Shmulik has more than a decade of leadership experience in the internet industry and a passion for good design. Webydo represents Shmulik’s quest to change the way professional designers create for the web.

Powered by WPeMatico

How to Use Image-Focused Design to Increase Conversion

There have been several articles online predicting that one of the web-design trends for 2015 and beyond will include larger images. Many experts believe that larger images are important in attracting potential clients, especially if the website is aimed at selling and marketing products or services.

image focused

How to Use Image-Focused Design to Increase Conversion

When you really come to think of it, larger images can provide you a more riveting visual experience as they give you a clearer idea of what the website may be about.

They can even appeal to your emotions. Having recognized these effects of larger images, it is not really surprising why more and more websites opt to incorporate bigger and attention-grabbing images in their web design.

After all, the number of devices that are capable of displaying large images is increasing.

image-based design1

Larger images can provide a more riveting visual experience

Why Go for It?

A picture can paint a thousand words, that’s how a saying goes. While this proverb may be old, its truth still rings to this very day. In fact, design expert and professor Don Norman cited in his book, Emotional Design, that visual appearance is powerful in eliciting positive visceral responses.

Science has, likewise, proven that it is 60,000 times faster for the brain to process images compared to reading texts. This means that the kind of images you put in your website has a great impact on its ability to bait in users and entice them to avail of the products or services you have. Eye-catching images can just catch a good amount of money for your business.

Websites Which Have Gone for It and Pulled It Off

These days, there are already a lot of businesses that have adopted the image-focused design on their websites. Some of them are really big businesses while others are just otherwise. Nonetheless, there is one common denominator among them: classy web design, thanks to their being image-focused.



Uber’s images ooze with appeal, style, and drama

If you check the Uber website, you will be impressed with the large and classy photos they use. If you are not familiar with the services it offers, you may even mistake the photo as an advertisement for a high-end apparel or cosmetics. It simply oozes with appeal, style, and drama.

Southwest Airlines


Soutwest Airlines means serious business

Another business that has, likewise, chosen the image-focused design for their website is Southwest Airlines. The image used in their website, in contrast to that of Uber, will immediately tell you what business they offer. The simple-yet-large image gives an impression that they mean serious and good business.

McLellan Jacobs Kayak

Startup with impressive images

Startup with impressive images

This business may not be as big and popular as Uber and Southwest Airlines, but its website is just as impressive, or even better, than the other two previously discussed. A company that sells kayak, the website just knows how to tempt people who have the passion for paddling the waters using this narrow boat, whether for a sporting or recreational activity.

Because web designers can play with the focus, depth, and contrast of photographs, it is not really surprising why the image-focused design is becoming more popular these days. Apart from setting an enticing mood for the website, it also makes it more relevant to its niche. This trend will continue to dominate the future of web designs, much more that designers are already experimenting the use of animations and videos as well.

3 Common Mistakes of Image-Focused Websites

  • Issues of Different Sizes. One of the mistakes you need to avoid if you decide for a large image website is the resolution of the photo. You must make it a point to try different resolutions of the photo while taking into consideration the width of different browsers.
  • Loading Time.  If you use a high-resolution large image, its file size will increase. This will greatly impact the loading time of your website. Therefore, make sure to use a plugin that will optimize your website.
  • Wrong Format. Some image-focused websites face continuous loading issues because of a wrong image format. To avoid this, use GIF, JPEG, or PNG as these as standard web formats.

Should You Embrace the Image-Focused Trend?
Sad to say, though, the image-focused web design is not for everybody. You need to identify the best approach for your website. After all, a website is not just about images, is it? While it is true that the image you place in your website has a big role in capturing the attention of the users, making them stay, and prompting them to return, this doesn’t mean that it is the only thing that you need to consider. In fact, an image-focused design is not for every website.

The image-focused design is not for everybody

The image-focused design is not for everybody

Things to Consider before Deciding your Web-Page Design

1. Identify the goals of your website.

The first thing you need to consider before deciding whether you should embrace the image-focused web design or not is its main purpose.

Is it for the online marketing of the product or service that you offer?
Are the visitors already familiar with your brand?
Will it need more informative content?

These are just some of the questions that you need to ask yourself before deciding to go for an image-focused design. You have to remember that, primarily, images serve a decorative purpose and are primarily used for branding purposes.

Now, do you really need an image-focused design for your website?

2. Pick an image that is related to the brand that you want to promote.
Should you decide to go for an image-focused design, bear in mind that your website is not a photo album and must not showcase photos alone. Go for images that will resonate with the goal of your website

3. Pick a striking image.
After identifying the purpose of your website, the next step is choosing an image that will surely capture the attention of those who will visit your page.

You may want to consider the use of magical realism and hand-drawn images that are beginning to influence web designs this 2015 and will surely continue to do so next year. You may also opt for the use of cinemagraphs.


While it is true that the web-design trend for 2015 and, most likely, for the coming years, is an image-focused web design, sad to say that this is just not for all websites. There are certain things that you need to take into account before embracing this trend.

Powered by WPeMatico

How To Use Bootstrap Mindset For Web Designers


How Do You Use a Bootstrap Mindset?

When we think of bootstrap, the first thing that comes to mind as web designers is a computing technique or a popular HTML, CSS, JS framework for developing responsive, mobile-first projects on the web.

Another definition of bootstrap, on the other hand, is the ability to get yourself in and out of a certain situation using whatever resources you have.

If you look at the principles, though, they are almost similar – both make use good use of whatever they have on hand.

What Really Is a Bootstrap Mindset?

According to Joel Zaslofsky, a bootstrap mindset is being connected to a lot of friends and communities, where you bring people together and you help each other. It is for people who want to collaborate with each other instead of competing with each other.

Joel added further that having a bootstrap mindset does not focus on making money, but more on making an impact to others – of people thanking you because you have been generous enough to help them.

You might think that getting thank yous from people will not work for you because you also need to live and pay the bills. Joel was quick to add that it is becoming a resource to people. By becoming a resource, you can also gather resources to yourself as well.

Re-defining What Resource Is

Often times, we have this mindset that we do not really have something to give to other people. The excuses we often give are: I have no money, I have no time, I have no time, I don’t have the motivation, etc. You will be surprised, however, that even in the world of business, people do not really need a lot of money.

What a lot of people need today is motivation, accountability ally, or someone to help them in their struggles. For example, a startup company might have all the technical team in place and a practical know-how, but they have difficulty waking up in the morning and be excited about what they’re doing.

However, if they know that you are going to call them and do what you have promised to do yesterday, that alone has a big impact on them. By doing that, you become a resource to them, someone who provides the motivation they need and someone who becomes an accountability partner to them.

In short, a resource is not about doing something for yourself, but doing something for someone because you made a promise to them.


There’s really nothing fancy about a bootstrap mindset. It is simply becoming a resource to others. It also means becoming a connecting bridge to others so that they can collaborate instead of compete. As a web design professional, there is nothing more satisfying at the end of the day than in knowing that you have helped someone and provided the much-needed boost they want.


Watch the video and hear more how to adapt that bootstrap mindsetand don’t forget to share and spread the love.

Powered by WPeMatico

50 Books Web Designers Should Read

Learning is constant. As web design professionals, you have to be constantly in the know about the latest trends and technologies in web design. Aside from those skills, you also need to develop other aspects of your life in order to achieve a good work-life balance in order to succeed.


That is why you might be surprised that a lot of these books in our list don’t just focus about web design, but also about business, self-improvement, and more.

Here is our list of books to draw inspiration as well as learn important principles from. You might have read some of them while others might be new to you. Pick one or a few of them from the list, sit in your favorite chair, or go to your own private space, and get ready to learn and be inspired.

1. Steal like an Artist: 10 Things Nobody Told You about Being Creative

This is a simple and quick read about getting inspiration and coming up with ideas. The book also tells you that inspiration is everywhere and creativity is for everyone, not just for the genius or multi-talented. It says that creativity doesn’t necessarily mean being original, but a combination and collaboration of existing ideas and turning them into novel forms.


2. Don’t Make Me Think: A Common Sense Approach to Web Usability

Steve Krug tackles web usability and the interaction between humans and computers, stating that a website should allow users to accomplish what they want to do as easily and directly as possible. He also gives very helpful tips how a simple tweak can enhance a website’s usability.


3. LinchPin: Are You Indispensable? 

A linchpin, according to Seth Godin, is someone in an organization who is indispensable, valuable, and irreplaceable. This book teaches principles and ideas how to become a linchpin by becoming an artist who does emotional work. By emotional work, he explains, is work that matters to you, work that you are willing to sacrifice all other alternatives. When you do this, you become passionate and accountable to the choice you made.


4. Where Good Ideas Come from

Steven Johnson states that all useful inventions are good ideas. Then, he uses them to stimulate his readers’ minds by asking where these good ideas come from and what kind of environment breeds them. He identifies seven key patterns that result in genuine innovation. What’s interesting is his section on errors which lead to accidental innovations and inventions, such as the computer. One brilliant takeaway was his reminder about “being right keeps you in place, and being wrong forces us to explore.”


5. Neuro Web Design: What Makes Them Click?

Susan Weinschenk talks about how various website features affect the user’s brain. She stated that our buying decision is greatly influenced by our unconscious – based on our emotions and automatic triggers. This insight greatly helps a web designer how they should design the website, and how they should combine and incorporate all other features that will influence the consumers’ unconscious and increase conversion.


6. Everything I Know

Paul Jarvis needs no introduction in our 1WD community, and we know that his ideas are golden nuggets not only to web designers but to almost everyone. The book reflects his personality as he combines different interesting anecdotes in his freelancing career with practical tips and ideas to help you conquer your fear and reach your highest potential not only as a person but also as a web design professional. He also challenges his readers to embrace vulnerability, be true to yourself, and settle for nothing less.

7. Start with Why: How Great Leaders Inspire Everyone to Take Action

It’s not really about web design, but about leadership. Simon Sinek answers the question why some people and organizations more influential, innovative, and profitable than others. He used several examples of people who stand out – the Wright brothers, Steve Jobs, and Martin Luther King were just a few. They are no different from others, nor are their ideas, but why did they stand out? One reason Sinek gave was their ability to inspire and motivate others. If you want to stand out as a web designer, this is a must read for you.


8. Mobile Design Book

This is a book by designers for designers. If you are also into mobile app development, then this is a good read. The book talks about mobile design principles that make apps successful. it’s not limited to operating systems, as web design is evolving, we’re having responsive design, not an option but a must, principles in the book will help you understand how to design websites for smaller screens


9. Design for Hackers: Reverse Engineering Beauty

A comprehensive guide about design principles and elements, from the purpose of design to color. David Kadavy used “hacker” as a reference to a “renegade group of entrepreneurial-minded people who are changing how we work, live, and interact. He adds that a hacker strives to learn in order to achieve his vision, is curious, and is entrepreneurial, just as we often encourage members of the 1WD community.


10. Hooked: How to Build Habit-Forming Products

One of the goals web designers want to achieve for their clients is to increase website conversion. In this book, Nir Eyal helps you achieve that by teaching you to look at underlying patterns in technology and how they are utilized to hook us. Once you become aware of these patterns, you can incorporate them into your design to enhance user experience and increase conversion.


11. Choose Yourself

How often have you made mistakes as a web designer? Mistakes are inevitable, and they are necessary. When it comes to mistakes, James Altucher is no stranger to them, using them as examples in this book to encourage his readers that these are normal and feeling like a failure at some point is also normal. However, when you begin to choose yourself for success, when you’re honest and open about the real you and your authentic passions, you jumpstart your success.


12. The Smashing Book #4 – New Perspectives on Web Design (Smashing Special eBooks)

If it’s from Smashing Magazine, it must be something good, right? Right. This fourth eBook installment talks about the mistakes most websites make and a solution for each of them. The content is easy to understand and provides priceless input about web design perspectives.


13. The Design of Everyday Things: Revised and Expanded Edition

This is a very old book written 25 years ago, but its content and principles remain relevant even until today. Don Norman talks about the relationship between design and human interaction. He also gives important lessons on the concepts of discoverability, affordance, signifiers, feedbacks, mappings and constraints.



14. Designing Web Interfaces: Principles and Patterns for Rich Interactions

This book provides information how to create great user experiences. Bill Scott and Theresa Neil were instrumental in designing UX for Yahoo and Netflix for years, so they know what they are talking about when they say UX. Here, they present more than 75 design patterns for building web interfaces that provide rich interaction. So if you’re looking for practical tips or just inspiration, you can start with this book.


15. The Principles of Beautiful Web Design

This book is another easy read and is ideal for those who are starting out as web designers. On the other hand, it can serve as a refresher on the basics of web design with topics that tackle color, typography, imagery, and texture. It also includes a lot of examples to make each point easier to understand and apply.



16. Creative Workshop: 80 Challenges to Sharpen Your Design Skills

Running out of inspiration? Creative workshop is full of exercises for practice and exploration to help you discover which processes work best for you. It is perfect for budding designers as well as for those who’ve been in the industry for a long time. Design agencies can use this to provide a challenge for the team.


17. Exceptional Service, Exceptional Profit: The Secrets of Building a Five-Star Customer Service Organization

As we often say here on 1WD, you are not just a web designer, but also an entrepreneur. This mindset is very important if you want to succeed and last in the industry. As a web designer, your clients are important, especially their loyalty. Why? Because loyal customers are less sensitive to price competition, more forgiving of small glitches, and, ultimately, become “walking billboards” who will happily promote your brand.


18. Adapt: Why Success Always Starts with Failure

Tim Harford boldly declares that there is no such thing as ready-made solutions.  He said that even expert opinion isn’t enough to help you tackle your problems. In short, we have to re-learn everything we know about solving problems – we need to ADAPT. This book tackles different issues we face in the present world and explains the  necessary ingredients for turning failure into success. If you want to survive and prosper not only as a web designer, but in everything, this is a must-read.


19. A Practical Guide to Designing for the Web 

Already a popular figure in the web community, Mark Boulton created a no-nonsense guide for designing websites using the principles of graphic design. Boulton explains the  academics of typography, layout, colour theory and grids. For each theory he shows when and how this applies to the web, and even when to be crazy and break the rules to make it even better. Just make sure you learn the rules before you break them.



20. Universal Principles of Design

This is a great reference book written by William Lidwell. It is accompanied by images and explanations to help you better understand a lot of design concepts and principles, from the 80/20 rule to 100 different design concepts. The book has been translated to 16 languages.



21. HTML and CSS: Design and Build Websites

Most books about CSS and HTML are boring, even to web design professionals. Jon Duckett takes a fresh approach to make the book interesting without watering down the essential information  you need to know about HTML and CSS. This is a good investment for those who really want to know about coding.


22. The Elements of Typographic Style

Want to know more about typography? This book by renowned typographer Robert Bringhurst gives you more insight to the beautiful art of typography. He explains the history and theory of typography along with practical examples. He also introduces new innovations and techniques in font technology, making this a must read for anyone who wants to integrate beautiful typefaces to their websites.


23. Responsive Design with WordPress

This book by Joe Casabona is  for those who are trying to learn how to create repsonsive themes and plugins. A good read for those who are learning WordPress for the first time.




24. Bulletproof Web Design

Dan Cederholm, the author of Web Standard Solutions, brings yet another easy-to-read book on web design problems  and offering ways how to solve them. Then, he delves deeper by pointing out the weaknesses and strengths of each solution, and offers a solution that follows the best practices. If there is no clear-cut solution to a certain problem, he candidly tells his readers and allows them to decide for themselves.


25. The Laws of Simplicity

John Maeda writes in the premise that “simplicity is sanity.” He explains the 10 principles of simplicity which applies to almost any aspect of life, especially to product design. He advocates few buttons, few features, and few distractions while providing practical solutions and strategies to optimize the power of simplicity.



26. Good Strategy, Bad Strategy

If you have or are thinking to have a web design agency, this is a book to help you identify what good strategy is. The book says that most organizations don’t have good strategy because, in the first place, they don’t have one. Instead, most organizations have visions, or mistake financial goals for strategy, or have a hodge podge of conflicting policies and actions.



27. Nudge: Improving Decisions about Health, Wealth, and Happiness

The book title says it all. From time to time, each of us needs a little nudge to make wise and better decisions. You might think that the book is irrelevant to you as a web designer, but you’ll be surprised to find that there’s more to it to help you as a web design professional.



28. The Tipping Point

This is another book that is not directly related to web design, but will surely broaden your perspective as a person and also great lessons you can apply as a web designer. One of them, as the title suggests, is how little things make a difference. Malcolm Gladwell also discusses how things become very difficult and reach a tipping point, but suddenly things turn around and start taking off.


29. Rework

Rework has received both good and bad reviews and both camps give “candid” reviews about the book. Reviews aside, the book draws some real-life experiences from the group that created Basecamp. They talk about changing how businesses are run and the tools they use to achieve the work. It also emphasizes that you can basically start a business by maximizing free tools available on the Web. A must-read if you’re looome tips about building your business.


30. Made to Stick

Ideas come and go but there are some ideas stay with us for a long time. Why do these ideas stick? This is the question asked by Chip and Dan Heath in their book. They continue to explore the idea how to make ideas stick in people’s consciousness. This is the same question web professionals, social media experts, and business owners ask themselves. This is the right book to find the answer to such questions.

31. Rocket Surgery Made Easy

This is another book by Steve Krug and some sort of  a follow-up for his Don’t Make Think book. Here, Steve Krug discusses how to test any design, find the most important problems,  and provide the easiest solution for that problem. It encourages teams to test early and regularly so they can spot and fix the problem immediately while it is still manageable.


32. 100 Things Every Designer Should Know about People

Why do we design? This is the question that Susan Weinschenk tries to build upon in this book. She explains the real reason why we do what we do as web designers. That is to elicit response from people whether it is to buy more products, subscribe to an email, or read an article. She also explains how people see, feel, hear, and think as opposed to how designers undergo the same thoughts and processes.


33. Content Strategy for the Web

Content is king and good design with poor content makes a bad website. Furthermore, better content means better business. If you want to learn more how to create good content, this book offers a step-by-step of the production, process, implementation, and maintenance of your content.



34. Winning without Losing

The authors discuss the most common paradox of our times – working in the comforts of your home with just a click away, but working longer hours than necessary. They show us how to build a business and turn it into something sustainable and widely recognized while having a happy personal life on the other side. A very practical book which helps you identify and get rid of things that waste your time.


35. Selling the Invisible: A Field Guide to Modern Marketing

The book talks about the shift of the American economy from being a manufacturing one to becoming service-oriented. So what does it have to do with you as a web professional? The book offers a lot of wonderful, if not revolutionary, insights on not just being the best in your chosen field, but re-defining what best means. It also resonates with what we often talk about here on the 1WD community about selling to them relationships and not just your expertise.


36. Decoded: The Science Behind Why We Buy

It’s a good reference book to get insight about user experience. It is not a book about UX but the principles it has can be used to help you improve that. It serves as a comprehensive bridge between marketing and decision science showing that understanding consumer behavior is the springboard to creativity.



37. Influence: The Psychology of Persuasion

A national bestseller by Robert Cialdini, Influence is the product of his research about influence and persuasion. Written in a casual, easy-to-understand tone, each chapter is filled with interesting information and practical examples about reciprocity, scarcity, liking, authority, social proof, and commitment. The book comes with a promise that you can even influence the most resistant audience after reading it.


38. Logo, Font & Lettering Bible

Author Lisa Cabarga challenges her readers why they should settle into using others’ logos and typefaces when you can create your own. The book includes how to create innovative logo designs, design your custom-made fonts, and develop an eye for quality logo design and lettering.



39. Color Messages and Meaning

It is one of the most comprehensive guides to the science of color. The boo teaches you about color combinations and principles to help you create an effective design. Each point has relevant examples to help web design professionals from various levels of experience design better.


40. No Logo

The book is an observation to modern marketing trends, especially by big brands. Naomi Klein talks about how super brands have become more ubiquitous and taking over almost all public spaces including toilets, school curiculla, neighborhoods, and more.



41. The Truth About Getting Things Done

How do you succeed and achieve all your goals? The book answers that question by providing simple home truths including focusing on your time, make the most of your environment, and  how to adopt a winning mindset. It’s simple, plain, and powerful.



42. Designing for Performance: Weighing Aesthetics and Performance

Web designers are often faced with this dilemma – aesthetics or performance. The decision affects the website performance and load time. This is the problem the book addresses as it focuses on understanding of how page load time works, and what we can do to improve it and make the best overall user experience.


43. Responsible Responsive Design

This book teaches you how to turn a critical eye on your designs as you focus more on developing new contexts and features as well as speedy and lagging networks. It also teaches you how to tune your design to performance and serve the right content across platforms.



44. Professional Website Performance: Optimizing the Front-end and Back-end

The book says, and we agree, that for website development to become effective, it requires optimum performance from both web browser and server. Unlike other books in this list, you might want to take time digesting awesome information you find here. Some of it deal with load balancing and scaling while some explain how HTML, CSS, JavaScript works in the browser and how we as developers can take advantage of that for optimization purposes.

45. Prioritizing Web Usability

The author, Jakob Nielsen, is considered as one of the leading experts in web usability. He also talks about the importance of your homepage and the average time users spend on it and what can be done to improve the user experience.



46. Letting Go of the Words

Another book that emphasizes on the importance of good content. Janice Reddish, the author of the book, is a linguist by training and has been helping people build websites that couple good design and well-written content. So here is an expert that knows what she is talking about. The book offers great tactics and strategies to help you have good conversations throughout your website from beginning to end.


47. Information Architecture for the World Wide Web

The book consists of two parts – the first part consists of theory and the second part is filled with practical examples which helps you use information architecture effectively. It is a must read for web developers who especially build large websites.



48. Big Brand Theory

The Big Brand Theory looks into different successful global brands and dissects each element and feature which makes the brand successful. The author’s examination of each branding concept is multi-faceted and does not focus on only one area giving you useful insight about branding.



49. Making and Breaking the Grid: A Graphic Design Layout Workshop

The book presents the use of grid which the learning designer can use to utilize elements once thought as simple and static in ways which add dynamism to your layouts. Although not a radical book, Making and Breaking the Grid is full of ideas regarding the most powerful aspects of communication design.


50. UI is Communication

A lot of designers will agree that User Interface is one tricky activity that requires an understanding of different concepts. The author provides a lot of exercises to emphasize each point.





And a Bonus Mention!

It can be tough building a solid and stable base of clients, but it’s what is most crucial for any web design business. There are many resources out there, some out of date, some relevant, others still bogus, but finding one book that will say it all is what will make or break your business.

And we have that in the form of our latest book, “Never Run Out of Projects Starting Today!”.

Never Run Out of Projects Poster

There are still a lot of books you can benefit from to make you into a well-rounded web professional. How about you? What have you read so far? Share it to our community….

Powered by WPeMatico

How to Become a Valuable Web Designer

Learn How to Become a Valuable Web Designer from Brent Weaver

How do you add value to yourself as a web designer?

Even at the early stages of web design, the debate how much a web designer should charge their clients has been raging.

The competition has always been a race to the bottom, whoever charges cheaper, wins the project. It gave negative repercussions to web design professionals where you get swamped by projects, while struggling to make ends meet.

It’s a terrible paradox, a cycle that continues until one loses their passion for design.The situation looks dire for web designers.

There’s  good news! You can change this terrible cycle, reclaim the passion you have, and earn according to the value you bring to the table. Brent Weaver, of Ugurus and the 10K Bootcamp, returns once again to share how to become a valuable web designer.

Looking Beyond the Matrix

Web designers, according to Brent Weaver, can be categorized into four:

  • High Pay + Low Value = These are the scammers, swindlers, and fly-by-nighters, who charge very but do not deliver what they’ve been paid for.
  • Low Pay + Low Value = These category is where most web professionals fall. They focus on giving the services, like design, e-Commerce integration, responsive layout, etc.
  • Low Pay + High Value = Some web professionals fall under this category. They deliver great work, but they don’t know the business side of web design, nor the value they deliver on the table.
  • High Pay + High Value = This category belongs to those who are well-paid and well-respected in the industry. This is what web design professionals should aim for.

The last category, High Pay + High Value, seems like very difficult to achieve if you look at it. You might think that this category only belongs to the experts, the gifted, and the lucky. However, you must remember that those who are in this category once belonged to the first three category.

But what made them level-up from struggling web design professionals to well-respected experts in the industry with high earnings? The secret, according to Brent Weaver, is in how you position yourself.

Value versus Service

A lot of us are already familiar with this scenario: A client is looking for a web design professional to create a website for his business. Two designers came in and offered the same services, but one designer charged $500 while the other charged $50,000. Obviously, the client will get the one who charged cheaper.

What’s wrong with this scenario?

Both providers offered the exact, same services – the same mistake a lot of web designers make.

When you just focus on the services you can do to the client, you will never stand out because because everybody can do what you can. You are not offering something unique into the table, and the race to the bottom begins.

Instead on focusing on what you can offer, learn to listen and understand what your client needs. What problems and challenges does he face? Identify them by carefully listening to him, and offer a solution.

When you begin to focus on the needs of the client and provides a solution for them, it becomes easier to make your pitch. Why? Any person is happy when he finds a solution to his problem. Any person is happy if someone can help him make that problem go away.


That is the difference between the High Pay + High Value web designers from the rest. They know how to listen and take time to understand their clients; then, they proceed to create a solution. It’s both a win-win situation, and you walk away with a fat check and a satisfied feeling knowing you were able to help one more client.


Watch the video to hear more how to become a valuable web designerand don’t forget to share and spread the love.

Powered by WPeMatico