design_sappy

Creating useful product for the people

[designsappy]

Sketch a logo from scratch

There is no secret in logo designing. Its pretty well known method, which you can easily find it on the internet. I would recommend this Link, which has a elaborate collections of links and resources. To be precise, logo designing process can be divided to four major steps.

They are

Step 1: Collecting the basic information

Step 2: Research and analysis

Step 3: Development

Step 4: Brand implementation

Out of these four steps, logo drawing comes under step 3 which is development. Fine, now how to draw a logo?Do I need to be a artist for that? No, not necessarily. The primary requirement of a logo is to create an identity, which represents your brand and your company’s culture. A simple logo is enough for that. Most of the logo’s we see today are simple logos. If you know about your customer and your business core theme, you can create your own logo, with very little drawing skills. That “Very little drawing skill” is called doodle.

Doodling is simpler form of drawing with minimal detials, but here beauty or perfection is not important. If you can express your thoughts visually, you are done. for e.g. in the below drawing I can doodle a man with few lines and a circle. With little changes i can show him like running, Similarly with three lines behind, i can show him running fast.

You can check this linkto learn doodle in very simple way.

Ok, Now I can doodle. What is next? We are all set to create logo. But before that, let us see some example.

Example 1: The client wanted a logo for a food web application. It has list of all popular restaurants in various cities. User can search and find new restaurant in his city and rate them based on his experience and write reviews about them. so with constant user activity the database is going to grow and pull more users.

Analysis: The primary user for this web app would be food lover, they will find this website useful and contribute their reviews. With their continued activity the app is going to grow and pull more similar food lovers. And also the user will try a new restaurant for a different dish and a happy feeling. The same thing needs to be bought on the logo. The happy feeling.

Hence based on our analysis,

You can try different logos for the same concepts. For e.g. A happy person eating delicious dish, A chef making food with full of love and many thing similar like that. But, choose the best which convey the core message in a simpler form. Simpler logo has long utility and pass the logo testing easily. In current trend, most of the popular brands are changing their logos to simpler user friendly.

Simple logos are easy to memorise and remember. Let see an another example.

Example 2: Here the logo is for a Ayurveda clinic, They wanted the logo to be trademarked. Their treatment is based on three different streams, which is Ayurveda, Yoga and Counselling (Modern Psychology). Though they are not gender specific, most of their patients are women and also they have special treatment for pregnant womens. So the final message to represent through logo is “Treatment based on three different streams, for the well being of women”.

Simple! Right? In the same way you can draw your own logo. If you spend time you can make your logo special by adding some unique thought to it. for e.g. FedEx: A hidden arrow between E and X, Amazon: A smiley arrow form a to z. Symbolising amazon sell everything.

[designsappy]

Which is best microstock or contest?

It's been a month now, after our first submission of vectors in shutterstock. We keep submitting 1 or 2 images every week now. Rejections and approvals are still happening. Three downloads so far and our total earnings are 2.5 $. Since our images are three weeks old now, its getting buried down in the search results. We are getting very less views or zero views most of the time. We took almost a day to create a vector, and only few are getting sold for this little price. We try to achieve our 10$ by the end of this month. Hence we started creating seasonal greeting vectors like diwali images which is approaching us in the upcoming week. Our assumption is shutterstock is a good platform to sell images, but in case of vector It can pay only additional values to your digital assets but it can’t pay off our full effort. Now we focus our attention on design contests, which pays a lumber-some price for a small projects. But true it demands lot of  efforts and creativity, but which is going to be the same case in shutterstock either. Fighting in a contest will sharpen our design skills and get us expose how the other designers views for the same concept. We choose 99design.com for finding contest, only where we can see what other designers are submitting. We analyzed few of the completed projects and found most of the winners of the contest submitted a poor designs at the first. with elimination and comments they get the clarity and finally able to accomplish the price.  With practice and consistency they own the contest which is convincing for us. We took our first step for our next journey. We will extend this article with our further exploration.

[designsappy]

How to check the Originality of a Logo design

know “how they can do that”.  There are plenty of websites which provide free logo templates for download, like igraphiclogo.com, www.eatlogos.cometc. Those logos are free, they are out of fashion or having some copyright issues or technical problem on practical application. 

They are ideal for short living business for whom brand image is not important but not for the business who has long time goals. $5 dollar designer normally collect those templates, as and when the project comes they just change the text, do little tweaking and send it to the client. More over they are not professional designers, they do it for pocket money. And you won’t know who is the designer you will know only his username (for e.g damerf84) One should be aware of such cheap designers, We all judge a book based on its cover. Similarly logo is the cover-page for our business. One should take effort to create a logo which suits their business. Such a valuable asset can’t be given to a unknown designer like damerf84. Cheap designer won’t take any effort to study your business or finding the right logo because thats not affordable to them. Here is a short story of a client who paid a big cost for a cheap logo. 1. The client is an entrepreneur who needs investment to start his business. To sell his idea, he created a business prototype and launched the business in pilot scale with his own money. 2. Soon he realized he needs an identity for his business. Initially he thought of creating a good looking and memorable logo but later he went with cheap designer considering his budget. He thought he got a good deal and sent his requirement to the designer. 3. The cheap designer without taking any effort for creating a new logo, he used one of his template and send it to the client. Surprisingly, most of them are smart enough to convince the client. 4. The client convinced with the logo and started using it on presentation, website, letter pad etc. He printed lot of marketing collateral’s for promotion spending 1000 of dollars. 5. Soon he realized the logo didn’t do any magic for his business. But he is not worried much because he didn’t invest lot of money on it. 6.One day he got an oppertunity to meet a prospective investor in a conference and shared his business card and the company brochure with him.  As soon he saw the logo, he came to know its copied from another source. He consider the proposal would also be a copied version and didn’t give any interest to listen. Soon the conversation ended.

What went wrong?

Now you are holding the responsibility of the logo, not the cheap designer. If the logo is copied Obviously, everybody will think the proposal would also be a copied one. Its isvery difficult to describe about idea who doesn’t get the first impression.  Below is the FAQ for few if the insight. How did the innovator came to know, that the logo is copied?

Where went wrong?

Here is an insight on FAQ format

How did the investor came to know it is a copied logo?

In the cyber world of today, every company is open to everyone. We subconsciously remember those companies with their logo, the same way is the investor. He receives many proposal every day. He constantly read many case studies, stock performance, attend conference to find the right company to invest. His level of exposure to branding is much better than yours. Hence there are more chances he can find out the plagiarism.

What is the risk of using cheap logo?

When a person visits your website the first thing he will notice is your logo. If he feel it is copied, you lost the golden opportunity, which is the “first impression”, with the same impression he browses the rest of the content. If he came to know the logo is copied, he will compare you with the company from where it is been copied. It will take lot of effort to change the first impression.

The logo is not copied. But didn’t create any impression why?

That is the real challenge. Here is where you need a good designer’s help. A good designer will analyze about your business, competitors, future plans etc. He chooses the best logo which will speak about the business. The designer damerf84 won’t do any of this. He can’t get the right logo for you. If you have enjoyed reading this blog, please share your thoughts below.

[designsappy]

Using mockups for better Visual Presentation

How we are presenting a design, is much more important then the design itself. With a good mockup, we can present even a poor design in a nicer way. Here is an example below.

I have made this design based on my clients input. I know, this doesn’t even follows the basic principles of design, But i don’t want the client to feel like that, though they have given the inputs.Hence i placed the design in a mockup and send it. Client was happy to see the content and approved without comments. The purpose of mockup is, it helps the clients to visualize the design the way you wanted them to. When the client take your design to the next level (like printing or web development etc), They use your Mockup design as a reference. Mockup allows the design to be visualize, in the end user perspective. Hence you can avoid elemental comments like, can we increase the spacing?, can we fill the whitespace ?etc. Its a best practice to send your every design with mockups. for e.g. if its a logo for a application, place its in a website mockup and send it, and similarly for the other designs also use appropriate mockups. At times, the approval will be at multilevel, we will not get the chance to explain how the design is going to be used. By sending a mockup along with the design you can make sure, everybody are visualized the design in the same way you wanted them to. Every design agency should have their own mockup library. We are creating our own in various medias, which we are going to use in our upcoming projects. lot we are getting in the internet. Hence it won’t be a time consuming project.

[designsappy]

What is micro interaction?

Recently micro interaction is creating lot of buzz in the industry. Now a days even in job interview we can expect questions related to it. I did a little bit of research and started realizing why it has the sudden attention.

In a nutshell, Micro interaction defines all the interactions on the screen, in animation format. It is a better way of pressing to the team instead just sharing the style guidelines. This would help the the team to fastening the development step and building reusable pattern library.

Why micro interactions are required?

Conventionally developers are provided with styles guidelines along with mockup. Style guidelines consist of the key colors used in the design, typography, Icons, UI design and it various sates. Generally they are short document won’t have much information about "how the UI would behave". Today the style guidelines are no longer required designer can share their files with tools like zeplin, where the developer can directly inspect  the design and get the details. Similar prototype can also be made with realistic behavior, with minute details. Tools like UXPin supports booleans where different scenarios can be conditioned.

Benefits for the designers

Presenting the interaction in animation format would explain the flow in a much better manner to the team, and the developers are able to come up with much realistic timelines. This also reduce the time required for coordination with the developers. Now the designer are able to present even complex interaction easily and hence can visual even complex interactions.

Tools used for Micro interaction

Almost all the design tools (including sketch) are having the prototyping functionality. But they are all very static can’t define most of the in page interaction. Tools like principle and Flinto are specially made for this. After effects can be used if the design is made with photoshop. InVision studio and Adobe XD are trying their best but event today they are not up to the mark.With compare to all the interactions design tools, principle ranks the most and manage to create even complex interactions with ease.

Here are some of the tutorial which you can follow and you can view some of the examples made with principle.Thanks for reading.

Your comments are welcome.

[designsappy]

Tools I use regularly - UX Designer

As a UX designer I use several tools on my day today job. Today there are plenty of tools available for designing, prototyping etc. Ideally, my design process involves three different phase

Wireframing

Interface Design

Prototyping

Various tools are used in each phase, few of them are used in more than one phase e.g. Sketch, Framer, InVision Studio etc. Personally, I would prefer  Sketch for designing because it is widely accepted file format can be exported to other tools if require in the future. here is the list of tools which I use frequently.

Wireframing

Wireframes are created to test if the flow of the application match with the user flow. To start with we should be aware of

Who the user is and how they do the tasks now

Clear understanding of the problem and the executive intent

Inshort, wireframe is a rough sketch of the application and and depicts how each screens are connected with to others. The application flow should match with the user flow and their expectation. It can be either an rough drawn sketch on a paper with pen or a digital file using tools like balsamiq, Keynote etc. It is a highly iterative step, undergo lot of changes based on user feedback. Once I’m satisfied with the results will move to the next phase which is mockup creation.

Tools used: Balsamiq, Powerpoint, Keynote, Paper + pen

Pro

Allow the designer to understand the user flow better and design the application flow Accordingly.

Ability to test only the flow and the layout arrangement.

Testing directly on mockup, would led the user commenting on design, content, etc. which would be cumbersome to manager and fix at that stage.

Early feedback saves lot of time on mockup creation, strong understanding about the user would faster-up the whole process

Communicates clearly what to expect

Cons

Requires 1 - 2 weeks of time, which can be compensated with the mockup creation phase

Requires user participation for testing. Which might requires budget cost and recruitment effort

Some user may not be able to visualize the wireframe

Interface Design

Once I’m done with the wireframe (if required get approval from the executive team) would create the interface design. During this step the interface of the application would be created using sketch or other designing tools depending upon the final handover. If the users faced challenges on visualizing the wireframe on the previous phase, than I would create a low-fidelity mockup and test with them to get feedback before creating the high-fidelity design

Low-fidelity is the grey scale format of the final mockup without any actual content. With low-fidelity mockup testing, the user would be able to visualize the flow better and provide better feedbacks. After getting the user feedback the High-fidelity mockup would be created (which is the actual mockup) and shared with the fellow designer for pear review. The fellow designer would comment on the design and other visual aspects. We can create one or more design to compare and the finalize the design.

High-Fidelity mockup would looks similar to the actual application. If it is a cross application then create mockups for all the devices which we are planning to implement. Design for all the device needs to be tested separately with different users.

Tools Used:

Designing: Sketch, Invision Studio, Framer, Photoshop, Illustrator etc

Cloud sharing: InVision, Framer, Sketch Cloud etc

Pro

Able to get the feedback well in advance before developing. Development can be much more faster and efficient.

Expectation are set clear to the Executive team and marketing

User can provide their comments and view well in advance hence the project can be directed on the right path without wasting much time

All the design assets and documentation required for the developers would be available on time

Con

Requires 45 days to 3 months time to complete

Team should be able to adapt design culture and open for design decisions

Prototyping

Once the mockups are finalized they would be made as a interactive prototype for final user testing and to present to the team. With prototype second round of user testing would be done before proceeding with the development. Probably with different set of users who have not participated on the earlier testing. We could expect comments which are easy-to-address and now very different from the current design. If so, it is time to take a break and validate the user research done, if required restart the step again. But it is very unlikely we would get surprises at this step.

With prototype it is easy to present the flow to the developer so they can plan the development well in detail. It is easy for them the come up with the technical challenge they would face in the future. PM can visualize the user point of view and break the features into meaning full versions for release. 

Developer will also need style guidelines and micro interaction guidelines to code the application pixel perfect. With tools like Zeplin developer they can inspect the design and able to copy the style as CSS Codes. They can also download the icons in the desired format the want. To document the interaction instruction, tools like  Principle, Adobe After Effects would be used. It would saved as a centralized document and reused whenever the same component is followed.

Tools Used: Prototype: Adobe XD, Principle, Adobe XD, FramerX etc and Zeplin for sharing it with Developer.

Pro

Easy to test the design with users, well in detail before moving to the development

Able to present the flow to the developer and the set the expectation right. Developers would be able to plan their work better and provides much realistic timelines.

Easy to visualize the requirement and able to break the development as sprint and release as versions.

Cons

Takes 2 - 3 months to complete

Happy minded developer are required to achieve pixel perfect coding

[designsappy]

My User Experience (UX) design process

I have been practicing at-least 4 years in UX design now. In addition to my company projects, I have also worked on many personal project from scratch. From the past experience I have developed the following methodology for approaching a UX project.

[designsappy]

How to Open Adobe XD in Sketch?

Adobe XD is a UX prototyping tool created by Adobe in compete with Sketch. Though it is not a highly efficient tool like sketch, it was able to find some user base due to the following reason

1. Adobe XD is free and only need to pay for the could storage.

2. It is also available for Windows. Though the features on both the operating system are not same it is available for both the operating systems.

Hence most of the new comers would like to start with Adobe XD because it is free and available for windows.

Exporting file from Adobe XD to Sketch

There is no direct method to export Adobe XD to sketch, even I have tried to copy paste directly between the tools, it was copied as a bit map image which can’t be edited.

Then I tried to export as a vector image SVG

1. Select all Layer which I wanted to export

2. CTL + G to group all the layers

3. File > Export > Selected 

4. Export the selection as SVG format.

Then I open the SVG on Sketch. It came out perfect without any distortion or compromise.

It also preserve all the folder in the same label names.

[designsappy]

Measuring the performance of UX design

In Lean UX Process product updates happens almost every month. New features are added to the application as-and-when they are ready rather than waiting for the next big version to come. The request for new feature comes from multiple sources, like User Community, Marketing Team, Management etc The product designer would capture all of them and prioritize based on its criticality and technical feasibility.

In the rush of delivery, it is quit common that we may miss out some of the usability bugs till the live Product. It is important for us to have a system to capture those issues and fix it before it creates any impact. We don’t have to wait till the user to come back and report us.

Continuous improvement

No body is right at the first time

Only with continuous improvement, we can achieve the desired experience for the users. Release of a feature doesn’t marks the end of the design cycle, It also includes, tracking the performance of the feature and constantly improving it. If any issues identified at that stage, it should be taken as priority and immediate action should be taken. With actual people interacting to the live product, we can get more quantitative data which is a best source of several insights.

How do we Measure

Now the Big challenge is, how do we measure the performance? It is definitely not going to be possible by any manually methods, only with automated monitoring/tracking system we can measure this. Tools like Adobe Analytic, Google analytic can help us to track the overall performance of the application. But in our case we wanted to track the performance of a specific task, which is newly added to the product. Hence we need a probe to track a specific action or flow on the application and report it to Analytic.

Here is where Google Tag Managers (GTM) is helpful for us. With GTM it is possible to track a specific action or a flow on the application and report the data to analytic. It requires one time integration and later any trigger can be operate from with in the tools (GTM) itself. Similar to Google Tag Manager there are several other tools available on the market but as of now GTM is widely preferred.

lets see an example for tracking a specific task

Example 1: Analyzing the performance of a newly added template feature

let say, you are working on a Notes Application, which helps the user to Create and manage notes. Now you have enroll a new feature called “Template” which helps the user to create a note on a certain format. The template are created based on certain R&D and Now you wanted to analyze the performance of this feature.

To do that, we need to track three instances on the flow

Click of the “Add Note” button which indicates number of times the user attempted to create notes

Click of a“Template” link Number of times the template list is been viewed

Click of a Template list Number of times the template is been used

By comparing the clicks on each instances, we can analyze the overall performance of the feature and if any issues found it should be taken as critical bug and immediate action should be taken. We can also gather new ideas from the users for future improvements.

lets analyze the numbers

Only 13% of the people who have attempted to create the note have viewed the template list. The ratio seems to be too low, Hence, action needs to be take to improvise the figure. Here are the possible reason for the current low performance

User didn’t notice the Template Link itself, May be due to less affordability

User didn’t know how to use this feature

The following suggestion can be helpful to improvise the affordability and the user awareness about this feature.

keep a “New” tag next to the link, so that use will notice the feature and give it a try.

We can send a mailer communication detailing the feature and its usage

we can also enroll a “Take a tour” option to ensure every user notice the feature and learned how to use it

Secondly, the number of user who used the template is much lesser than people who have viewed the list. It it not even 10% of the click.

This might have happened for several reasons, may be the template labeling is not understandable for the users, or the template what they are looking for is not found.

Though this would little disappointment for the user right now, we can solve it only with proper research. We may have to add few more templates with appropriate labeling for which we should make due plans for user research.

With constant improvement we can tune in the product usability according to the user expectation.

[designsappy]

Sketch Training in Bangalore

Sketch is a very simple, yet powerful tool for UI & UX design. For a very long time, Photoshop was used for web design. Sketch is much more efficient and used widely in the industry now. Photoshop was ideally created for photo editing purpose, hence it is natural the tool has become irrelevant for UI/UX design with the emerging technologies.

Sketch is exclusively made for UI/UX design in mind and all the styles and effects which you create with in the tool can be 100% CSS coded. Which is very much essential for a Responsive design. Additionally sketch has a huge list of plugins which helps the tools to integrate with the complete system like sharing the design, collecting feedback, sharing the CSS codes, interactive prototype etc.

During the training we would be learning the complete application and full skilled on working with sketch. The following topics would be covered in the training.

About Sketch

Design and Collaboration

Create art Board

Add Grids and Layout Settings

Add the main photo to the web layouts

Add the navigation bar & Navigation Text

Headline Text and Intro Text

Add the main photo to the app layouts

Navigation Dots

Work with fonts in sketch

Gallery Photo

Text for Kitchen essential Sections

Add Organic Section for Smaller Screen

Call to Action

Gallery Text

Add Organic Section for HD Screen

Text Link for app Organic Screen

Draw the Bowl Icon

Draw the oven mitt

Draw the spoon and Spatula

Add the remaining Artwork and logo

Add the footer

Sharing and collaboration

Export Art board

Broadcast your design with sketch mirror

Collaborate with sketch cloud

Making design changes.

Exporting Final Assets

Export the Main Photo

Export remaining bitmaps

Export SVG

Beyond the Basics

Style Guides

Color Styles

Open-Source Fonts

Text Styles

Using Symbols

Layers and Mask

Responsive Design

Using Art-board

AEFlowchart

Plugging in Visual Design

Navigation and Communication

Fluid for Sketch

Craft

Exporting & Marketch

Mobile design

Mobile App Icon

Mobile App Design

Importing Asset

IOS Navigation Asset

IOS Screens

Android App Design

Android Navigation Asset

WatchOS design

WathcOS Navigation Asset

Extending Beyond sketch

Mirror

Illustrator and Sketch

Other Online Tools

Axure RP

InVision

Zeplin

Flinto for mac

Sympli

Installing downloaded Plugin

FAQ

Who can join this training?

Anyone who wanted to become UI/UX designer

How long the training is?

It would be covered in 42 Hours. It is classroom based training located in Bangalore. But if traveling is a problem for you than it can be done via online

How much would it cost?

12000Rs. for the training, online portfolio and career assistance.

What Tools I would be learn during this course?

Sketch, Invision, Zeplin, Fluid, Sympli & Flinto.

Will I get Job after the course?

Along with the skills if you have a good portfolio you would definitely get job. After the training I will help you to make your own portfolio and get the right job offers.

Any other questions?

You can call me to 9902398198 or send a email to [email protected]

[designsappy]

Free UX Design Intership Program for students.

I understood you are interested in Learning UX Techniques. I assume you might have already seen my linkedin profile, if not please have a look at it here. To tell a little about myself, I'm a HFI Certified UX designer, Currently working in a Telecom MNC as a Full Time UX Designer. I also mentor students (as a part time) who are interested in learning UX, preferably who are experienced on design tools like Photoshop, illustrator, Sketch etc.

I guide them with my own experience from the begining of the project and the teaching all the essential techniques the project required. From the past I have seen many students benefited because of it and I hence continued to do so.

You might have came across many UX techniques and fundamentals from expert suggestions like Nielsen Norman. Some of the techniques we use day-to-day like Card Sorting, AB Testing, Usability Testing, Competitor Analysis etc. Each techniques has its own salient functions. Depends on the project We would be picking the right techniques and make a ideal project protocol for you.

During the internship you need to select a topic of interest and do the complete Experience design for it. I would work along with you and identify the project scope and the techniques which needs to be followed. You would be the lead person to complete the final design.

Any project would have two stages.

1. User Research and Analysis:During the stage we would be do Product Research, Competitor Analysis, User Pain Points, User Group Analysis, Persona Creation, Scenario Analysis, Task Analysis etc

2. Design and Prototype During this stage we would do a Paper Prototype, Wire-frames, Interactive High Fidelity Mock-up, Usability Testing etc. During this you would be though the following tools Balsamiq, InVision, UXpin, Sketch, Photoshop etc

UX improvement on Beta testing As you are aware after the application become live based on the design there would be a system to capture user feedback, we tracking etc. By constant improving the product would be furnished well.

Each stage would take 2-3 weeks approx. End of the course you would be familiar with the

The complete UX process

Familiar with User Research Skills

Experienced on Popular UX Techniques

Design and Prototype skills

Usability Testing skills

Let me know if you have any doubts.

Here are some of the topics I have now to pick.

Creating a forum to discuss the issues on constitution of India

Develop an application to manage the electric gadgets

Develop application to design invitation online and order for printing

Ecommerce site for Special snacks in India state wise

Ecoomerce site for art and craft store

[designsappy]

What Creative Tester would do?

Once the application is developed the QA team would test the application before deploying . Typically QA team would test the fjnctionality, but they are mostly resistend of any design mistakes. Even a glarring mistake would not catch their attendtion. I tried talking to a tester and understand the reason. I try doing a checklist for them to follow and run a short training session. But nothing seems to be working.

I talk to my fellow friend about my challenge he had mentioned about a role creative tester. Creative tester are actually designers turned testers. They would follow the dev team regularly and any new development would go through them. Their primary job is to verify if the specs are been followed thoroughly and ti get it resolved if there are any differences.

I found it as a essential role. It is really important to verify every development before deployment. A professional design would increase the trust among the user. And invite more mature feedback from them. It is really a critical issue if the user points out a asthetical problem.

[designsappy]

Creating your own pattern library

Pattern library is one of the essential factor for faster-up the designing step will also enhance the quality of the output. Without a pattern library, we might end up spending working on design which we have already created. The worst case would be inconsistency in design, with various styles of buttons, type phases etc.

Two different design which are essentially doing the same function would create confusion between users. It could consume lot development time also.

We are multiple designers working on different location, with limited communication time between us (once or twice in a week). The same is true for developer also. This stressed us to give priority for the pattern library and to on-board ever one, so that we can be more efficient and productive.

Starting with a pattern library

To start with, we had listed out all the patterns which we are already using and the once which we would required in the future. An index file was created with all the files stored in a shared folder. Everyone in the team given access to the shared folder.  We given a unique code for each pattern to identify them easily. Each pattern would be saved along with code.

Variant

While doing so, we figured out single pattern library can't cater all the use cases. For example, we had used bright blue color header for table, which can't be used on a page which has dark background. In such cases we had used light color header. Ideally both are useful patterns in their own context. We called the second option as a variant and stored both the design options. Similarly, we have captured many other variants for different UI. The variant is based on color, Size, Typography etc.

Component

A component is a mix of multiple UI elements and function. A component should be configurable so that it can be customized based on the use cases. Having a static component will become a burden eventually. A component can have multiple functions like sort option, filter, column rearrange,  Inline edit, Table options etc. Not all these functions are necessary for example, filter options won't be required if the total columns are less. So, it is very much essential we have all the required function on configurable format.

Documentation

It is very important to save each pattern with necessary information. Hence we created a separate document for each pattern and stored it in the same folder. For easy identification we give the pattern code on the file name. So it would get position in group while sort by name. The pattern document is done in the following format, Motto or purpose of using the pattern, Code name of the pattern, Usage rules for designer to indicate when to choose the pattern, If it has a variant have a mentioning of it and specification on when to choose. Have a section for interaction guidelines if there are any. Functionality breakup etc.

The coders joined

Upon certain progress in our activity the coders joined as and created HTML/CSS for each patterns and saved them on the shared folder. Entire team was updated on email on weekly basis. Each pattern would be saved in HTML, CSS and Javascript code which are specific to the pattern and available interactive independently. With medium progress we have created our own pattern library.

We are done Now

We had saved lot of time on designing the same component which are functionally same.

Now we get more time to think on the user problem than of spending huge on design

The same with developers too, they get to think more on the logics

We has setup to process to capture the requirement of any new pattern and update it time to time. We circulate the update to the entire team

New joiners have to spend couple of weeks on go through the pattern and we have very less inconsistency issue.

Overall quality is good.

We are happy again

[designsappy]

QA Checklist for aesthetics verification

UX designer spend lot of time on research and analyzing the user need. Based on their finding they would create the mock-up and make the final design after testing. But many a time developer won't take the design seriously. It is the responsibility of the UI developer and the QA team, that the designs are executed same as proposed and to measure the final outcome with users.

But in my experiences I had found several deviations on the development. Though it is the role of the QA team to ensure the quality of the product, I found they are more focused on functionality issues rather than aesthetics. With my discussion with them I figured out they need clear instruction on how to do that. Since they are not from design background I felt, they would need a clear instructions on how to review and ensure at least the basic aesthetic are followed, hence our job would become easy when we do the final review.

Since we use Zeplin, we could share the actual designs to the developer and QA person. They can check even the CSS codes of the design. Hence design specs for each development may not be required, but they need access to the pattern which we are following other style guidelines.

Hence I have created a Basic checklist which the developer and the QA team should verify to ensure the aesthetic are followed well. Here are the 5 basic aspects which the QA team needs to taken care,

Layout and Grid

Color

Typography

Spacing

Interaction

Designer would follow a certain grid pattern to organize the content and to make the page look balanced. For a normal screen 12 column grid would be used. The grid count would vary depends on screen size. [Pattern link for grid]

How to check:

Take the screenshot of the final page (You can use the browser add-ons like Nimbus or something similar)

Compare the screenshot with Mock-up at 90% opacity overlay (You can use power point to do this)

By doing so, you can figure out the key difference on placement and position of each segment on the page

Typography:

The design should follow the typeface mentioned on the pattern. Depends on use cases, few variants of text would also use on design. The QA should verify the text styling is same as mockup which includes font, size, color, line space etc. Pattern link for typography

How to verify:

Check the text styling using inspect mode on browser (You can use CSS Viewer plugin for Mozilla browser)

Color:

Check the colors used for the text, background, button etc. same as shared mockup. The colors should not be altered or changed.

How to verify:

Check the page colours using web master tool (Alternatively You can also use CSS Viewer plugin or another Mozilla plugin)

Spacing

Check the padding and margin around the individual element or a section. Maintain it same as Mockup design.

How to verify:

Check the spacing using web master (Alternatively You can also use CSS Viewer plugin or another Mozilla plugin)

Interaction:

On interact, certain UI elements has effects like hover effect for button, focus color for Text input etc. The interaction effect can be a change of color, twinning, transition etc. Please check the pattern library for the guidelines.

[designsappy]

I'm a fresher, how can I get job as an UX designer?

According to me, knowledge on User Experience will develop only through practice. Books, Courses etc can teach only the techniques but when to use the technique and how to analyses the outcome etc will comes only with experience. Slowly our assumption about users, would fade away and start understanding the actual needs of them. Once we reach that stage, we would become the most important person on the project and an irreplaceable asset for the company.

Now coming to the point, "YES. It is possible to become UX Designer as a fresher". Several MNC companies do hire freshers. But if you are not from a premier design institutes, it is going to be difficult journey for you. Even if you can land in a job, it would take some time for you to understand the role and start contributing to the project. Be aware, several company won't have a dedicated team for UX, you have create your own process and set your deliverables. Hence, It is very important for you get prepared for it and learn all the technique you required thoroughly. You have to be very confident about your knowledge and the strategy. Ideally UX is a pre project activity but most of them time you might end up working on parallel with development. You will not get time to learn anything new.

You can learn UX by reading online articles, taking physical courses etc or as an alternative you can find a mentor who could help you on understanding your role and the contribution. At least for the first year you would need his/her guidance. You can use the mentor expertise to understand the user problem and to get suggestion about best technique for a use case.

Being myself a UX designer working for more than 7 years now, I do mentoring for the student who aspire to become UX Designer. You can email me at [email protected] or call  [phone]

[designsappy]

My experience on HFI UX foundation course

I started my career as a Graphic Designer and worked on various companies. After 6 years of experience, I though of taking a career shift. I know UX was the fancy term among the designers at that time and it has job of high package. I was little skeptical about the UX before, because it requires lot of user interaction, Being a introvert myself, I tagged as not suitable for the role. later I realized, I can't grow any further than Senior Graphic Designer and according to industry I'm already overpaid for my role. I had to change my role I wanted to move further.

I decided to jump into to UX by any mean. Since I don't have any prior experience I thought I would take a formal training on that. I search on the internet and contacted several institute but nothing seems to be satisfactory for me. Than I call a CEO of a startup, who provides UX related service. He suggested me to take HFI course. I told him its too expensive and I don't know how much useful the would be. He cleared, its a perfect course for my experience and I wont regret for it later. That gave me a confidence and register for the course immediately. It was 1.2 L at that time and I took personal loan to pay for it.

It is a 10 days course, conducted on a decent 3star hotel. The course was good and I had realized it is the perfect role for me. Though I was not a social person, I found it is interesting to talk to user and understand their needs and put my brain to identify a solution. The usability testing part has lot of formalities and need lots communication skills to conduct, which I'm still learning But otherwise the course was very useful and I had landed in a job where the monthly salary equal to the entire course fees. Nice deal right?

I felt like I just started my career. Now I'm practicing it for a last one year. My designs are more reasonable and logical than before. I can understand the user problem and provide better solutions. Yes! forgot to mention, HFI exam is very tough to clear. I had failed on both the 2 attempts, May be I would take it again next year. But That didn't stop my career growth, I got the knowledge I required for the job.

[designsappy]

Creating a Simple Brand Guide for a Start-up

Brand development is a time consuming process. The growth of the Brand is ensured by the consistent use of logo, colors, typography, design style, tone of voice etc. Hence a brand guide becomes very much essential to maintain that consistency. Employees must be educated to follow the company design principles. Brand Guide would be the reference for them. It avoids unnecessary chaos and confusion and improves the overall workaround time

Importance of Brand Consistency

Let’s look at an example, Amith applied for a bank account and submitted all his documents which were asked. The bank verified the documents and created a new account for him. Amith received a welcome mailer the bank as the below image shows.

He read the mailer, notice the color, image etc and He know it for sure it was from the same bank where he submitted his documents yesterday. Subsequently, he has received many other mails from the bank, everything went smoothly.

At one day, amith has got a problem. He has received a mailer from his bank saying "please click the link below and change your password immediately. Amith found something fizzy in that mail. He noticed the mailer design is not relevant what he has seen before.  He suspects this could be a spam mail and ignored the mail without taking any action.

But what actually happened was, a new designer joined the team, and because there was no brand guide to refer, he followed his own pattern. This is why a brand guide is important. Design creates a visual library inside us. Anything which is conflicting with us will not be trusted. Same thing has happened on amith case. Hence the consistency is very important for the brand development.

Every designer has their own style of doing. Business needs multiple designers to execute each campaign. Brand Guide helps to regulate them all in the desired direction and attain the final goal.

What a visual guide must have?

Ok, now I'm convinced we need a brand guide. “What is should have?” must be our next question. Design requirement of every company is different. For example IT companies such as Wipro would conduct conference and events, participate in auctions, meet new customer and present their proposal, introduce new technology idea etc. They do lot of campaign to attract customers, where as an Auditing company like KPMG, They might create more report, presentation, Infography and many data driven visuals. The graphic requirement of every company is different. Similarly the new age companies like Uber and whatsapp. The content in the visual guide will also vary accordingly. It will be very elaborate to describe all of them in a single post, Hence I have explained some of the most essential core elements to be there in a visual guide.

The Logo

Here we would find the logo of the company with its other variants, link to download them in vector format, do's and don'ts etc.

About the company

This section has information about the history of the company, motto of the company and its core values etc. Every designer would love to know about the company. This would help them to choose the right styling.

Typography

This is a very important section for any company who runs on information. This will have details about the fonts to be used, size, combination, chart visual etc.

Color

Mention the colour codes of the brand and their values in RGB, CMYK, and Panton Value etc. Then for more colour options it’s good to define primary colours and secondary colours.

Image usage policy

Few companies have no objections on using vector images, but few companies are very strict about their image usage, some examples to be shown to user to know what to use and what not to etc.