Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Designing with a Developer Mindset with Micheleh Souvannaratvongseuk
50:10 with TreehouseIn this session, Micheleh Souvannaratvongseuk will cover the important relationship between development and design.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Currently, Michelle is the Chief
Technology Officer at New Media Inc, but
0:04
has previously worked at Lucky,
CBS Interactive, and more.
0:08
Michelle's expansive knowledge
of many programming languages,
0:12
as well as experience in business and
community outreach makes me so
0:17
excited to have her with us today.
0:22
Please welcome Michelle.
0:24
[SOUND]
>> All right, thank you very much for
0:25
coming to this session.
0:30
A little bit about me,
I have been coding since I was small.
0:31
Designing since I was a child also,
really just starting with fine art and
0:37
silly things as a child,
such as drawing cartoons.
0:42
I think it was Disney characters and
Winnie the Pooh, and
0:46
things like that that I first
started drawing at a young age.
0:50
And I started to teach all the kids
in the neighborhood how to draw
0:53
those same characters, and
that's how [LAUGH] all my life,
0:59
my young teaching, or
an instructor in life started.
1:03
I built my first website
at the age of 15 or 16.
1:09
And really, it was just because
my parents were strict.
1:13
I just had no friends to
play with outside the home.
1:16
And so I was in chat rooms, or
I think it was chathouse.com,
1:20
I can't remember the site.
1:24
But it was where everybody
introduces themselves and said yes,
1:26
ICQ, I still remember my number.
1:31
That's weird [LAUGH.
1:33
But so I would just make a webpage,
cuz everybody would
1:36
ask you what your age,
sex and location was, right?
1:41
So you're putting a picture of yourself,
and your name, and all that stuff,
1:46
and I used to just send people
to that webpage [LAUGH] to learn
1:51
a little bit more about me.
1:54
And that was my first
experience in creating one,
1:56
was really just the profile for myself, so
1:59
I didn't have to keep repeating myself
when I was introducing to other people.
2:02
So that was when I was young.
2:08
I did go to school for it as well,
but when I did go to school,
2:10
I'm 39 now, so you don't have to guess.
2:15
[LAUGH] But when I was in college,
2:19
they really didn't have
programming classes for the web.
2:21
Anyway, there was
computer science courses,
2:26
and things like that, but
nothing for web related languages.
2:29
Well, let me back up.
2:35
I started coding visual
basic when I was 13.
2:39
And that was from my stepdad,
who took computer science courses.
2:42
So I did start with programming languages,
and
2:48
then moved into web
development later on in life.
2:52
I started working, as my awesome MC said,
working in broadcasting utilities.
2:56
Did some advertising and
marketing for different companies,
3:04
including the healthcare business, Pfizer,
GlaxoSmithKline, and a bunch of stuff.
3:09
So you guys can see this slide,
I don't wanna read out every bullet point,
3:15
but I have worked for, have done some
notable work, and not myself obviously,
3:20
but on large teams, and
everything was pretty awesome.
3:26
Each experience was a challenge in itself.
3:31
[LAUGH] I'm sure you guys know.
3:34
Most of the time, I was given jobs and
projects that I had no clue how to tackle.
3:36
And no matter how much
schooling you've done,
3:41
no matter how much you taught yourself,
most of the time,
3:45
you're gonna get a project where
you have no idea what you're doing.
3:48
And so it's a lot of getting
the right resources, tools,
3:53
talking to the people around you,
your upper management, your colleagues.
3:57
And just brainstorming a bunch, and trying
to find the right tools for the job.
4:04
And really, just teaching yourself
what you need to know, and
4:09
a lot of trial and error.
4:14
[LAUGH] So a lot of those
positions that I have there.
4:16
It was technologies that
I had worked on briefly,
4:20
but was not an expert in,
or that kind of thing.
4:25
Or maybe it was a new technology
that I had to teach myself,
4:29
in order to teach my team,
and that kind of thing.
4:33
So yes, it was a lot of work,
4:36
both in design and development.
4:40
So I started in web design.
4:44
And I realized after a while that I was
tired of the clients telling me what they
4:48
wanted after I'd already
done a bunch of work.
4:53
[LAUGH] So I went into development,
4:57
thinking that I would get a little
bit more respect from the client.
4:59
Because if you show a client a design,
5:04
especially if they have
no clue what they want,
5:07
you'll see a lot of the client will
see it and say yeah, that looks okay.
5:11
But can you change this,
and can you change that?
5:17
Or they'll say I didn't want that at all.
5:19
Can you just go back to the drawing board,
right?
5:22
Well, when I saw the developers coding,
5:25
I never really saw the clients say,
you know what?
5:27
I don't think you coded that correctly.
5:31
Or can you use some different
type of anything, language?
5:32
So I felt like the developers
got a lot more respect.
5:37
And you may have your own
opinion about this, [LAUGH] but
5:44
that's why I went from
designing to developing.
5:48
And it was a natural transition for me,
5:52
since I had been doing both
since I was a child anyway.
5:54
So yeah, this session will be
basically me talking about
5:57
some of what I've experienced
in having done both.
6:02
I have led teams of designers and
developers as well, and so
6:08
it's really letting me
know what I've heard.
6:12
Common pet peeves on both
sides of the coin, and
6:15
maybe how to avoid issues in the future
if you're working on either team,
6:19
whether it's a design team,
or development team for web.
6:26
All right, moving on.
6:31
I forgot this is why I worked so hard.
6:37
I'm a single mother of five children.
6:39
We have three cats and two dogs.
6:42
I'm crazy for having that many pets and
kids, I know, but
6:45
those are my children right there, yep.
6:50
[LAUGH] Okay,
you're probably gonna see a bunch of memes
6:54
throughout this,
because I kind of love them.
6:58
So this is basically showing
you how designers and
7:03
developers historically think differently,
where a designer
7:07
is designing something, and
they're like, that looks good.
7:12
[INAUDIBLE] Or I'm sorry, that's my mouth.
7:17
It says going back and
forth left to right.
7:20
And then the developers coding, and
7:23
then getting a little bit closer to the
screen and thinking, what am I doing here?
7:26
Is this right?
7:31
Anyway, hopefully you guys can
relate to one or the other.
7:32
And while we're here,
if some of you are project managers,
7:38
or designers, or developers, or UX,
7:43
it would be great if you just
kind of post that in the chat.
7:46
So I can see how many designers
we have in here, developers,
7:51
data analysts, whatever your role is.
7:56
If you could just type that into the chat,
that would be great.
7:59
And then if you see memes that you can
relate to, please let me know too,
8:06
cuz honestly, all the ones that I've
put in here are relatable to me.
8:10
Okay, so
we're gonna talk briefly about designing.
8:17
And so here's this one meme web designer.
8:24
What my friends think I do,
it looks really fun, right?
8:28
They're cheering, and
have a good time over drinks.
8:31
What my mom thinks I do, it's funny, cuz
my parents still have no idea what I do.
8:36
There was this one GE commercial,
8:43
I think it was a couple of years ago,
where it was similar along the same line,
8:45
which is nobody knows what I actually
do [LAUGH] when it comes to developing.
8:50
What are we developing, exactly?
8:55
And what society thinks I do,
8:58
what my clients think I do is make magic,
or pull stuff out of a hat.
9:01
What I think I do, and
then what I actually do.
9:07
It's funny, because not all developers,
9:09
not all designers use themes,
but some do to save time.
9:12
Or there might be something that you're
already using for a different design, and
9:16
you don't wanna have to build something
from scratch if you don't have to.
9:22
So this is funny to me, I think,
because in all these other ones,
9:28
it's you're working so hard, and
you're doing stuff from scratch.
9:31
And then what you're actually doing
is just downloading a theme and
9:34
customizing it.
9:38
[LAUGH] But again, that's not a bad thing.
9:39
And it's not always
what you're able to do.
9:45
But it does save time, doesn't it?
9:47
So it's not an easy job.
9:52
Stresses are a given.
9:53
Nicolas Cage one says, I love it, but
9:58
there are a few more changes
I think we should make.
10:00
And then you end up having to
redesign the entire project [LAUGH].
10:04
Or the one on the right, if two designs
are shown, a third will be requested, and
10:09
if provided,
then one of the first two will be chosen.
10:14
Basically that guy's banging
his head on the desk,
10:17
and I can so relate to that one [LAUGH].
10:23
But designers are awesome.
10:28
Here are some pressure points, or
what I would call pressure points,
10:31
is a lot of times, you're having
to make something out of nothing.
10:35
Because clients often don't
know what they want, right?
10:40
And as I was saying before,
sometimes you show them something and
10:43
all of a sudden he's like,
well, that looks good, but
10:46
I was thinking about something
totally different or better.
10:48
That's a great colour green, but
can you make it lighter or darker or
10:52
make this bigger or smaller and you
really end up throwing a lot of hours at
10:56
something, even though it
might seem like small changes.
11:00
Because now you're gonna have to change
it throughout the entire design or
11:04
through all the templates.
11:09
There are the PST files,
whatever the case might be, so
11:11
it's harder than it looks, right?
11:15
To make a small change.
11:18
And you'll see it's similar for
development too.
11:20
And then you have your stakeholders,
whether they're internal stakeholders or
11:25
external.
11:29
You have your project manager,
11:30
who's on you because you have a bunch
of tickets that you still have to do.
11:32
You have other projects waiting on you.
11:36
I remember working 70 to 80 hours a week,
sometimes,
11:40
as a designer and a developer,
just trying to meet deadlines.
11:44
You have, sometimes the business analyst.
11:51
On top of that, you have a UX
designer who's gonna tell you what
11:53
is the most user friendly
way to do something or
11:58
you might be the UX designer and
web designer in one.
12:01
You might have other stakeholders,
internally and externally and
12:07
your external stakeholder might be
the client, himself or herself.
12:12
And lots of times for designers,
you have a brand team.
12:19
So you have certain colors that
you're supposed to work with or
12:22
fonts and things like that and
then you have that deadline [LAUGH].
12:26
So, nobody likes missing a deadline,
but it happens a lot.
12:30
And one thing I would say about that is,
just let everybody know,
12:37
[LAUGH] when you feel
like you might miss one,
12:42
no matter how embarrassing
that might feel.
12:46
Because that is just part
of working on a team.
12:49
And collaborating is being humble and
not working with an ego and
12:53
just letting everybody know where you are
along the way would be awesome [LAUGH].
12:59
And, we were into developing, right?
13:10
And my whole point of these slides
is really just to show you that,
13:12
although it's a totally different job.
13:16
And one is working with lines and
colors and graphics and
13:18
the other one is working straight
with code, often on the back end.
13:23
But we have so many similarities
between the two and there's a lot of
13:29
pressure in both sides, so for developing
it's also not an easy job [LAUGH].
13:34
This one says, we'll ask for estimates and
then treat them as deadlines.
13:42
So, if there are developers in here,
13:47
you know that you might be
in an agile scrum process.
13:50
And your project manager might ask you,
13:54
how long do you think it will take for
this one ticket, right?
13:58
And you give them an estimate and
14:04
what you know is that estimate is actually
what they're gonna use for the deadline.
14:06
So it's like, give me an estimate,
but make sure that it's
14:10
really exactly to the point of
when you'll actually finish.
14:16
So I do think that the word
estimate is being used completely
14:21
incorrectly [LAUGH] in the business world,
but that's [LAUGH] okay.
14:26
At least we all know what
we're talking about here.
14:31
And then, same with developing,
14:35
if you don't think that you
can meet your deadline.
14:37
Whether it's just on the ticket or
in the entire sprint, or
14:41
in the whole project altogether, just let
everybody know well in advance [LAUGH].
14:46
And then on the right,
we have, is it Marvel?
14:53
Yes, Marvel Comics.
15:00
So CEO, how's it going, Tony?
15:01
Developer says,
I have this headache that comes and goes.
15:04
And the project manager walks in and
says, Hi, Tony,
15:07
and developer says, there it is again.
15:11
So basically the project manager is
the headache that comes and goes.
15:14
Cuz every day, you're being asked,
where are you, what have you done?
15:18
Especially, again, if you have a standup.
15:22
You're normally talking about what you
did yesterday, what you did today or
15:24
what you're gonna do today.
15:28
Do you have any roadblocks, right?
15:30
And so, a lot of people just give the same
stuff every day cuz they just wanna get
15:32
out of that stand up meeting and
hope that it works only five minutes.
15:36
But it's a great time for
you to raise your hand and say,
15:41
I cannot finish this ticket.
15:45
I have no idea where to start or
I'm stuck on something.
15:47
So definitely, again, take ego out of
your work, pride out of your work.
15:52
You have plenty of time to celebrate
together when you're finished.
15:58
But along the way,
just do the best you can and
16:02
be honest with everybody as far as where
you are in your projects, your ticket etc.
16:06
[LAUGH] I'm glad you guys
are liking the memes,
16:14
looks really fun actually looking at it.
16:17
Okay, so developers are equally awesome.
16:21
Pressure points.
16:26
You have to code exactly
to the pixels most times,
16:27
especially when I was in healthcare and
we were doing FDA approved medications.
16:31
Once you submit those designs,
you're not able to change them [LAUGH].
16:39
So the designs are sent to FDA and
they're approved,
16:45
which we thought was silly
because they're just designs.
16:48
It would have been great if we
could have made designs and
16:53
then submitted those screenshots for
approval, but that's not how it works.
16:56
[LAUGH] So we had to code exactly
to the pixels of the design,
17:01
which is hard in cross browser testing,
right?
17:06
So sometimes you're looking at something
in Firefox that will look completely
17:10
different in Chrome and drastically
different in Internet Explorer.
17:16
Can everybody say we hate
Internet Explorer, please?
17:21
Okay, and [LAUGH] then you have to code
everything to perfection in mobile.
17:24
So now you know your iPhone Plus and
your iPhone X, and your Android,
17:30
I mean, everything has to
look the same in everything.
17:36
So, it's really difficult,
even sometimes just
17:41
changing margins and
padding and things like that.
17:45
You're not just changing at once.
17:51
Now, you're having to write styles,
CSS styles for
17:53
all these different browsers and
all these different devices,
17:57
just so that it looks the same
when you're viewing it.
18:02
But in the code, you're having to
make all these little exceptions and
18:06
things in it and it's really hard and
complicated [LAUGH].
18:12
So, in addition, right?
18:17
We still have the same internal
stakeholders, external stakeholders.
18:19
We have project managers,
business analysts, UX designers, again,
18:24
clients and other stakeholders, but
now we also might have data analysts.
18:28
And I did not spell that right,
so I'll fix that for you.
18:34
[LAUGH] But
you'll have data analyst, well,
18:37
now you're having to add
other code to your code,
18:41
whether it's Google tags or
other little pixels for
18:46
social media and all these other things.
18:50
And that's layered on top of making
the design look the way it should in
18:55
every device, and every browser.
18:59
And you still need to
do this under deadline.
19:02
So, basically,
what I'm saying here is the designers
19:06
job is freaking stressful and
so is a developer's job.
19:11
And somehow, these two are to be most
19:16
important people in the process, and
19:20
we need to learn how to
work together [LAUGH].
19:25
I thought this was funny on the right
only because, Coronavirus right now,
19:30
they say it only kills seniors, so
that junior developers are really happy.
19:36
Okay, [LAUGH] not so different, are we?
19:42
So, as I said,
we have a lot of the same stresses and
19:48
if not the same stresses,
equally stressful stresses.
19:52
If you're a developer, designer,
UX specialist, project manager,
19:56
what are some of your pet peeves?
20:01
And I wanna take a moment just to read
some of the chats in the session.
20:04
I loved hearing that everybody hates IE.
20:10
If we have some Microsoft specialists
20:15
in here or, .net or ASP lovers,
20:21
then I apologize [LAUGH].
20:26
Let's see.
20:30
Yes Microsoft security updates.
20:32
We don't like to update anything.
20:35
[LAUGH] I,
I don't know how many people use Mac.
20:38
But every time I get that reminder in
the top right corner, I'm always like,
20:45
remind me tomorrow, to update that
please and it's always tomorrow.
20:50
And, I know I shouldn't be saying that
because I should be telling everybody to
20:54
update their stuff every
time they're supposed to.
20:58
But how can you keep track of all that?
21:01
Cuz you have so much work to do.
21:04
And nobody wants to actually shut
their computer down for hours.
21:06
[LAUGH] And
21:11
then not even sure if everything is
gonna be right when it comes back up.
21:12
So yeah, tomorrow for me.
21:17
[LAUGH] I love how interactive
everybody is right now.
21:22
Thank you very much for that.
21:24
So some common mistakes or
basically not even common mistakes but
21:29
things I've heard a lot from
my development teams, right?
21:33
So I've been developing since 2008 or 9.
21:38
So I only did web design
professionally for
21:43
a couple years and
then moved into development.
21:46
And I've led teams globally.
21:49
As many as 30 people at a time,
21:55
locally plus maybe 10 to 15 offshore.
21:59
And these are some of the things
I've heard over the years when
22:04
they receive what might be called a build
kit, or just a bunch of PSD files.
22:09
Or basically from developers,
22:16
this is what I've heard when they
get a bunch of files to work with.
22:17
And those are design files.
22:21
So I've heard how am I supposed
to work with these files?
22:24
I only received one PSD file for
the homepage and internal pages and
22:29
they're all jumbled together,
I can't sort through these.
22:33
The designer is using Adobe XD but keeps
changing the files without telling me.
22:37
These layers are atrocious,
nothing is labeled.
22:42
I can't find this font anywhere.
22:48
These files are late and
22:51
now I have to scramble to code
these out in time for deadline.
22:53
And there was no thought put in for
mobile view.
22:57
So I don't know if any of
the developers here have heard or
23:01
said any of those things.
23:06
[LAUGH] Or on the designer side if
you've done any of these things,
23:08
but these are the most I guess
misstatements I hear the most.
23:16
And it's usually something where I do
need to go back or the developer has
23:23
to go back to the design team and
ask for the fonts that are missing.
23:28
So they don't have to replace it with
other files cuz then obviously the design
23:33
would be completely different.
23:37
Ask for layers to be labeled and
grouped and
23:39
put in folders, or even ask for
23:43
the design files to be separated
completely and redone.
23:46
I've had to put developers and
designers together in several session,
23:54
before they even work on something.
24:00
And that's good practice anyway, but not
all the time, do you have time to do that?
24:02
But if you're having issues with the,
files and it's gonna take you a while
24:09
to sort through them, then it's best
to get those two people together.
24:14
Because not all developers
even know how to use
24:19
Adobe Photoshop to manipulate it or
things like that.
24:23
So I might be able to go in and
fix something or move things around.
24:28
But my developer may never
have had design experience and
24:32
would open the file and be like,
I have no idea what I'm doing in here.
24:36
Or these files are late and now I have
to scramble to code these out in time.
24:41
And that's another pet peeve for
developer is where at the end of the line.
24:46
So we need to finish everything
in order to deploy the project,
24:52
to put it live or
to deliver it to a client.
24:57
And many times we feel on a developer side
24:59
that everything is coming down on you.
25:04
And now you have the job
of wrapping everything up,
25:08
even if things are missing or
messed up along the way.
25:12
So that can be very stressful.
25:15
And there was no thought put in for
mobile view.
25:18
A lot of designers might
not even think about it and
25:20
say, Well just kind of wing it.
25:24
You're supposed to just make
everything go in order,
25:26
down one column on your phone.
25:32
But not everything is easy
enough to do in that way,
25:35
there are some layouts where it
just doesn't make sense to do that.
25:39
And so
as a designer thinking about that and
25:44
thinking about how this should
look in mobile view and
25:47
providing a PSD that shows
mobile view would be fantastic.
25:52
[LAUGH] Okay,
25:57
I see a lot of people agreeing with me,
[LAUGH] about
26:02
development being at the end of
the road or things like that.
26:07
So this is great.
26:13
How to avoid these.
26:19
And these are just some tips.
26:21
This is some tips for the developer and
that is to be proactive.
26:25
If you're a developer, I'm sorry,
if you're a designer and
26:32
have never been a developer before, maybe
reach out to your development team or
26:36
reach out to the project manager and say,
do you know who this project is going to?
26:41
And maybe talk to the person and ask
them the way they might want the file or
26:46
are there other things
you need yo keep in mind.
26:52
Because most of the times the developer
is gonna build this up for
26:55
some type of this up grid system or
box system.
27:00
So they might be able to tell you,
yeah, we're gonna do this and
27:03
use 12 columns for
a bootstrap, for instance.
27:08
Or we're gonna do it in
this type of box layout.
27:12
And so it might be good for you unless
you already have a template that
27:16
you're using for
other projects of the same kind.
27:21
It would be good to talk to the developer
and ask them, all these questions.
27:24
So that you can start with something
that you both can work with and
27:29
you don't have to go back and
forth too many times.
27:34
In addition, these are just based
off of those other quotes, so
27:39
name all your file layers.
27:43
So there shouldn't be anything in your
PSD that says like layer one, layer two,
27:45
layer three.
27:50
[LAUGH] So name all your file layers,
27:51
group layers together that should
be moved in unison, right?
27:54
So, if you have maybe a teaser section,
27:59
try to group all the little like the
subheading, the body of it and the link or
28:02
even the little thumbnail image if it
has one, try to group those together.
28:08
So that if for
28:14
some reason it needs to be moved that
they're all moved together in unison.
28:14
Use folders for
different states of an element.
28:20
So a lot of times we might get like
a homepage PSD Photoshop file, right?
28:22
And it'll show the menu but
it doesn't show what
28:31
the hover state is for
that one button on the menu.
28:36
And in that case, it's kind of like okay,
28:40
well what am I supposed to
do when we hover over it?
28:43
And the developer then has to
decide if they did nothing at all.
28:46
Which then the client will see it and
say how come nothing is
28:50
happening when I am hovering over
this menu button or they wing it.
28:55
Again, that whole winging it thing
is because we need to finish and
29:00
deploy it and so a lot of times
there's a lot of winging going on.
29:04
Basically like using your own,
Deciding for yourself what it should be.
29:08
And you can get in to a lot
of issues doing that.
29:14
So providing different
states of an element,
29:21
whether it's a hover state or what
happens if this drops down in the menu?
29:24
What does that look like?
29:30
Things like that.
29:32
And then as I said before
checking with the developer or
29:34
the project manager, whoever you can ask.
29:37
If you're using a grid system or
a box system, things like that.
29:40
And having a layer in there in your PSD,
just a transparent layer or
29:45
one that you eventually
hide that has the grid or
29:50
the box or whatever it is
you're using would be helpful.
29:54
Even for the developer when
they're looking at the file.
29:59
And I said mobile.
30:04
So, mobile styling,
deciding where your heading or
30:08
subheading or
all the other content areas will go
30:13
when it basically
collapses into one column.
30:18
And a lot of designers take
it upon themselves to learn
30:24
CSS styling, and
that would be great as well.
30:29
Because then you'll learn the tools
that a developer has in order to
30:35
manipulate things.
30:39
So, whether it's pulling or
pushing something left to right.
30:41
What happens, or
what you're able to do is something
30:48
that you can learn by just
taking a CSS class or two.
30:53
And utilizing no more than three or
four font types, and
30:59
base colors or whatever it is that
you have from your brand team.
31:04
Because it does simplify things for
the developer as well,
31:09
as far as having the main
fonts styled out,
31:14
whether you're using Sass or
Less or nothing at all.
31:19
Just having those fonts and
base colors ready, so
31:24
that when it comes up in the design,
it's easier to use with those classes.
31:28
And then, fonts,
[LAUGH] fonts, fonts, fonts.
31:34
Using fonts that are in
a licensed library, okay,
31:38
or free, such as Google fonts, but
31:43
you can't just pick a font that's
on your computer and use it.
31:46
Because a lot of times on the development
side we're not able to use those at all.
31:51
So even if you include a file,
a lot of times you're not licensed
31:57
to use it as far as deploying
it on the development side.
32:02
And so we have to go back and
make sure that those fonts that
32:06
you're using are from a licensed library,
or
32:11
they're from something
free like Google fonts.
32:15
So, just touching base with
your project manager and
32:19
the developer about the font
you're using would be great too.
32:22
And then providing multiple
Photoshop files as needed.
32:26
So maybe, again, something separate for
the homepage, something separate for
32:30
the internal page, something separate for
the mobile view of something.
32:35
It really just depends on
what your project looks like.
32:39
You might have something that
shows what forms should look like.
32:43
Or different types of pages,
it's really just based on your project,
32:48
but not having everything jumbled
up in one PSD would be great.
32:54
And if you are using Adobe XD
which I do love, and
32:59
there's a screenshot
over here on the left,
33:03
just to tell the developer each
time the file has changed.
33:06
Because a lot of times the developer
has already worked on some of it,
33:11
whatever it is, [LAUGH] some design
that you have given or shared.
33:16
You might already have
worked on a bunch of it and
33:21
then all of a sudden we go in
next time and there's changes.
33:24
And so it's hard on the development
side to just go back and
33:27
try to spot what has changed and
things like that,
33:32
so it's best not to do sneak changes.
33:37
[LAUGH] Go ahead and let the developer
know that you've made a change, and
33:40
be pretty detailed in describing
what it is that you've changed,
33:46
it would be awesome.
33:51
And and then,
do remember that changes even on
33:53
the development side is not
as easy as it may look.
33:57
So it might seem like
a small change to you, but
34:01
the developers may be making changes in
lots of files just to meet those needs.
34:06
Especially if they haven't used Sass or
Less and variables and things like that
34:14
in their styling, it might be a one off
change in a lot of different places.
34:19
So that, and this next one,
34:23
I've realized a lot of
people don't do at all.
34:27
And it's almost commenting
on the developer side,
34:32
you really should be commenting, but
a lot of people don't do it in their code.
34:35
So designers,
[LAUGH] when you are providing PSDs,
34:40
it's great to provide a style guide.
34:45
And that's basically just describing,
what colors, what fonts,
34:50
what size fonts you're using for
headings, subheads, things like that.
34:55
What margins might be in general,
and different looks and
35:01
feels for quotes and
all those things, okay?
35:06
Because then, if the developer gets
a style guide right from the beginning,
35:11
even before opening your PSD files.
35:16
The developer can take that style guide
and do a bunch of the styling classes.
35:19
The main ones that don't need throughout
the whole site, they can start with that.
35:26
And then there aren't that
many guessing games, right,
35:30
when you're going through
the rest of the files.
35:33
So providing a style
guide would be awesome.
35:37
And then being timely in case
changes are required, and
35:40
I say that again because the development
portion is at the end of the project.
35:45
And if we're left with, okay, so
here's an example that I have,
35:51
and this is in the healthcare industry.
35:56
And if anybody have worked with is
on here, you can testify to this.
35:59
[LAUGH] So usually the design team,
because they're working with
36:04
the marketing team, right, and
there's a lot of back and forth.
36:09
In the healthcare industry, they might
be working together, marketing and
36:13
design might be working together for
about three months,
36:18
three to four months right, on design.
36:21
And they go back and forth,
and back and forth, again,
36:25
a lot of times development isn't
even thought about in that process.
36:28
All they're thinking about at that
time is the marketing part of things,
36:33
and how they want things to display so
that,
36:38
that XYZ site will sell something,
all right?
36:41
And so you finally get the design
from the design team or
36:45
the marketing team as a developer.
36:50
And now all of a sudden you have two
weeks, two to three weeks to build it.
36:54
And a lot of those two to three weeks,
[LAUGH] turn down into even less time.
37:00
Because now you're having to go back and
forth and have files redone.
37:04
Or you may not have all
of the graphic licenses,
37:10
you may not have all the fonts you need.
37:14
So by the time you actually get
everything you need to build the site,
37:17
you now have two weeks left or less.
37:21
And so that pressure is on as a developer,
37:23
that now you'll finally have your things,
and now you have to scramble.
37:27
Because the other teams took
a really large portion of timeline.
37:34
And now you only have a couple weeks for
37:42
you to not only build it out,
do the mobile view, and
37:46
then you have to debug it in
every browser, and every device.
37:50
[LAUGH] So it gets a little crazy.
37:56
And yeah, somebody was asking where
is the project manager in all this?
38:02
I believe every project that I've
done is with a project manager.
38:06
And I wouldn't say the project manager
doesn't understand how it goes.
38:14
But it's almost like everybody's
scrambling around with their head cut off,
38:21
trying to meet deadline.
38:26
And the project manager is trying to
understand both sides of the coin,
38:27
but may not really get it completely.
38:35
Or that their hands are tied by
the time they get the files, and
38:39
now there's a deadline,
that they can't really go back now.
38:44
Because, as far as the marketing team,
38:49
they're gonna take as long as they need,
period.
38:51
And then the design team,
they're gonna have to keep going back and
38:56
forth until the marketing team is happy.
39:00
And then, so by the time your project
manager as a developer gets the files,
39:03
their hands are pretty much tied.
39:08
It's very hard to ask for
more time by then,
39:11
because you already have
commercial scheduled.
39:14
You have [LAUGH]
the appointment scheduled,
39:17
you've dates in the case I
was talking about with FDA.
39:20
So things are already on the calendar,
and so it's not like the project
39:23
manager can really go back, and say,
hey, can we have three more weeks?
39:28
And in many cases,
you're not gonna get more time.
39:33
So they're just at that point,
just trying to be a referee and
39:37
make everybody work together.
39:41
And just cross your fingers, and
pray and hope that everything goes well.
39:44
[LAUGH] But yeah, so, but
honestly all the project managers
39:49
I've worked with have
tried their very best.
39:53
But there's not that much they
can do at the end of the line.
39:57
So I have a question here,
how would you say the role
40:02
of the designer has been affected by CI/CD
and Agile process approaches generally?
40:08
I would say that the role of
the designer in many cases
40:16
has not been affected much
by the Agile approaches,
40:21
just because there's still so
much disconnect in between the two teams,
40:25
where it's still just a handoff
where it's still a design
40:32
team doing what they do and
then you get the files.
40:38
And then you work on it.
40:43
It's still not a streamlined process where
there's some good handshaking in between.
40:45
Although I wish there was.
40:52
So again, I would just encourage people to
40:54
talk to each other if it's possible.
40:59
Some companies are so
large that you're not even going to
41:03
have that chance to say, hey,
who am I going to work on this?
41:08
And it's not as collaborative between
the two teams as it should be.
41:12
A lot of times you just get files
in your lab as a developer and
41:17
you don't even know who made it.
41:21
So I would hope that in the near future,
41:23
it would be a little better as far
as in between those two teams.
41:27
So that there could be more collaboration,
and discussion, and
41:33
maybe even evening out the amount of time
you have to do your work a little bit.
41:39
So when you're designing, if you're
talking to a developer, maybe you
41:47
need less time to design because you have
such an understanding of what's needed,
41:51
and what's not needed.
41:55
So you're not doing extra work
that's not being used, for example.
41:57
And then on the development side,
maybe you gain more
42:01
time just by working with the designer and
helping them along, too.
42:04
And, yeah, I think that was the last one,
42:11
was be timely in case
changes are required.
42:14
And finally use your UX resources and
designs for the times.
42:21
So, I thought this was funny, wait,
you don't know what this button does?
42:26
Obviously, that's a menu button,
called the hamburger.
42:30
[LAUGH] Which sometimes when you
click it it might turn into an X.
42:35
It could close it or
however you guys wanna use that.
42:40
But this is basically saying,
if you have a UX designer,
42:44
to go ahead and use those resources
upfront before you make the design.
42:50
Because the last thing you wanna do as
a developer is develop a bunch of PSPs and
42:57
have it done.
43:03
And then UX comes in and says, well,
you need to change this cuz it's
43:04
not user friendly or the client
doesn't understand this or that.
43:09
So it's good if you have the UX
resources to involve them upfront.
43:15
And I have a question,
43:26
do you think programs like Asana
should replace project managers?
43:27
I don't really believe in
programs replacing people,
43:34
since I do want to still have a job.
43:42
[LAUGH] But, yes, I do think that project
43:46
managers should use programs
like that in their work.
43:50
And really, all of us,
no matter what role you're in,
43:55
to use the right now programs that
are out there to help you along.
44:00
But, really just your main thing
is to know your stakeholders.
44:06
Know your internal team,
know how everybody works.
44:13
And get to know the people
you're working with.
44:17
And to continue to improve your process
and improve your communication with
44:21
everybody so that you can collaborate and
get to the finish line on time or
44:26
before you're supposed to, so
that you can all celebrate.
44:31
Have a good time and
make it go as smooth as you can.
44:35
So that was my presentation.
44:44
I have, I think, three minutes left.
44:47
I'm gonna continue to look in
the chat to see if you guys have
44:50
any more questions for me.
44:54
But my name is
Micheley Souvannaratvongseuk.
44:57
You can call me MC.
45:01
That is my handle right there
@mcsouvannarat on, I think everywhere.
45:03
LinkedIn, Facebook, Instagram,
that kind of thing.
45:10
And that's my email address,
if you want to email me directly.
45:16
But again, I was a past designer,
45:20
currently a development manager and
45:23
a chief technical officer of a company.
45:27
And I love mentoring people, teaching
people how to code or how to code better.
45:32
I love bridging the gap between
designers and developers.
45:40
And really I just love doing projects and
completing the project and
45:45
celebrating and having a good time.
45:49
I love challenges and
I'm sure you do too if you're here.
45:52
If you're in programming at all or
designing at all, you love challenges,
45:55
because both roles are very,
very challenging positions.
46:01
So, one question I have here is,
any tips for a junior software developer?
46:06
I'm currently working on a wellness app or
46:12
game in a cross-functional
team with UX designers.
46:15
Let's see, junior developers, I would say,
46:19
use as many of the tools
that are available where you
46:24
don't have to code all from scratch.
46:29
At least at first.
46:33
Because you are going to learn a lot
from doing that type of thing.
46:35
For example, if you're making an app,
I don't know if you've ever
46:39
used Ionic framework before or frameworks
like that where you can install it,
46:44
you can use reactor
angular to code it out.
46:50
You can output it to iPhone and
46:53
Android and a web app all in one.
46:57
So using stuff like that where
it gives you code snippets and
47:01
you're able to have it handhold
you while you're learning,
47:06
that's something that
would be really helpful.
47:11
Or for example, if you're doing
a website to just go ahead and
47:15
use some of those CMSs,
whether it's like Drupal, WordPress or
47:20
really anything, E-commerce,
Magenta, whatever you want to use.
47:26
They do have a lot of bloated code,
47:32
which means that they output
a lot of code you don't need.
47:34
But for someone who doesn't know yet
47:37
how to code everything from scratch,
it will get you started and
47:40
it will give you an idea of the file
structure you need and things like that.
47:45
Also, utilize those
online learning courses,
47:52
whether it's Treehouse or
any of the other ones you find online.
47:56
And if you need further help, email me.
48:01
I would be happy to help you,
to walk you through
48:05
what you should do over
the next five years.
48:10
[LAUGH] Any resources on organizing design
layers clear and more strategically?
48:14
Again, for the design layers,
I would say it's gonna be
48:23
based on your project depending
on how in depth it is.
48:28
But there are,
how do I explain because I've
48:32
always been a very organized person.
48:37
So organizing it by the page and
then by the content on the page,
48:42
basically how it lays out on your page, go
ahead and create folders for those things.
48:47
And then you have folders for the
different states of the things you need.
48:54
And really just think of it in terms
of organizing something on your desk,
49:01
or a filing cabinet, just so
that if you are a developer,
49:07
you can hide or
show those certain folders and
49:12
see exactly what you wanna
see when you need to.
49:16
And if that makes no sense, please message
me later and we can do a live session,
49:20
[LAUGH] where I can explain
a little bit further what I mean.
49:28
And thank you so much for
49:33
all that you guys are saying about
the candor of this presentation.
49:35
I've always been told
that I'm way too blunt.
49:40
So I go, yeah,
that's the only way I know how to be.
49:43
[LAUGH] Okay.
49:48
I think that's it.
49:50
I'm gonna go ahead and stop sharing.
49:51
I hope you guys have a great time for
the rest of your sections.
49:55
And please email me, message me,
50:00
let me know what you really
thought of the presentation, okay?
50:02
Thank you guys.
50:07
See you later, bye
50:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up