Hi everyone, my name is Kishan Simon and welcome back to C-Shark on a live show. In this Ask
Me Anything series we have Neet Shast joining us from Mumbai, India and he's gonna be talking
about UI, UX and lot more that we people struggle a lot and it doesn't matter if you are a software
developer or you are a manager or you are a team lead, UX is something that we people
really struggle a lot and sometimes we just don't look at it and we have to face it sometimes
a lot in our trying to work. So Neet Shah is an expert in this field, he's joining us
from Mumbai, he has been working a lot on this field from past years and today specifically
he will be talking about different type of prototyping tools that we have, he's gonna
show us some demos and briefly cover some of the topics that may be lagging during this
time of development. So hi Neet Shah, how are you? Welcome to the live show
Hi, how are you doing? I'm good, I'm good. Whoever is watching me on any of these platforms or will be watching in future, first of all
stay safe, stay healthy. Alright, so Neet Shah tell us about who you are, what you do
where you are standing up today so that people get an idea and what you are gonna learn today
So I am basically from computer science background just like you and the folks. Little bit in
my journey I realized that designing and understanding people is what my forte is rather
than development and coding. So little by little I made myself, I started learning from
my own. I got mentorship from many people on LinkedIn and over the world and moved myself
into UX. So I am not an expert, I can't call myself that, not by choice. So maybe at medium
level or mid to senior level. But yeah, we have still long way to go. So I have been
particularly in UX field for 3 years and designing and I am more of a, because I have a technical
background and I am very logical and rational about things in general, in life also. So
you might not find a great picture or good design by me on Google or Behance or somewhere
because I literally don't believe in it. Because designing for designers, designing
for designers from university or university is different thing. And designing which is
very easy to develop by you guys, by developers and continuing by users is the main aspect
of this whole field and whole UX umbrella. So that's what I have been trying to do to
encompass my logical and technical mind with my creative mind and make the feasible yet
delightful yet creative solution. Currently I am working at a studio called X1 Studios
They are into enterprise UX, they are totally different and I am very intrigued by enterprise
UX. I think my most of the work is in enterprise domain only. So that's why I joined them
And about today's talk, it's not more of a UX UI kind of talk. It's a, you know, HCI
in general, UX product development is a very big umbrella. UX is one aspect and one little
aspect of it is the process IT. So, and there are many myths and tools and all these and
that about prototyping and stuff. So that's what I'm focusing on in today's talk
That's great Neeth and one thing that I really love that you said at the very beginning is
that you start from a computer science programming background and then you move into this UX
UI which really helps you bring the experience of development into this UX which may be
very suitable to many people who are joining us today who come from a developer's background
and want to understand how important and what are the some key features of UX that they
may be making and they should be looking in the upcoming projects. So I think in the next
20-25 minutes we are going to run the show, take us through some of the slides and presentations
and Neeth is also with us today. You can just drop any questions in the comments below
and Neeth will be answering them after he completes his slides, maybe after 20-25 minutes
and then we will be discussing a lot more that he has sponsored for the slides. So Neeth
you can just go ahead and maybe share your slides and then we are good to go
Yeah, so moving from development background, like I want to only emphasize with users but
I can also emphasize with developers as well and I know their problems, I know their pain
points because basically that's who I am. So let's start the, so before starting the
presentation guys, I just gave today so don't consider me as a kid but my presentation will
be very light. I will try to you know syncopate with memes, internet memes to take this very
light with it. Like I don't want to bombard you with different designs, screenshots or
that's all you can read, go to Google and read all about that. Medium is full of that
So my presentation would be a little childish, you might feel about that but it will be not
and I am still trying. So yeah, let's start the screen sharing. Okay, so I'm just, let
me go through this if you can see my screen. I just started the presentation. Can you see
my screen? I just made it so you can see your screen. And is it clear? Yeah, it's very clear
Okay, so we can go through the slides, right. So hello all, if you are joining right now
welcome again. So let's start this. So what is a, you know, prototype? Okay, so a prototype
like it can, it's not a final product and it's not just the, you know, sketch or something
you have designed with pen and paper or something. It's between them. So it's not like, this
is a standard prototype definition, you know, for all the industries. But for software specific
prototype, it's applied basically. So it's an early sample model or product. It might
be the product, it might be the design, it might be the wireframe, it might be anything
which can help you, you know, place your concept, place your users and help you to make the
you know, future development decision. So the software, we hope design prototype and
design or implement prototype to get, you know, feedback from users and stakeholders
involved and all those kind of things. And it also allows software engineers some insights
into, you know, when our project will go, what's our scope, what's our milestone and
all those kind of things. If it doesn't work out, should we pivot or not, you know
pivot or not. That we can, you know, like there are many incidents happen in the, you
know, bigger companies, like they have started with great concepts and they just, you know
developed all design prototypes and they thought that it might fail and they just pivoted their
idea to different things. So that's what prototypes help. At that level, prototypes can help you
So here I am showing you one prototype. So by the look of it, you might think that it's
a coded thing or I have coded it, I have implemented it. But if you are 100% sure within design
tool only, the design tool is called USPRO, obviously. So let me, let's go through it
So that's what, so the prototype can take user input from the, you know, user. It can
do the user authorization and authentication kind of interaction, data validation basically
It can also do the automated animation thing. Then it can scale your thing into variables
In particular, that's custom English and based on that, it can show the user name in
certain situations. And it can also leverage your native component of, you know, if you
are using it in Android or if you are using it in Apple Mac, anywhere you are using, it
can leverage your native thing to get the user. So you don't need to design all the
components from scratch because at the end, users are going to interact with the readymade
component and not the thing you have designed already. Right? So that's the one example
of prototype. So that level of prototyping I am talking about and I will be, you know
I will be talking about English, next thing. Okay. So that's the man. Okay
So as I told you earlier, the prototype. Sorry guys. Okay. So the prototype can tell you
a portion. Why is it happening? Okay. The prototype tells you a portion in terms of cost, in terms
of time and in terms of resources. So, its creation is very low cost. If you are just designing
if you are designing some static prototype, then it's very low cost. If you are designing
some mid-level kind of prototype, then also it doesn't cost a portion in terms of time
and all those things. And yeah. So this is one example of rapid prototyping. I have picked
up, you know, meeting with clients for their projects and I just designed this prototype
in two hours only. But it looks very finished in terms of interaction and content and you
know. So that's what you can do if you are leveraging the power of design, then the level
of pleasure. Okay. So, Stephen, can you hear me? Just tell me like. Yeah, I can, I can
hear you. Yeah. Yeah. Just, just, just talk here and there so that I can. Okay. The prototype
you know, also helps you to meet your real users and their needs. Okay. So, you have
great idea, you have great concept as a developer or as a, as a, you know, founder in your mind
But sometimes what happens is, things doesn't work. It just doesn't work in the mind of
user or in the mind of people that are going to use it. Let's take example is Facebook
redesign. So Facebook claims that they have redesigned their product, their, you know
their experience and tested it with millions of users. But currently, whoever I'm, you
know, seeing or talking is, they all are some, they all are meeting at some level, the new
version of Facebook. The older one was better. So that's where, that's where this prototype
thing helps you to, you know, know the user and their insights about it to analyze your
concept is making the user meet or not, you know, they are staying in one line or not
In that way, it helps you a lot. Yeah. This is one interesting story, especially like
due to my audience, my most of the audience are, you know, developers. So I am, and if
you are doing this, you are not at all wrong or not at all, you know, on the wrong path
but you may have to think about the better way, which is already present. So this photoshop
story, right? So when there were no such tools of prototyping or things, which websites were
still going to be designed. So people were using the tools available with them and they
were mostly graphic designer or communication designer because US was not in that, they
US hasn't made their place in the industry as a, you know, independent thing or as a
domain. Right. So people were started doing CSV thing. First of all, CSV is a raster design
tool. So, you know, that pixel blurring thing and all those kind of thing happens. It's
not even a vector based tool, but it's a pixel based tool. So first of all, there, our approach
is wrong. Then photoshop is made for basically photo editing and photo source production
but people are using it for web products. And I am in a lot of jobs. I even got some
offers also to do the PSB to HTML thing or do the PSB for us. We will do the HTML. So
still people are doing this, like small companies or, you know, those people are like the, that's
the motive of this process to allow you with the latest trends, latest tools as a developer
and how you can save your time, resources, all those things. So the PSB thing takes like
designer takes one week to design PSB. Then you develop the HTML, working HTML created
a code and then you see that it's not working with user. You again go to designer and design
the Photoshop thing and it goes on to the loop and it never ends basically. So, but
the tools are evaluated. Even the company who provides Photoshop also provides tools
for Adobe SD. You might already be aware of it. So the things made for particular things
you know, Photoshop is made for photo editing. Adobe SD is made for experience design, you know
that kind of thing is there in market right now. So you definitely want to check it out
You can go through it and you can avoid for at least for your next project or your next
you know, task to do this kind of a course. So this is one very famous Indian name that
my power has been used for a long time. So I'll just put it back. Okay. So now prototype
is, as I've said earlier, very big umbrella or very big term in terms of like right now
things are getting very better in the design domain and people are still like everyday
one new terminal are being introduced. So these are three categories. I have, you know
defined this, it may not be standard one, but this is how I see the things and most
of the people I see, see the things, you know. So first is, you know, those static VDIs or
with limited interaction. So I am not even talking about Photoshop things, that's totally
you know, you need to remove that from your thing. And I'm just now right now talking
about your experience design prototype. Right. So first is a static visual or with no or
very limited interaction, you know, so they are mostly what you design with Adobe SD
Even they are now becoming more and more improvised in their interaction sections. So I'm not
bashing them or something, but that's what the thing currently is. You can design, so
basically Adobe SD or static, they all are vector based. Again, they are vector based
just like CorelDRAW or Adobe Illustrator. Right. But for experience design, instead
of communication or graphic design, they are for experience design, but they all are
vector based tools only. So it might make a little or more gap between developer and
designer. That's what we are talking about, like designer, developer gap and their hang
off. Okay. So these kind of tools, they have very limited interaction. Like you can just
navigate through one page to another page. You can pop things up and you can do a little
bit of animation kind of things, but not a major interaction, which is which are in use
of current day web technologies. You know, for example, user input, then selecting the
calendar of your native or whatever device you are using. Those kind of things, those
kind of things you can't do in this kind of tool. There might be some plugin or external
available for that. I'm not sure about that, but natively you can do that. That I'm very
sure of. Then another is this fully interactive socializing. So that's what I was talking
earlier, you know, that's the password and phone number thing. So there are very, like
these tools are getting revolution. These tools are getting in the market. They are
getting noticed by the people and people are leveraging these tools. I have seen thousands
or hundreds of websites made just using Webflow. So Webflow is very great tool for, you know
websites, your website development, your business website, or even the CRM website. So they
are very great at that. Then Flamer app is there. It's produced by Flamer only. Then
there are multiple tools. UXP is there. They all have their own learning curve. They all
have their technical, you know, limitations. But you can do the very similar kind of thing
in all of the tools. That is designing this fully interactive website, which is like
in my perspective, any prototype for any digital product, user input is very important
thing. Interacting is one thing, like touching and tapping and swiping. And user input is
very important thing, like inputting your name, inputting your birth date, you know
like selecting your calendar and that calendar experience. That matters a lot. For example
if you are using banking application, OK, and if you want to download account statements
for two years ago, for, OK, for a bank statement of 2018 or 2017. But the calendar is very
basic. It's not designed or developed properly. Nobody even try to, you know, give attention
to that thing. So you need to go one month, one month, one month for 24 or 25 times back
and then you need to select your timing and download the statement. Again, things happen
things happen, like you need to select 90 days of ISE tuning one of the banking application
that I'm talking about. It's currently there. So you can download up to 90 days of account
statement. Right. So for example, if your quarter has two 31 months and one 30 months
then your days become 92 and not 90. Now user is not very free. They don't have time
to count, calculate the number of days coming into that particular period. They just want
to, yeah, so instead of 90 days, they might have, you know, they want to implement big
quarter thing. Like you can download up to one quarter or up to one month or two months
So those kind of things, if you have designed very basic, you know, statement and goes into
development, then this kind of thing goes unnoticed because in design you have just
put a screenshot of your design of calendar. Okay. And in development, they are just using
native calendar. So that's a big, big difference between design and development. And nobody
from product team gave attention to that thing or, you know, they don't even care about this
calendar thing. But this little nuances of UX method a lot in terms of customer experience
or user experience. So that kind of thing you can do with, you know, fully interactive
functionality. And third is the coded version of your product, which you might not be doing
right now. Like the designer provided you the PSD file or SD file. You are converting
that into HTML CSS and then you can create, you are testing it or whatever you are doing
with that. So, but if you also, they have very limitations, their cost is high. You
also, you need the designer and developer both for doing that, you know, because if
developer is doing that only, he's not quite aware of UX or he's not very, you know, special
in that field, you might lose the UX aspect of the product, design aspect of the product
So, and also people call it MVP sometime or something like that. So these are three kinds
of products that I have sorted out for simplification. So now, based on your product, based on your
project, you need to think about like where I'm giving, I want to do. If you have very
basic or simple design, which doesn't have a lot of user operations or this kind of thing
you might want to go with mockup or something like that. So it's up to you and how you
decide and how your company decides. So, yeah, I actually covered all the things in that
category. So yeah, the good and bad about static prototypes. So, as I said earlier
static prototypes might have interaction limitations. You know, they are designing mostly, you know, vector-based tools. So there might be a technical gap, like you have designed
if you are designing in vector-based tools, you can design anything, right, in screen
You don't, like there is no limitation that you can do title this much, you can do margin
like that, you have to do 24 pixel margin for screen title and all those things. That you
as a designer, we need to stay conscious about that. Okay. So that might create, you know
this designer-developer gap, in that user confusion of prototype, because design product
is very well, but there is a development of technical limitation that you can't implement
everything that you have designed. For example, the complex icon or complex animation of
you know, bottom navigation or something like that. Then user will, if you are user or stakeholder
might get, you know, different, like we have great design, but in development, we lack
the thing. I know this thing, this might be happening to a lot of you guys, a lot of times
as a developer, that designer has designed this thing, but you are failing it to implement
this. So that's what this thing creates, this gap. And that's when the designer-developer
you know, civil war happens and developer tends to help designer, designer tends to
help developer. And this kind of thing happens. This is good and bad thing about interactive
project. So interactive prototype is very technical, but you can design, you can make
it at design level only. You don't have to, you don't need to code anything or you have
to do coding at very minimal level, you know. So for example, I, and all the tools, most
of the tools are web based. So they are leveraging web technologies to design their platform
or ID or design, whatever we say, the tool, they are leveraging that web technology. So
rather than going graphic based, you know, vector based thing, like other tools, they
are using this vector web thing only. So there, the limitations already covered in the tool
itself. For example, in Adobe XD, I can take the outline of any object. For example, if
I am drawing the circle, an outline of circle, I can do whatever, I can give 0.20 pixel
I can give 20 pixel. But if I am designing that same thing in red screen, okay, I need
to give border greater than or equal to 1 pixel. Like you can't go in pointers, you
can't give 0.60 pixel as a, you know, that's what we say, border of the element or border
of the object. You got to at least have 1 pixel of border. And that's the 100 PSS way
You can do 0.20 pixel thing, but you have to do that manually. It's not a general practice
or popular practice. By default, PSS allows you to do the 1 pixel border, 1 or more pixel
border. Then you can go in 0.1.5 or in that order. So that kind of thing, tool itself
creates, you know, covers the limitations and creates, let's create the designer environment
around that. That's how you can do the designing thing with this limitation. So it's basically
going to the web, web theme only. It's same in your lab only. And they are using web components
only. So it's very cool, you know. Also, all the tools have developer or inspection mode
where you can go through CSS of each component, basic code. Some tools even provide React
and React Native component also. They have started doing that. Even these tools are
developing. So we will go through this in a later part of this talk. So you don't need
to count everything and do that pixel calculation with the help of some Chrome plugin and all
those kind of things. You just need to open the prototype, go to the inspect mode or specification
mode and you can just copy the CSS and apply it to your real production code. So that's
what the good thing about interactive prototype. Bad thing is as a designer, it might take
a bit of a learning curve. Because if you are purely from art or design background and
if you don't have any technical background, you might, I am not saying you definitely
will, but you might suffer from some technical aspects of these things. And you might face
some learning curve here. There's also lack of awareness among the designers because of
the trend of using popular tools rather than using the right tool. That's very bad in designers
themselves. People are using just popular tools to get into the attention, to get into
the top of the leader or behind or something. But they are not thinking about the actual
product or actual company or actual development or life cycle. So that's, as a designer, we
need to take responsibility of and we need to take care of that thing. And as a developer
you can also demand that thing. We won't over design this tool rather than just screenshots
and all those kind of things. So I'm just showing you how much we can achieve via this
tool. So if you are a developer, you might probably be aware of a LUNES algorithm. So
basically what LUNES algorithm is, it helps you to validate your identification numbers
like credit card, debit card, Canadian citizen number I have read somewhere. In that domain
you can do that. So I have implemented this prototype in UX team, design basically, not
engineering, design which takes care of the credit card details and runs the LUNES algorithm
on front end side, like on the design ending, parallel. So you can just see this. And so
sorry guys, video might lag. Okay, so you can enter your details. Now, if training LUNES
algorithm, it will show you the laptop and it will automatically that user thing come
with the card thing. Now I am writing this, I am inserting the right debit card. Don't
try to use this debit card, the bank, my account doesn't have... I was exactly going to pay
the premium that you have paid, the card is... Yeah, you will see. So, yeah, so X-Carry rate
is wrong, CVV is wrong and even if the debit card is not a credit card, so it also validated
the, you know, this thing, year and month and all those things. It's taking into the..
video lagged a lot, in this card show, Google slideshow. Video lagged, okay. So, now it..
I think one thing that people would give me a lot is that when you have those numbers
right, there is a quite proper spacing right, there is a 4 digits and a 3 digits and a 4
digits. That's taking very care that it will be taking shape very nicely. That also applies
you know, the next field gets enabled automatically. When you enter data in one field, your input
field, your cursor goes to next field automatically. That's also possible with this kind of advanced
tools. In basic tools, you can't do this trigger thing. This is called trigger or action in
technical terms. Now, this will take... Yeah, this will take data also and shows in variables
which will be local only in that class. As soon as you refresh your design, the data
is gone. And it also shows that design in my card, in design. Okay, whatever I enter
that's the exact detail. And done. Yeah, still, what were you saying? Yeah, I think
one thing that also I just now noticed is that, by... until that number is not predicted
card or debit card number, that button is inactive, right? Only when... Yeah. Only then
that button is active and then you can go to the next page, which is very brilliant
Yeah. And when you say that it is being stored in a variable, now, of course, the person
you're sending home, you do not know about it. So, this will really see that, hey, where
are my details when I move from one page to the other. So, details are coming. It is displayed
in a very well-designed chart over there. So, that is something that I've probably been
you know, speaking with many tools out there in 3Tools. And I think this is something very
useful that we have. Hmm. Yeah, nice observation. Congratulations, you are a UX guy. If you
have observed this many things, you know, inactive button thing and all those things
So, these are... these all are called micro-interactions. Okay. A whole lot of other things you need
to, you know, see... we can go through about, yeah. Those are all called micro-interactions
So, I'm seeing this red and blue and green and red. Those bizarre things are coming
After entering everything, my button gets enabled. All those things are called micro-interactions
So, yeah. Obviously, these... the tools take care of everything at this level also. So
yeah. These are the prototypes. So, the good and bad things about the interactive
prototypes. Okay. So, generally done by developers to... Okay. So, sorry guys. It's error in
that title. Yeah. The good and bad about the decoded prototype. Yeah. So, they take a whole
lot of time to develop. They take a whole lot of time to get produced. That's the very
basic limitation. Also, if you are only a designer or if you are only a developer. Okay
And if you want to do that, you need to collaborate with other parties. Okay. You need to have
a team of more than two or more than two people to develop this thing. Like one guy designs
it, one guy develops it. If you are a unicorn and you can do both, then it's great for you
and your company as well. But also, if you are a unicorn, you are a human only. You've
got 24 hours only. You need to do design and development both at the same time or at the
different time. So, it will be going to take more time, more resources anyway. So, that's
the thing. Also, if you are not developing web this thing or something app, you know
mobile app or something like that. So, there might be this system dependency because if
you have, for example, if you have developed your thing for Android 6.0 and 4, right, and
your user, on what user you are testing, their device is Android 4 or Android 5, it might
not work or it might lag the product. So, that kind of thing also you need to take care
of. Basically, the environment information. That's what we call in our, you know, development
life, the environment information. If it's web-based thing, it also needs some kind of
like, you need to use that in Chrome, you can't use that in Internet Explorer and all
those kind of things. So, even if after developing the coder version, even if after investing
so much time into the coder prototype, you need to take care of those aspects. It's not
like you can run it universally on every device, on every thing. So, that type can happen
So, that's the limitations of coder prototype, not the interactive coder. Then, the new term in the market, the no-code or the low-code revolution. Okay, so the tools
I have talked about, they have, you know, figured out the way of the gap between designer
and developer, what the troubles we everyday go through to provide the documentation to
designers and get back the designs and the specification forms, you know, all those back
and forth happens a lot. These tools have invested a lot in the research part of this
thing, implementing the solution for that, designing for that, designing, you know, crafting
the solution for that. So, all tools, all the leading tools in this particular area
are coming up or have already some kind of presence in this no-code thing. For example
I have talked about Webflow, okay. So, Webflow is currently running anywhere. You can go
to Webflow, you can design your website and you can just produce it and even host on your
domain. They provide end-to-end. You can even have CRM management also. And it's very basic
So, Webflow is not technically a no-code. I can't say it's no-code. It's called no-code
You know, you need at least some kind of coding knowledge. At least, if you don't need to
you doesn't need to code, but you might need to have some kind of technical knowledge
Also UX team is coming up with a thing called Merge. Then Modules, Modules is very great
Just check out their app, Modules.app. They are creating a central design system for developers
and designers. So, for example, if you are a designer, so, till now, what happens is
the people complete go-to designer, designer designs the prototype or product or mock-up
and then people implement, the developer implements the code. Now, the next version
or next update comes, right? The designer has changed the language. So, there's a lot
of, you know, inconsistency might happen. There's a big probability of design inconsistency
if the designer is changed, if the environment is changed. So, the big companies are creating
their own design system to centralize all the designer development and to centralize
the, to maintain the consistency throughout the updates. So, Modules is solving that problem
So, as a designer, you just need to go there, design a design system first, then design
the product using that design. And all those happens at real time. Whatever you design
at that design system, the real code or whatever code they are offering, whatever language
they are offering, that code produces automatically. So, it syncs up with your GitHub, it syncs
up with your, you know, developer, your code repo and all those kind of things. So, Modules
is very different in that domain and I am seeing a big future in that thing. So, they
are more of a visual editor. They call themselves visual editor or, you know, no code editor
and something kind of that. So, now, don't worry developers. So, you are a developer
Should I be scared? Like, if designer is designing the front-end thing, designer is designing
the components and the code is automatically generated by the system only, so what will
I do as a developer? That situation might arise, you know, in your mind. So, whatever
happens, whatever AI comes or whatever technologies comes, people need, like there is a need of
people, there is a need of sharpest mind to develop that system, to find the, you
know, find the problem in that system and improvise it. So, you are not going out of
demand any day. Yes, but if you are still at some old technologies, if you are still
at, as I have mentioned, you can deal with these things. Like, if you are still relying
on some particular thing, like I am just developing the Wordpress thing, for example
okay, not the themes, not developing the themes, it's good thing, but I am just designing
I am just doing the client work by using Wordpress themes and designing their website. That's
my only thing and that's all I know. So, it's right now good for you to make money, you
can make the things, but as this change level is nice, it might make a big trouble in your
pocket. So, learning this change, learning the development things, learning this, learning
about this new tool, as well as learning about UX at some level, not the expert level or
not the design level. I am also saying that I am not a perfect mutual designer. I am also
lacking right now at the mutual level, you know, the color combination level or typography
level. But you improvise in that. You can't learn that in one day or one month or just
by going to one UX lecture. That's correct. You do that by doing practice, practice and
practice. So, just have your interest in field of UX, just have your interest in field of
design, have your interest in field of general digital products. It might make you a different
one, a unique one and can lessen your troubles. I am a designer. So, if I am a designer, am
I safe? Like, we are becoming a team. I am developing also, I am designing also, I am
designing the design system also. So, should I put in the developer job or I can make a
very nice thing like that, the work will go on. No, you are also not safe if you are doing
these things, you know, just designing 3D pixels without applying usability principles
without. So, as a UX, if you are a designer and if you are a UI or visual designer, what
now you need to work on is, you need to work on your user skills, you need to work on your
usability skills. How can you improve the product in terms of usability and not in terms
of look and feel. That you achieved by designing very good and very great shots on Trigger
and you know, other platforms. But does it really need to be real life? Does it make
sense? For example, I have seen many screenshots of designs, people design very 3D pixels and
they have their bottom navigation and in bottom navigation they have 4 or 5 icons. But icon
doesn't have 10. So, as a mobile user, I can't imagine what it will be. That happens a lot
even on the right website it doesn't happen. Yeah, it doesn't. So, in design, what they are telling
Instagram is the same thing. Instagram doesn't have a label to their icons. But you need to
come out that self, you are not the Instagram and Instagram evolved over time, you know
in 5 years, 6 years, 10 years. And people are used to it, people are familiar with it
And even if you are a new user, the functionality is very simple. So, icons are sufficient enough
Profile of profile icons, you know, adding the photo as plus icons. So, it is basically
good in terms of usability. But now if you are designing some kind of wallet app or banking
app or some kind of complex product and you are still relying on icons, it will take a little bit
swaddle and the early struggle of apps makes a lot of bad impression of products in lines of
users. If your user is struggling in onboarding, if your user is struggling in first or second
time of app, he might not use your app in near future. He will just find a resource
behind, basically. It doesn't help you to do your task. So, in that domain, you need to go deeper
into it. There are 10 heuristic analysis principles that go through the Google material design
what they are suggesting to implement those things. Then there is one thing called atomic design
system. So, there are a lot of things in the UX domain, especially, that you need to learn about
you need to think about, and you need to be a good opt-over in terms of that. So, if you are just
designing the, you know, predicated, if you are just designing designs which doesn't make sense or
which doesn't have logical latent to the design, it might be very difficult for you to stand up
Because you are basically designing a flyer or some graphic card, and it's not an app. Because app
has to work on some device, app has to work on with user. You don't need to interact with flyer or
poster. You just read it and grab the information. But in terms of digital products, you need to
have user input. You need to have user interaction. So, you need to take care of that. And it also
happens at screen level. So, one screen has thousands of things. In flyer, you have one flyer only
There are no layers. In the digital products, there are layers. You have five main categories. So
make yourself better in terms of information architecture, in terms of navigation, in those
things. So, you will be great as Boeing, right? I am a PM, you know, founder and CEO, X manager
in here. What things suits for me? Okay. So, if you are still looking for people who design, you know
CSV file for you or just mockup for you, then you find another guy who designs HTML or something
like that for you. Then you need to think about your development life cycle a little bit
Am I doing the... So, your duty is to optimize the time. If things can develop within one day
I shouldn't take one day and one hour. It should be developed within 24 hours. That's your ultimate
motive as a PM or founder of CXO. Okay. So, and also if you are an owner, you know, if you are a
stakeholder of that product, you have a great idea about product. You have a great market knowledge
as well. But you need to test out whatever you have developed, designed, implemented, whatever
You have to design that with your user. You know, sorry, design, test it with your user. Some kind of
usability test. You know, basically listen to your real users by designing early stage prototypes
then working with users on their insights. Then again, redoing that prototype and coming up with
final iteration at some level and then go to the production and just launch your product or website
or whatever you have. So, that's what you need to take care about. How these things can help you save
your time, help you save your resources. That works in it for you. Yeah. So, any questions
So, Simon, I have a full screen presentation. I can't see questions. You can just, I can just move your
screen and then you can just come back. You can come back. There are, yeah, there are two slides that I need
to go through. Then we can do the Q&A. Okay, just let me know if you have any questions. So, you can
check me out at Mixed Art of Design or you can drop me an email if you want to learn or if you think that I
have passed on the wrong information or incorrect information, you are happy to correct me because I am a
learner. I'm just starting out. Okay. So, also I want to special thanks to Randall. Hi, Randall, if you are
watching it, I just commented. Yeah, he's watching. He's commenting in the video. You can just see his label
He'll read his comments. Yeah, yeah, yeah. He'll go through. So, he has encouraged me a lot to do this stuff
Like, I wasn't believing myself that I am at that level or not. But, yeah, thanks, Randall. You can check his
website. We have got very great materials and collection of people, collection of material. It's all in one place for
you. You definitely want to check that out. Yeah. So, basically, any questions? No, one thing is that your presentation is
very amazing, Miss. I mean, this way having all these, you know, his team giving a presentation out of it, that's very
interesting. And we have got a lot of content in past 4845 minutes. That's really a lot to take away. Yeah, and also watch
the campaign. People will be watching it later on. So, of course, one will have to take pen and paper down and to note things
up. He started from very working photography. He went on to different ways, like the static or source code or interactive ones. He
talked about different tools available. He was even talking about logos, no-code approach. He designed builders
synchronization to version controls like GitHub. There's a lot to be taken away in this section that we have covered. And that was
a really amazing section that we put up. Let us go ahead and take a couple of questions that we have. First is by Stevie Davis. He
asks, is it possible to get from PSD design to a bootstrap source code? Is it possible to get that? So, I feel I haven't designed a
single pixel in PSD. So, I may not be expert in that field. But in my knowledge, you have to do that manually. Like the way you do
from PSD to HTML. It's the same way you can do PSD to bootstrap. But I'm not an expert in that. So, I can't give any comment on that
So, is it possible for any of the code wrapping tools that we have discussed today, any of those tools provide a way to have those
designs into a bootstrap framework? Is it possible? There are some plugins available. Yes. If I'm not wrong, that converts our code into
readymade bootstrap components. The web flow, it generates entire website. So, including your CSS and bootstrap, both things. But most of the
tools generate HTML, CSS, CSS and so on. Not sure about the bootstrap thing. But there are plugins. Even I have gone through some tools
It's an Indian startup only. I want to take the name of them. It's called builderx.io. I'm not sure as a product that they are, as a company that
they are. But I have given a little try on that. Like you can convert your text file or you can design in their own platform. And you can generate
React native and flutter components. All those three kind of development components from designs only. But I haven't used it extensively. So, I can't say
the limitations and pros and cons of that. But you definitely want to check that out. It's called builderx.io. Then also one tool is getting popularity
right now is uizar.io. So, uizar is very full step in terms of design. Like they take your photograph, if you have sketch in pen and paper, right
Sketch with pen and paper. Using here, they convert their pen and paper sketch into builder blocks, designer blocks, digital designs. And you can even
export the design, ready-made code and design and all those. So, it's very full step. From paper to working code, you can do all things at one place by just
taking the photo and playing around the design tool here and there. But again, it's just coming up in the market. So, all the tools, you know, most of
why many tools are in beta or many tools are not in popular demand? Because they are still struggling to make it real. You know, the connection with
backend, the connection with database, how it will, the responsiveness, that's a very big aspect. Like if you have designed 48 pixel by 48 pixel box for your
desktop. And in mobile, like mobile devices, all the mobile devices have different things. So, they need to get responsive in terms of, that's why we use
bookstrap and React and all those kind of things to make the design responsive with writing single set of code or instead of writing multiple sets of code
So, that's, I tell you that's one very big issue. They might be working on or they might be failing right now to solve. That's why they are not in
mainstream or they are not in very real usage. So, next question
Yeah, I think that's very well answered. I think, and I think at the very basic, at least bookstrap is, nowadays most of the code writing tools do provide
CSS code. So, I think using it, that is a way to get started with your mobile
One question we take from Sagar, he goes and asks, what is the best free website or tool for prototyping? I think, maybe as we have discussed a lot of
prototyping tools in this session, maybe we can go ahead and say, what are the different resources you use in your, basically, life to get inspired for your
prototyping and UX design? What resources that you prefer to use? So, for, if you are looking for absolute free version, then I would suggest Sigma, because Sigma has some free plans that you can, but again, it will not be
fully interactive one, like I showcase. So, everyone has their own sets of offerings, their own sets of features, like not every designer or developer needs
those authentication and all, those kind of introduction, right? Not every product needs that. So, as a designer, I would also take the free approach or the
approach which is easier than the, these ones. But, when it's used for this kind of thing, then using the, like, for example, if you are working on some
banking program or some financial thing, then using this kind of tool makes sense. So, it totally depends on you. You can check out. All the tools have basic free
versions. Basic free versions, they all provide, because they want user onboarding, they want people to use it. I have seen a lot of comments that UX team is not free
Yes, UX team has one thing. Yeah, so, UX team, one thing, they have 16 day free trial. Also, you can have various free versions, very limited, but free versions
I guess, as you said, you can just make one project or one project, I think, that's nothing more, nothing less. One thing they provide, and also they are providing some kind of student
discount or free tenure to students, that you need to. So, just go through their landing page carefully and read, like, I was just going through it earlier, because I knew that this
will come up. So, I am not a UX team advocate or something like that. That's my preferred choice of tools. But I also love Figma, the way they are scaling their product, the way they are
Like, UX team has limitations of third party integration. Okay. So, for example, I use LotiFiles, the log. If you have heard of LotiFiles, they provide animated, effusive or animated
files. So, Figma has introduced your, what we call it, plugin for that. So, Figma, Sketch and Adobe XD, they have a good plugin market. So, developers also can solve the designer's problem by designing
plugins. One of my ex-company has very popular plugin called Icon Soft. They are very popular in the icon domain. So, there are a lot of things that this team provides. So, UX team has not opened their doors to the developers yet. Like, you can't design, develop a plugin. They just do it manually, everything by their own. Okay
So, that's why it's not getting popular. That might be one of the reasons. Designing team will be one of the reasons. So, you need to, if you are a UX team, check that out. Check all the tools out and make decisions yourself
Alright. So, I think, I started using Adobe XD, but eventually I left because I'm not a UX guy. So, I was just trying to, as a developer, sometimes it really starts depending on your designers, they code a lot, they really take time. So, maybe from this section, people have different choices. Either, as you said, they can either move into only static or if they want to learn interactive one or they want to move into source code or local one. So, I think from this section, people will have an idea
People will have an idea about which prototyping tool, which has which developers they want to go ahead and get started. Let's take one question from UX Stars. Brandy has jumped us from a long time. Could an R&D team really use the XTML exported from UX teams or is the value really just to get early feedback from users? I think this is a very good question that Brandy has asked
Yeah. So, not sure about the XTML, but CSS, the specification mode they use in their visual presentation mode. I have used myself for my portfolio. My developer, himself, he copied whatever I have designed. He copied the CSS
It might get a bit of laggy or a bit of lag sometimes. It's not perfect and I'm not saying it's perfect. But, yeah, he used this CSS code to directly integrate into the real code, real production code. So, he used that. Also, the XTML, one benefit I can see the XTML CSS running, UX team is totally online tool. It's totally web-based
There is nothing you can do offline. Not the presentation, nor the design. So, one thing what you can do is if you are going to some user testing or usability testing into some remote areas or into some areas where there might be a connectivity issue, you know. So, you can just download the XTML CSS code and XTML CSS runs on your laptop very carefully
And even if you are importing images from Unslash. So, UX team uses this Unslash API. So, you can directly import photos from Unslash. So, even if you download the XTML CSS code, those photos also get downloaded into that photo drive
So, once your XTML CSS is downloaded, that design will run on your machine without the internet. So, that one benefit I can see. But, I'm not sure. CSS people use. CSS developer use from UX team, I've seen all the time. But, the ready-made XTML CSS one, it might not make sense because of the responsiveness I've talked about
So, yeah. Yeah
So, I just wanted to let people come out from this COVID and Corona thing and have some relax. So, I don't wanted to bombard presentation with design and things. You can do all those things by yourself. Yeah
Yeah. Once in one last social meet, I will ask from maybe from Kevra P. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah