Introduction

The Multi-sided Nature of Design

“Design is a plan for arranging elements in such a way
as best to accomplish a particular purpose.”
― Charles Eames , American designer, architect, and filmmaker

Unlike any other part of the product development process, designing is the most versatile one.

Since the meaning of design depends on the context, it is being used in, and it can mean several things, all at the same time.

Design + Feelings = Meaningful products

The more we think about it, the clearer it gets — design is heavily influenced by people & their feelings.

It has to. It is about feelings.

People don’t want to see a design that just looks pretty or works seamlessly. People want a design that makes them feel something - happy, stunned, captivated, shocked, delighted.

Delivering the right message through emotions is critical for the success of any design. For user engagement per se.

But today, the consumers want more. For them, being delighted alone is not enough. Their hunger for deep emotions has grown; amidst this chaos and this ever-increasing digital maximalism — they seek connection, memories & experiences.

People, aka your users, are looking for a more profound sense of identity derived from digital products. And that is only possible through design. And that’s why we use design — is a way for us to deliver deep meaning to our customers through the digital experiences we create.

In its true essence, Design is something that can solve a problem that has not been solved before or solve it in a modern way for the end-users. And it's the website designers who make sure the new product or service makes absolute sense to the people they’re designing it for.

Hence, the design is a game plan to make something new for the people they perceive as useful & meaningful.

How this eBook would help you?

With our years of experience, especially in the website designing sphere — we have learned a lot about the Designers-Clients relationship — all the hows and whys and everything in between.

And through this eBook, we want you, the entrepreneurs of today and leaders of tomorrow to understand what is design, the terminologies of design, the processes involved and most importantly — the website designers & how to work with them to achieve your desired results.

Introduction

Like any other field of study, in design, website designers speak their own language.

And if you as an entrepreneur are going to deal with them, you need to be aware of designers’ basic terminologies for a fluid, hurdle-free experience.

Being well-versed with the design jargon will help you communicate efficiently and get the final results you envisioned initially.

And to help you with that, we have curated a design terminologies list for you to use as your design cheat-sheet.

1. Golden ratio

So what does Da Vinci’s Mona Lisa, spiral galaxies and bee hives have in common with Apple’s logo, DNA molecules and your arm’s length?

Well, they all are designed using a mathematical ratio known as the Golden Ratio — a ratio so unique yet so common that it is found in nature, used by website designers, famous artists and almost every one who wants to build something aesthetically pleasing to the eye.

The Golden Mean, Divine Ratio, Divine Proportion, Golden Section, or the Greek letter Phi (Φ) are some of the many names of the famous Golden Ratio.

So what is the Golden ratio, you ask? It’s a unique number that comes up with two objects when you divide the more significant thing with the smaller one and gives the number 1.618… and so on as the final result.

The most famous example of the golden ratio is the golden rectangle that gets divided into a perfect square + rectangle, with the same aspect ratio as the original large rectangle.

2. Typography

So where did you look first?

You see, a piece of design is only as good as it’s typography.

This is because typography is a lot more than just choosing the pretty looking fonts; it’s an integral part of the user-interface design. It provides a graphic balance to the platform, establishes visual hierarchy and sets the overall mood of the website.

Thus, typography, in its essence, is the art of arranging text or letters in a way that makes the content on the website readable and visually appealing.

3. SVG

All the images, graphics and illustrations used on any website have a certain resolution, so that they can fit the platforms they are made for, you know, phones and tablets and screens of various sizes.

However, with the emergence of responsive websites — website assets ought to be more dynamic. Stretchable per se, so that they can fit onto screens of different resolutions, without getting pixelated or blurry.

Enter Scalable Vector Graphics or SVGs; they are nothing but another form of ‘stretchable’ graphics like JPEG or PDF, but wayyy more .

When talking about SVGs — ‘Scalable’ denotes that SVGs are not limited to any specific resolution, unlike any other graphics form. They are made up of vector shapes and not pixels.

This is the reason why they don’t pixelate easily, have small sizes, and can be animated as well.

Now you know why your designers love SVGs so much!

4. Hero section

Want to catch your visitor’s attention?

Put your soul in the hero section of your website, as they are a terrific way to hook your visitors.

A hero section is the first fold of your website, generally a full-screen area that consists of your grabber, key copy, background image, a video, or any form of animation.

5. CTA

CTAs are your door to the cashier!

An effective, enticing CTA will do wonders at drawing visitors’ interest, kindling their attention and subtly escorting them through the signup or purchasing process.

The Call-To-Action is a button or a text with a link that tells your users to do something (take any action) on your website. They are crucial for your website, especially for online conversions, because they provoke people to interact with your platform.

6. Mock-up

A mockup showcases what the final design will look like and is often shared between stakeholders such as the team & clients.

Wireframes are made to communicate the structural and functional requirements of the design. Mockups, on the other hand, are just wireframes with an added layer of color, images & typography which communicates the design,

7. Lorem ipsum

There would be times when your platform’s content won’t be there, but you’d want to see how the content will look in the design.

It is then when Lorem Ipsum or the dummy copy would come into use. It is used as a placeholder for accurate content until it is ready to be served on the platform.

8. Colour palette

Every brand has a story to tell.

And in the online world, the stories are narrated by the colors they choose for their brand voice & personality.

A color palette is a selection of colors used to make anything + everything related to your brand. They are chosen in such a way that they work in harmony with each other.

9. Gradient

The gradual change of one color into another or the change in one color tone is called a gradient.

The gradients are not limited to two colors. They can shift from one color to another and another if you are in a colorful mood.

10. Style guide

Any business must offer a continuous brand experience to maintain consistency in its assets’ style and formatting.

And this is what the Style Guide is all about.

It provides the designers with guidelines to experience the same underlying traits at every brand touchpoint.

11. Aspect ratio

Nothing too complicated here — the aspect ratio is the ratio between the height and the width of any image or screen or frame i.e., how large the width of the subject is compared to the height of the same.

Thus, in the case of a square, the aspect ratio would be 1:1 like the photo grid you see on Instagram. And when you pull-up YouTube, it is a widescreen rectangular shape with the ratio 16:9.

PS: when looking at the aspect ratios, the first number always denotes the figure’s width and the second one denotes the height.

12. White space or Negative space

This refers to the area of design left blank.

Any space between graphic elements, images, copies, or any other design element on the page comes under the white area or negative space section.

Google’s homepage is a fantastic example of using whitespace, where all the empty areas entice people to focus on the search bar.

13. Flat design

Flat design is a minimalistic design approach that focuses heavily on the design elements’ simplicity and usability.

In most cases, it comprises a decent amount of open space, clean edges, and bright-colored two-dimensional illustrations.

14. Resolution

In the simplest form of words, it is the amount of detail an image has.

The higher the resolution of your image, the better, more transparent, crisper it will look. This is why images with low resolution often look blurry, pixelated or of poor quality.

15. User-Interface

UI or the User-Interface is the visual representation of the platform.

It consists of everything that a user could interact with - buttons, text, images, sliders, textual entry fields, and every other thing they can see on the platform.

Your application’s User-Interface would also include the screen’s layout, transitions, interface animations, and micro-interactions.

16. User-Experience

The user-experience, on the other hand, is an entirely different story.

The user-experience of the app is defined by the fact that HOW the users interact with the platform. Is the experience smooth and logical or clunky and confusing? Basically, how the user would FEEL while interacting with any platform.

UX designing process which designers use to build products that provide relevant , meaningful experiences. This includes the designing of the entire process — all the way from acquiring to integrating the product, while maintaining the branding, design, usability and function.

It is determined by how easy or difficult it is to interact with the User-interface that has been designed for the platform.

17. Interactions

Interactions are essential components of any platform which fall under the giant umbrella of User-Experience design.

In the simplest form of words, they can be explained as the interactions between the users and the products, involving elements such as aesthetics, motion, sound, space, and more.

The goal of including such interactions in your design is to entice your users or help them perform any action — like placing an order, downloading files, scrolling or navigating through the app, transition between the in-app screens — in the most seamless way possible.

Interactions have the power to add life to any design. And make it memorable. Intractable.

18. Header

“Life is a first impression. You get one shot at it. Make it everlasting.”
― J.R. Rim

Header is the top-most section of your website.

Earlier only the top of the website which consists of the logo, CTA and contact information used to qualify as the header. However, things have changed now.

The entire fold above the Hero Section of the website is considered as the header.

The main elements of a website header usually are:

• logo or brand identifier
• call to action
• text or headline
• navigational elements
• and even search in some cases.

Besides being omnipresent on your entire site, the header plays a bunch of important roles there such as making it a lot easier to navigate on the website, establishing your brand identity & creating a consistent experience throughout the website.

19. Footer

Have you ever been scrolling through a website endlessly and looking for the next product to add in your cart. And suddenly, you are stuck by the idea of checking out their social media handles?

There is a good chance that you might have scrolled to the very bottom of the webpage, where they have all the essential information about them — such as their social handles, their policies, TnCs, et cetera.

Well that bottom section is called the footer.

And the instance mentioned above perfectly defines the ideal use of a footer — to stock all the relevant, yet miscellaneous pages and links of a website. Footers nowadays serve as important reference points for a bunch of people on your website.

20. Gamification

The art of inserting gaming mechanics into a non-gaming environment in order to improve user-experience and engagement, is called gamification.

For instance, if you want to improve user-engagement rates of your application, your designers could add any form of gaming element as a challenge — like daring them to open the app for 7 days in a row & they shall get a reward on day 8th.

Using such techniques, the designers are able to influence users' behaviour and inculcate the ‘gamers’ hooked mentality in them, motivating them to perform your desired actions.

21. Onboarding

Don’t you love the experience of unboxing your brand new iPhone, curious and excited at the same time to see what all’s inside? Fun, isn’t it?

Well, Onboarding aims to do the same.

It can be defined as a visual unboxing experience, to help your users get started with your platform — by assisting them set-up some initial preferences, pointing out key UI elements & telling them what all the users can do with your platform.

The Process Of Design

Coming up with a compelling design is not an easy task.

Designing, after all, is the process of tackling complex problems, which are difficult to define & can not be resolved using the standard methodologies.

Thus, to tackle them, unique processes are required.

Processes that facilitate the speed of web development while maintaining quality at the same time.

Moreover, having a well-structured process helps the designers in two possible ways: it helps them stay focused & stick to their schedule.

While it is somewhat impossible to chalk-out one designing process that fits all products, it is still possible to describe a generic workflow.

The top 8 steps in the design process are:

Step 1 - A good healthy design research

Every great design starts with research.

Research is the umbrella term for all the processes used by designers to better understand the authentic desires, needs, and challenges of their target audience — of the end-users.

Unlike the traditional forms of research, something like what they do in marketing, Design Research is not about forming a hypothesis about any particular issue and letting that hypothesis guide their movements towards the development phase.

It is about understanding people.

It is about finding their stories, understanding their motivations, what delights them, their needs & most importantly, understanding how they would experience the products you are about to make.

Life’s too short building something nobody wants.

Good research is the key to developing an outstanding user experience, as it enables you to understand what the users want.

Step 2 - Getting the flow diagrams in place

Any product’s success is based on one thing alone — how well the website designers have modeled the platform’s flow to meet the user’s requirements while considering the business model.

And to do so, they use Flow diagrams.

Flow diagrams or flowcharts are also an excellent way to minimize confusion for the web developers. In case the wireframes lack interactions or could lead to misinterpretation, the stakeholders can always refer to the original flowcharts to keep their focus on a polished, usable product.

Step 3 - Lo-Fi Wireframing & Review

After the design team is done with their research, the next step is to develop a basic blueprint for the design, known as Lo-Fi diagrams.

These Lo-Fi diagrams connect the underlying structure (or information architecture) of any platform, be it an app or a website, to the same surface (or visual design).

Basically, they help you decide how you should structure your platform’s content. They predominantly showcase the following information to the stakeholders.

• Structure - How different pieces of the platform will be put together.
• Content - What all will be displayed on the platform.
• Information hierarchy - The order in which the above information will be displayed.
• Functionality - How will the entire interface work.
• Behaviors - How will the interface interact with the users?

Step 4 - Visual Design

Now that the wireframe is ready - the next step is to make it come alive using visual elements.

Visual Design could be defined as implementing colors, copies, and images to enhance the platform’s design.

The first and most significant visual design goal is to make the product's interfaces usable, which means that the user's attention should be drawn to the appropriate information or features.

To do this, website designers use size, color, and negative space to prioritize content on a platform — like Google’s homepage.

However, if this aim is met, they will incorporate elements of delight into their interface designs, such as animated effects and crisp graphics that enhance the UI.

Step 5 - Graphics & Illustrations

Then come the graphics and illustration part of the process.

Illustration & graphics, like any other component of an interface, are more of a mechanical feature than a decorative one.

Their main objective is to communicate an idea and the basic design interacting with others faster and smoother.

For a brand, graphics and illustrations play a vital role. They establish solid foundations for originality and artistic harmony.

Illustrations & graphics can be found in the following places:

• hero images
• theme images
• mascots and characters
• blog article images
• onboarding tutorials and tooltips
• rewards and other gamification graphics
• storytelling
• infographics
• visual markers of content categories

Step 6 - Enhance the user experience with micro interactions

Micro Interactions are essential, especially today when the users & companies are significant on user experience.

They don’t do a lot but serve one fundamental purpose — to delight the users.

To make the platform engaging, welcoming & most importantly, humane.

When handled correctly, micro-interactions will create favorable positive emotions about your brand and affect users' actions without them ever noticing it.

Microinteractions that are well-designed show that the consumer is taken care of. That is why they place a high priority on it.

An app or website provides direct visual guidance that teaches a person how to interact with the system by telling them what to do and whether their action was exemplary and accepted.

Step 7 - Design Testing & Review

Designing a new product could be a lengthy, involved process for you and your designers. And before you hand over your final design to the web development team — you would want to review it once.

Because once you have handed-over your final design, they would jump onto the development spree, and interrupting them would not be an excellent idea.

Thus, instead of worrying about it later on, checking it beforehand is the more ingenious idea. So keep a running list of updates and edits — and make sure they're all addressed before the update.

Look at any sort of inconsistencies. From one page to the next, all font types and sizes should be consistent. It's easy to miss a misaligned font or body text that's one point too big.

You've been looking at this design for a long, long time, after all.

Step 8 - The famous design-developers handoff

And lastly, the handoff.

The Design-Developers handoff the final stage of product designing, where the end-designed-product is handed over to the web development team.

Its goal is to get everybody together and deliver all of the knowledge needed for the development engineers to start coding or provide a more realistic estimate of the deployment tasks.

This process is not often associated with the scrum sprint period. Nevertheless, For the handoff to succeed, quality communication between the design and development team is essential.

Developer-designer partnership has long been a point of controversy. As a result, both the parties must serve in the trenches, gain trust, and develop a more potent teamwork strategy to make the handoff a success!

Introduction

When we think of the product designing process as a journey, having a reliable travel partner is essential for any entrepreneur to reach his final destination.

The journey of product design often takes one to unknown & uncomfortable lands. Thus, your co-travelers need to be open-minded, supportive & understanding in this journey of yours.

After all — you are chasing your dreams here & you can not blindly pick any random team as your partner.

Yes, it might sound like you’re asking for a lot, but trust us, it will be worth the efforts.

So who shall you tag along?

Your team’s size broadly depends on your product’s complexity or how much you are willing to spend.

When it comes to your design team, you need to hire a team with particular specializations.

However, specializations alone are just not enough.

To make your product’s design successful, you need a workforce of T-Shaped people. They are the kind of people who have a depth of knowledge in their fields but can also reach out, connect and collaborate with people horizontally, harmoniously.

Things to look for in your potential design team

1. They should be ambiguous

- What it means:

It is accepting things that are unclear and ill-defined or have unknown & nonobvious answers.

- As Characteristic:

When designing a product, website designers often come across problems that are commonly considered ‘wicked,’ i.e., problems without any fixed solutions or the ones that have complex solutions.

Because of these, it is common for specific products to have a series of iterations before it is dubbed as ‘complete’ and experienced website designers know that.

Thus, you should choose a team that should be willing to walk the extra mile to get your product built & meet the original timelines.

2. They should be collaborative

- What it means:

Willing to work together with colleagues, teams, and experts from differing dimensions.

- As Characteristic:

When it comes to solving complex problems, a multidisciplinary approach from all the team members is essential. Because such complex issues could only be solved after combining wisdom + expertise — it is vital to have a collaborative team.

Thus your potential design team needs to come from a collaborative workspace so that your product could kick-start smoothly and finish hassle-free.

3. They should be curious!

- What it means:

Being naturally motivated to ask questions, even if you think you’re aware of the answers.

- As Characteristic:

Great designs come from curious minds.

Because curious minds are eager to learn more about specific situations, contexts & problems, they can understand them better and develop solutions that other people can not.

Ideally, they combine their epistemological curiosity, i.e., the knowledge-based one - where they love to solve problems with their interpersonal interest, i.e., their natural inclination towards new blingy things.

And that is why your design team should comprise curious souls because, at times, actionable insights come from deep probing and not just superficial observations.

4. They should be empathetic towards the users!

- What it means:

It can understand someone else’s point of view as well.

- As Characteristic:

Design thinking is a human-centric approach to address and resolve complex problems that can not be solved otherwise.

And the quest to solve such problems starts with gaining a deep understanding of humans’ emotions, behaviours, psychology, and motivations.

This understanding helps website designerscreate systems that have a tangible impact on the user’s lives. But the catch is, not every website designersgets this deep in the user’s psychology to understand how they exactly feel.

Those who do — create products that have a lasting impact on their users' lives. So, choose a design team you feel is empathetic towards your end-users.

5. They should be holistic.

- What it means:

It can see the larger picture, and not from one but multiple angles.

- As Characteristic:

When solving those ‘wicked’ complex problems, the website designers need to have a holistic, whole-picture approach.

It’s because the website designers need to focus not only on the problem but on the users too. And they can not choose to ignore value-chain & distribution channels because everything adds up when it comes to the final solution.

Thus, you need a team concerned with the aesthetics, sustainability, spirituality, and other aspects of the ‘wants’ of the users and not just the ‘needs.’

6. They should be iterative.

- What it means:

The cycle of a feedback loop where new information is used to improve ideas, design, and the overall essence of any product.

- As characteristic:

Design thinking is a dynamic process.

website designers just can not position and build a digital experience in one fell swoop and be done for good.

But instead, they should tweak the design now and then, improve it as they go to build a product that is robust & free from every slightest aperture for any error.

It’s a powerful – and insanely popular – approach for developing digital products and experiences. Moreover, it’s at the core of contemporary ideas about effective product design.

Thus, you should choose a team that has an iterative approach in its design arsenal. A team that is used to the process of prototyping, testing, and refining things.

7. They should have an open mindset.

“There exist limitless opportunities in every industry. Where there is an open mind, there will always be a frontier.” Charles F. Kettering

- What it means:

Being able to embrace and empower the wild ideas and not jump to conclusions without trying anything new.

- As Characteristic:

When it comes to designing, wild ideas are not considered taboo.

Instead, such out-of-the-box thinking and ideas are always appreciated and encouraged when designing digital products.

An open perspective helps user problems to be solved quickly.

It also enables you to tackle issues in more than one way and find out-of-the-box inventive ways of solving those issues.

In this contemporary world where the trends change even on the second day, you need a team of website designers who are open-minded, inventive, and willing to think unorthodox calls to complex problems.

The humanistic agenda

If the design team you’re planning to work with for your product, genuinely values it — they’ll go above and beyond to make sure it’s shown in the best light.

And that is the kind of team you should be looking for.

Choosing the right design company for your product is a significant investment, and that’s why it is essential to invest your money in the right place. Being mindful of the pointers, as mentioned earlier, shall make your hiring decisions effortless.

Introduction

“Alone we can do so little; together we can do so much.” — Helen Keller.

Now that you know all about choosing the right team for your project, it is time to learn how you can collaborate with them effectively.

It sounds easy.
It is easy, but not simple.

For some people, it can be a lot more challenging than they think.

It is natural for people to talk to others how they’d want others to speak to them. And that is fine. However, this only works when you are surrounded by like-minded people — those who think, operate, and act like you.

And in most working environments — this is not the case.

There are different people, different minds, who require different modes of communication.

This is most true when you select a design team to work alongside you on your project. Because here — you need to be collaborative, communicative, and understanding altogether.

It’s your Product. Yours.

And by this, I mean that nobody, no single person besides yourself, eats, drinks, sleeps & dreams your idea as you do.

While you need professional help from your website designers, you have to hold yourself accountable for transferring every idea, every thought you’ve had about your brand to your designers.

So, how do you do that? How do you make sure that your product’s design comes out as you have envisioned it?

By choosing the right approach for working with website designers.

Take care of the following things and you should be good to go.

1. Describe your ‘What’ and ‘Why’ clearly

In short, crisp words, tell them what you need and why you need it.

The best way to do this is by documenting every single detail you have had about your project and handing it over to them.

Share with them as much information as you can when it comes to providing the background content - the more, the better.

And if they are the excellent sport they say they are, they’ll listen to you and absorb every word of yours before putting any suggestions/outputs forward.

2. List down your goals

Your goals are important — for you and your design team.

Because the amount of effort they put into your project will be directly proportional to your goals, the clearer they will be, the more confident you will sound & the confident you will be, the harder they’ll work for it. Contribute to it.

Thus, you need to brief them about the fundamentals for your product’s ‘success’; otherwise, lack of clarity will inevitably lead to trouble down the road.

3. Tell them your ‘Story’

Not your history, of course, unless that adds any sort of value to your project.

This should be more about your business’s unique elements or the upcoming venture: your mission, vision, values, culture, what motivates you, and everything else.

4. Be prepared to answer a lot of questions, a lot of them.

website designers should put many questions before they begin to work, which would help them capture the feeling, tone, and overall look of your project.

However, at times, letting people know that they can ask questions is just not enough. Sometimes, you have to invite people to ask questions to you. You have to understand the person or the group of people you are working with and have to mold accordingly for your good.

5. Paint your audience’s picture for them

As website designers, they need to understand the thought process of the end people who will use your product. And for that, the team will carry on their research too.

But it is your responsibility to enlighten them with your views on your audience, the end-users. This would help them design the kind of products that would be loved and cherished by the audience.

6. Include them in the decision making process

Don't just delegate your work to your designers, but instead involve them in your decisions early on.

The reason being, if they feel like they are not one of the alpha members of the project, they will feel a lot less invested; after all, no one likes feeling that they are just another resource.

When included, they will automatically become more passionate about their tasks and thus, the result will be better too.

7. Discuss your edits either in person or on a call

When you get the first or second draft from your website designers, an edit requests for the same, do not, I repeat, do not scribble down the edits and send it over Slack or email.

But instead, spend some time with your website designers either over the call or in-person and discuss the same. Ask them questions, give your opinions and explain what & why you feel the changes need to be made.

Doing this would lead to more constructive discussions than more impersonal communication tools.

8. Practice strong reasoning

Suppose you tell your website designers to tweak the logo a little and make it more rounded with reddish boundaries. They would do it provided you have a solid reason for that edit other than “I like circles & red!”

Giving unnecessary edits to your design team wastes not only their time but also your time, money, and effort.

9. Be Open-Minded, Flexible & Respectful.

If you happen to be lucky enough to get website designers who enjoy discussions and iterations, I'd suggest you make the most of it. Being an entrepreneur, you often might be under a time crunch & try to get things done as soon as possible; however, try taking the time to bounce ideas back & forth.

In case of some peculiar disagreements - respectfully state them & identify the specifics you like & you don't.

When you give your designer enough time to work on your project and not poke him now and then about the arriving deadline, it will help you unleash their creative side and result in a way more polished & intuitive result.

10. Stay curious, Stay inspired.

Many entrepreneurs have basic design knowledge today.

Even though you don’t, you can remain curious about current and upcoming web developments and trends in design in your niche. It will also help you to provide better guidance and guidance in your work with website designers.

Thus, keep looking for good designs online, which according to you, could have a lasting impression on people. Make the best possible use of this opportunity to make your brand the kind of company you have wanted it to be.

A little trust goes a loooong way.

Trust — It’s essential.
But it is also challenging to have someone you’ve never worked with before.

Once you know how to work with excellent graphic designers’ teams, you’ll find yourself ready for a creative collaboration that you can trust & depend on when it comes to delivering results.

.