Hi everyone!
My name is Ali Gray, and I work as the Web
Designer here at Portland Community College.
I moved to Portland in late 2013, started
working at PCC a few days later, and I’ve
loved being here ever since.
So a little about myself and how I got to
where I am now.
I majored in Media Arts at the University
of Montana in Missoula, and graduated in 2012.
My program focused on animation and motion
design, but we took a web design class teaching
us how to make a personal portfolio website.
During that class, I decided I liked designing
for the web and writing code more than doing
animation and motion design, so that’s what
I chose to pursue.
One of the most important things I learned in
that web design class was the importance of
compiling my work.
I’d never thought about keeping a record
of my projects, like describing my work, my
goals, what I learned, what I could have done
better, etc.
All those things are super important when
you’re out job hunting.
You need to be able to tell potential employers
“I don’t just make things that look nice,
I set goals and solve problems.
Maybe the project succeeded, maybe it didn’t,
but I learned x, y and z.”
That’s something to keep in mind for all
of you.
Start compiling your work now!
When I was getting ready to graduate, my website
only had images and titles for each project.
Trying to remember back and write compelling
content for employers was really difficult,
and I’m sure I forgot some important details.
So after I figured out I liked the web design
thing, I got a work study position as a web
designer for a student-employed web team under
the UM College of Arts and Sciences.
We had a team manager, a project manager,
two designers, and two developers – which
is definitely on the small end for a web team,
but it worked.
There, I learned beginning HTML and CSS.
When I sat down for my first day of training
on the job, I couldn’t even remember how
to start the opening HTML tag, so things from
building my portfolio website obviously didn’t stick.
But we all have to start somewhere!
Sometimes it takes a few tries to get things
into your head, so don’t worry if you’re
having a hard time in the beginning.
At my work study job, I also learned about
client interactions.
Our clients were just faculty and staff from
the university, but it was an eye-opening
experience to have to talk about my work with
people I didn’t know, and to be able to
present and “sell” the things I made.
I also did some graphic design, like logos
for the departments, and designed some icons.
Icon design is a fairly large part of web
design, so it’s probably something you’ll
be asked to do.
I was also introduced to the idea of content
management systems.
CMS’s are tools like WordPress or Drupal
that allow people who don’t know how to
code to create web pages and edit content.
I’d never heard of content management systems
or WordPress at that point, so when they asked
me to create a simple WordPress blog, it was
exciting.
I thought that people had to be developers
and create websites by writing HTML on static
pages, but then learned that instead it’s
really much more open and dynamic.
For the other websites we made there, we used
an expensive proprietary CMS
that the university paid for.
So at your jobs, you may use something open-source
like WordPress, or have to learn something
else from scratch after you get the job.
At the University of Montana, I was also the
web content manager for my school and department.
I just managed content using Drupal, but I
wanted to get myself involved in the web design
world as much as I could before I had to start
looking for real jobs after graduation.
So here are some of my early portfolio websites.
They’re kind of funny, but I was proud of
them!
Web design in general has come a long way
since I started, and I’ve definitely come
a long way as a designer.
We all have to start somewhere.
On the left from 2009 is the site I created
for my portfolio class.
My first ever website!
Then my site got a little better after I got
my work study position and had a little more
experience – but it’s hard to read so
maybe it isn’t better…
The 2011 design is the site I got my first
real job with.
I picked “I am Ali” as the way I wanted
to brand myself (Ali Gray was taken), and
wrote more in-depth descriptions about my
projects.
Then in 2012 after learning about responsive
design (making websites that work on all screen
sizes), I redesigned my site using percent
widths instead of pixel widths.
Not fully responsive, but it was a start!
I launched my current website in 2014, I think,
and it hasn’t changed much since then.
I haven’t been job hunting, so it’s less
been of a priority for me.
Before 2014, I hadn’t been using a CMS,
but I switched to WordPress for this site.
I bought a theme and customized it since I
didn’t know how to build a custom theme
from scratch, but I’m currently learning
how and will switch over to that when it’s done.
I do recommend that as a web designer or developer
you eventually design and build your site,
but that doesn’t mean you can’t use a
pre-build theme while learning new skills
or if your time is limited.
It doesn’t make you a failure or anything,
don’t worry.
Personal sites are great because they’re
just that – personal.
You can do whatever you want!
I don’t recommend changing everything all
the time after you start getting your name
out, but it’s the only site you don’t
have to follow guidelines or work with input
from other people, so you can have fun with
it.
Here are a few examples of sites I designed
as a work study student – these are the
Environmental Studies and Irish Studies websites,
but I did a number of other department sites, too.
Unlike at PCC, all the programs had a custom
website (I noticed they don’t anymore, though).
I don’t think that was the best way to do
it – it was difficult to maintain, and the
university didn’t have a cohesive presence
online – but that’s what it was.
These sites were simple, but it was a good
way to get started and gain some experience.
So then after I graduated in 2012, I moved
to Jackson, Wyoming and started working for
a design agency called Circ.
They liked to call themselves a “boutique
design agency” because everything in Jackson
likes to appear fancy.
Kinda silly.
I was introduced to the job through a family
friend, who was friends with one of the employees there.
Because of that, I know from experience that
it really is just as important who you know
as what you know, unfortunately.
I’m not the most social person in the world,
and networking is something I’m always having
to work on forcing myself to do, but friends
won’t always be there to help.
Anyway, I learned a ton at this job as the
junior designer under their art director,
and it helped me develop from a student into
a professional web designer.
We had a standard small team – one CEO who
spent most of his time out schmoozing clients,
a business guy, a finance guy, two project
managers (one for design and one for development),
two designers, and three developers.
At Circ, I learned advanced HTML and CSS – HTML5,
CSS3 and Sass (which is a sort of fancy CSS).
I had to interact with clients from huge companies
who made a ton of money, and if I messed up
with them we could lose them as a client.
That was a new and stressful experience for
me, and I never mastered it or lost my fear of it.
I did quite a bit of graphic design at Circ
– my job title there was just Designer,
not Web Designer, although it was mostly web
design.
I did some print design, which I’d never
done before.
Print is a huge, complicated area of design
that I only scratched the surface of, but
it was fun to learn the basics.
Keep in mind you might be offered unexpected
opportunities to learn something new at a
job, so take advantage of it.
I also learned a ton more about content management
systems.
We primarily used WordPress, but we also used
Concrete5, which is another open-source CMS
that’s easier to customize and is less bloated
than WordPress.
It’s a good one to check out if you’re
interested.
Here, I dove fully into responsive design
– the era of fixed-width and device-oriented
websites was now over.
I also learned about information architecture.
IA is the hierarchy of a website – the navigation,
how people get from one place to another,
how they get back, do they always know where
they are, etc.
It’s a really important part of web design
I hadn’t realized is usually up to the designer
and not the client.
IA is also a huge part of UX design – user
experience design.
UX is kind of a buzzword, but it’s so important,
and really gets to the heart of design.
We need to make things that not only look
good, but serve a purpose and help people
achieve that purpose, while making sure the
website (or app) are enjoyable to use.
I learned about front-end frameworks.
Bootstrap and Foundation are the two big players,
but there are tons of them out there.
Using a framework makes it so you don’t
have to start from scratch every time you
start developing a new site.
They give you the foundation to build your
custom site on top of, and include things
like responsive grid systems, slideshows,
typography, and navigation options – components
you can pick and choose from that make your
site responsive out of the box.
The “Let’s Get Sassy” presentation on
my website talks about Foundation if you’re interested.
I also learned about Git version control.
Git is a repository system where you can back
up your work and revert to older versions
if something goes wrong.
Repositories are also public by default, so
people can download your code (or you theirs),
tweak it, share it, etc.
There’s a huge Git developer community,
it’s pretty cool.
Here are some examples of in-house (ourselves
as the client) projects we did at Circ.
We published an annual print magazine, Homestead,
for high-end Jackson
real estate, interior design and art.
I was asked to create the online version for
the magazine, since it didn’t have one yet.
That was a WordPress website.
There are some photos of our conference space,
where we had floor-to-ceiling whiteboard walls
we used to brainstorm as a team.
We often printed out design mockups, hung
them up and talk about them.
We met with clients there, too.
On the right is a project which never launched
in the format I set up here – I moved to
Portland before the project was finished,
and it changed direction afterward.
Anyway, Jackson didn’t have Groupon, and
we wanted to create a Jackson-specific discount
platform for residents, but mostly for tourists.
Our goal for the site was for tourists to
explore local businesses instead of going
to the chains, and for businesses to be able
to work together digitally and offer deals.
The project included both the back-end, where
businesses would go to create the coupons,
and the front-end, where people could sort
through and purchase coupons.
I’d never had the opportunity to design
an e-commerce site before, and the challenge
of having to think about and address the needs
of both businesses and their customers was really fun.
In late 2013, I decided I wanted to leave
Wyoming, move to the west coast, and work
in higher education instead of for an agency.
I started looking for jobs in Portland and
Seattle, and managed to get one here at PCC
– hooray!
I work as part of our web services team up
at Sylvania.
Our office is located in the CC building lower
level, by the doors leading
out toward theHT building.
Our office door is covered in cats, because
obviously the Internet is ruled by cats, if
you ever notice it when you walk by.
We have a manager (I don’t envy his job),
three programmers/analysts, one designer (me),
two content specialists, and we usually have
one or two work study students.
So if any of you have financial aid work study
and want to work with us, it would be a fantastic
opportunity for you!
Just log into the PCC work study job system
and look for the position – we have plenty
of openings because students come and go as
they graduate.
At PCC, I do advanced (as well as simple)
HTML and CSS, and lots of Sass (more on that later).
I helped initiate bringing the PCC website
up to modern standards with HTML5, CSS3, better
accessibility and a responsive design.
You can go to the Internet Archive at archive.org
and check out what the PCC site looked like
back in early 2013 when I started (or even
back in 1997!
It’s hilarious.)
The Wayback Machine is the best.
Anyway, I also introduced using a front-end
framework – Foundation in our case.
I’m learning JavaScript and jQuery now,
both because I like to write code as much
as I like to design user interfaces, but also
because more and more, knowing the full front-end
design and development package is important
for getting jobs.
I think employers are usually looking for
people who can do more than design in Photoshop
and even write HTML and CSS.
My client interactions now are people around
the college, mostly staff, but I do meet with
students and do mini usability studies.
We have to make sure we’re addressing student
needs, faculty needs, staff needs and the
needs of the college in a larger political
sense, so it’s an involved job.
I do design some graphic elements, mostly
icons but also some illustrations.
And I sometimes take photos when we can’t
get them from a client.
I’m also learning how to create WordPress
themes from scratch.
We build the Cascade Festival of African Films
site in WordPress every year, and we’re
also working on getting the main PCC website
out of Adobe Contribute (which we currently
use for most of the site) and into WordPress
as we speak.
Contribute is a stone-age and no longer supported
CMS that’s a complete pain, but the PCC
site is about 10,000 pages and has tons of
editors and stakeholders, so the process is slow.
But we’ll get there one day.
I brought a lot of new things to PCC.
When I started, I was recently out of school
and had just come from a fast-paced design
agency, so I was able to bring fresh insight
and new ideas to the established, relatively
slow-moving behemoth that is PCC.
I helped them bring the site up to modern
standards – this doesn’t mean my coworkers
weren’t aware of the changes in technology
or didn’t have the skills to make the updates,
but bringing on someone new helps move things
along faster.
So just because you don’t have years of
experience doesn’t mean you can’t bring
something valuable to a job.
Being straight out of school and up on the
latest and greatest ideas is a great way to
market yourself when you’re getting started.
I designed the PCC website as it stands today.
We launched it in early 2016.
Here are some examples of some of the different
page templates – the main homepage, a program
homepage, and a landing page with buckets
to take you to different areas of the site.
This design had to be approved through our
office, the marketing and communications office,
and larger stakeholders in the college administration
to make sure everything aligned with PCC’s
branding and values, and was good to go.
We actually designed a different responsive
site soon after I came in 2013 (the design
on the left), but then marketing decided to readdress 
PCC’s branding, so we had to stop the project.
We built and launched an intermediary site
in 2015 (the design in the middle) – that
was responsive and had a completely updated
code base – but it looked pretty much like the old site.
We wanted to be able to make the website better
for people to use and improve its accessibility,
and not wait for an indefinite amount of time
while marketing worked through the rebranding.
It was an interesting way to approach a project
– retrofitting an existing website with
modern technology instead of building it from
scratch.
I also designed the new MyPCC that launched
in mid 2016.
We already wanted to make MyPCC responsive,
more accessible and easier to use, but we
were also forced to make an upgrade because
the back-end vendor system MyPCC is built
on went through a major update.
The vendor supplied basic templates for the
update, but they weren’t as responsive or
accessible as we needed, so I had to do a
bunch of tweaking to get them there.
I also had to apply PCC’s new branding to
the templates, and redesign our custom channels
such as the Financial Aid Dashboard.
I also design some custom-branded pages, such
as the one on the left (which was in the old
website template).
I design the Cascade Festival of African Films
website (which is at Cascade every year) based
on the event poster.
I designed some of the channels in MyPCC,
such as the My Major channel.
I designed the icons in the Financial Aid
Dashboard, and also the tuition calculator
on our main tuition page.
Lots of random little projects.
I also did an in-house project for the web
team, which was creating little cat award
magnets (our office is cat-themed), which
we give to people we work with who do good things.
There are a bunch of different ones, it was
tons of fun.
So enough about me.
Let’s talk about what it’s like to be
a designer, and then get into some helpful
resources later.
So first off: life at the office, or as more
and more people work remotely, life at the
local coffee shop, shared creative space,
home, or elsewhere.
Here are some common themes at most jobs.
You’ll probably have to juggle multiple
projects at once.
It can be a bit overwhelming, but most of
the time the variety is good.
It’s easy to get bogged down creatively
and get tunnel vision when you work on one
thing too long, so mixing it up helps give
you a fresh perspective when you come back
to work on something after taking a break.
At most jobs, you’ll probably have lots
of meetings.
Meetings can be super helpful when brainstorming
ideas and working out project roadblocks,
but beware if you’re just spending all your
time going in circles and not accomplishing anything.
Meetings like that happen all too often, and
can really negatively impact your productivity.
Time tracking is an interesting topic.
Depending on your job, you’ll be asked to
track your time differently.
For example, here at PCC, as long as I’m working productively roughly 8 hours a day they're happy.
On the other hand at my last job, I had to
track my time for each task down to the 15
minutes, and enter those times at the end
of every day.
Those are opposite ends of the spectrum, but
you could be asked to follow those processes
or anywhere in between.
Time proposals are related to time tracking.
At the start of a project you and the client
determine the project’s scope – what specifically
are you providing for the client and how long
will it take you.
You need to be able to estimate how long you
think each part of the project will take you
so you can include that data in your scope
document.
I still have a really hard time with time
proposals – I think it just takes a lot
of experience to figure out how you work and
how long it generally takes you to do different tasks.
Developers statistically have an even harder
time than designers predicting how long it
will take them to do something.
Keeping track of the time you spend working
each day can help you improve making these estimates.
And if you notice that you’re spending way
too much time on certain tasks, you may need
to speed yourself up or revisit the timeline
with the client.
Feast or famine project schedules are common.
Your team may have a large, complicated project
everyone is working on for 50 or 60 hours
a week, or it may be a slow time between client
projects when everyone has a chance to sit
back, breathe and do some in-house things
without tight deadlines.
Unexpected or last-minute requests are also
common.
As much as teams try to stick to the scope
and keep deadlines manageable, no one and
no project is perfect.
If your boss asks you to do something ASAP
at the end of the day, there isn’t much
you can do but say yes (most of the time).
Or it could be something completely random,
like when my boss at my last job asked me
to design his family’s Christmas card.
If I was busy with real work I guess I could
have said no, but it was slow around the holidays
so I made the card. Whatever.
When you’re job searching, it’s a good
idea to look for jobs that include training as a benefit.
For example, since I'm a PCC employee I get
free tuition, and they set aside some time
for employee training.
I’m trying to learn JavaScript and jQuery,
so I can take PCC classes as job training
during my normal workday.
If your job gives you time for training and
pays for the training, that’s a definite plus.
There are always new things to learn.
Conferences are also great ways to learn new
things and network with people in the industry,
and some jobs will pay for you to attend them.
Another big plus.
Some things I recommend: a standing desk – sitting
at a computer 8 hours a day is a bummer physically.
Standing can help you stay focused and lessen
stress to your back and shoulders.
A pen tablet is a great thing to have.
Not only can you draw just like you would
on paper directly into the computer, it also
helps with injuries.
I have repeated stress injury in my hand and
arm from using a mouse and trackpad too much.
If I use a mouse or trackpad for even a few
minutes, my hand and forearm start to hurt
and seize up.
People have actually completely lost the use
of their hands this way, so if you have pain
from using a mouse it isn’t something to
ignore.
Using a pen tablet is a good alternative,
since your hand is in a more natural position.
And watching people try to use your computer
is hilarious.
A big whiteboard is a plus.
It doesn’t waste paper, lets you get ideas
down quickly and is easy for groups of people
to see and use together.
Coffee and headphones, obviously.
So what is design?
When I first started school studying design,
I thought design and art were the same thing.
They’re not!
Although design and art are both about creating
interesting and beautiful things for your
enjoyment and the enjoyment of others, design
is really more about problem solving.
Going through the quotes here: “Design is
a plan for arranging elements in such a way
as best to accomplish a particular purpose.”
from Charles Eames, a famous furniture designer.
“Design is not just what it looks like and
feels like.
Design is how it works.”
from Steve Jobs of Apple.
“Design is thinking made visual.”
from Saul Bass, a famous graphic designer
and filmmaker.
“Think more, design less.”
from Ellen Lupton, a well-known graphic designer.
“A design isn’t finished until somebody
is using it.”
from Brenda Laurel, a video game designer
who advocates for video games for girls.
And sorry it’s an ad, but this YouTube video
does a good job describing what design is,
especially from an emotional standpoint.
The link is in the video description below.
So in summary – design looks nice, but it
serves the purpose of helping people solve
a problem or accomplish a task.
So more specifically, what is web design?
It’s more than making pretty pictures in
Photoshop!
(Although we do that, too.)
Any type of designer asks “why” A LOT.
When a client comes to you and says “Hey,
I need a website,” we need to ask “Why
do you need a website?
Would a Facebook page, a blog or even a brochure
better meet your needs?”
And during the entire design process, we ask
why.
“Why does it need to be blue instead of
red?
Is blue just your favorite color?
What’s your reasoning?”
Or “Why do you want ALL the pages in the
navigation?
Wouldn't it be better to make a hierarchy
and guide people through the site rather than
making them guess?”
Or asking yourself, “Why am I spending too
much time in Photoshop fiddling with placement,
when I could have figured it out more quickly
on paper first?”
Anymore, web design is the whole front-end
development package.
In the past, web design was mostly creating
UI layouts in Photoshop, but more and more
we’re asked to design in Photoshop as well
as write the HTML, CSS and even JavaScript
for our designs.
This may not be true for all jobs, but it
will be easier to find jobs if you’re capable
of doing the whole package at least at an
intermediate level.
Web design also includes information architecture.
For us, architecture isn’t designing buildings,
but it’s designing the structure or hierarchy
of the website.
It’s the site’s navigation, how pages
link to each other, how content is formatted
on each page, and even your folder structure
on the server.
Web design is often referred to as UX design
or interaction design.
These are kind of buzz words, but they’re
a good description of what we do.
UX, or user experience design, is at the heart
of web design – we’re designing for our users.
We need to make our sites intuitive and easy
to use.
The content should be short, sweet and to
the point.
The site should provide valuable feedback
when interacted with (like highlighting invalid
form inputs, or letting you know when something
is happening).
Maybe you use micro-interactions – small
details like subtle animations that communicate
the user’s current status, help them visualize
the results of their actions, and make the
website more fun to use.
And sites need to load quickly.
When people interact with our sites, it should
be a pleasant experience, not a frustrating
or anti-productive one.
Notice that I didn’t mention how the site
looks – while important, the way a site
looks is actually only a piece of the site’s
overall design.
Sometimes web designers need to write content,
or edit others’ content so it’s more web-friendly.
I’ve also been asked to contribute to my
company’s blog.
This may or may not be part of your job, but
keep in mind that it might be something you’re
asked to do.
Web design can include graphic design – designing
things like logos (less frequent) or icons
(more frequent).
We may also sometimes create website banners
for the tops of pages or the homepage, do
some photography for content, or create banner
ads.
Presenting and giving pitches is a huge part
of web design.
It’s something I’m not very good at so
have to continuously work on.
As designers, we have to present our designs
to our team and fellow designers to get feedback
or approval, and make sure the developers
can actually do the work we’re asking them
to do within the timeline.
We also have to pitch our designs to clients
and get their approval, which includes explaining
what you created and why you think it’s
the best for them.
If they push back, you can take their feedback
into consideration and incorporate what you
think is appropriate, but you can also explain
that you’re the expert and provide the reasoning
for the things you did.
Many clients appreciate this because they
aren’t experts in web design (even if they
think they are) and enjoy the learning experience
and talking professionally about the product.
Even if they think they know what they want
coming in, if you describe things in a way
that’s helpful (and not condescending),
you can change their mind and even teach them
something new.
Teamwork is really important.
Like I said, work with your developers from
the start and don’t just expect them to
do something that’s outside their project
scope or they can’t do within the timeline.
Then you all have to start over and get frustrated
and angry.
If you’re working with other designers,
ask for and consider their input and don’t
just take over the project and be rude.
And web design changes constantly.
Already many of the things I learned in school
are antiquated, and who knows what it will
look like in 20 years, or even 5 years.
It can be overwhelming at times, but it also
makes web design fun and interesting to be part of.
What makes a good designer?
So to keep up with the ever-changing world
of web design, it’s helpful for designers
if they have a handful of characteristics.
We’re curious.
Like Pablo Picasso said, “I am always doing
that which I cannot do, in order that I may
learn how to do it.”
We need to search out the things that are
changing and try them, not just it back and
be stuck in our ways.
We’re dedicated.
According to Thomas Edison, “Genius is 1%
inspiration, 99% perspiration.”
If something isn’t working, we need to keep
trying new ways to solve the problem, not
just give up and say it’s good enough.
It also takes dedication to sit at a computer
8+ hours a day.
We’re passionate.
We love what we do and are happy to look at
a computer screen all day.
We look forward to researching the latest
and greatest design technologies.
“The more effort you put in, the more you
will see results.
The more passion you put in, the more you
will grow as a professional,” said Nick
Finck, a professional user experience designer
from the Pacific Northwest.
Or more simply – “Stay hungry, stay foolish,”
from Steve Jobs.
And designers are creative.
We make beautiful things and solve problems
in interesting ways.
And it’s not just designers who are creative,
either – developers are also creative!
Five different developers will accomplish
the same goal in five different ways depending
on how they view the problem and decide to
solve it, just like designers.
Feel free to check out that article, The Game
of Design: 10 Things Creatives Have in Common
– the link is in the video description below.
Its a little old, but it makes good points
about creative people.
Ok, let’s get into what the average web
project looks like.
When someone comes to you and says “We need
a website”, your first job as a designer
is to ask “why?”, like I mentioned earlier
on the What is Web Design slide.
Once you decide that the client needs a website,
you put together the scope of the project
and the proposal.
The scope (sometimes called the statement
of work) is a specific description of the
work you’re going to do – what type of
website is it, who is the audience, does it
need any custom components such as a login
system or other back-end database functionality, etc.
The scope sets the expectation and limits
of the project.
The proposal is a document both you and the
client sign agreeing to stick to the scope,
and outlines the timeline, cost, and delivery
method of the finished product.
It also makes clear that anything the client
requests that is outside the agreed-upon scope
will cost extra money, and will most likely
extend the timeline.
There’s a bunch of legal information included
with these documents, which protects both
you and the client if an issue comes up.
If you’re freelancing, make sure you have
these documents!
When freelancing, you’ll often see them
combined and called a contract.
Legal documents are a larger discussion than
we have time for here today, but feel free
to ask me about them in the Q&A if you’re
interested.
Anyway, after the scope and proposal are complete,
you move on to what we called the “discovery
phase” at my design agency job.
Often, the project you’re working on will
be unique enough that finding documentation
about similar projects is a challenge.
Also, since none of us can be experts in everything,
chances are the topic of your new project
will be outside your knowledge base.
You may spend quite a bit of time researching
before you even open Photoshop.
Don’t skip this step!
You can’t create a website that meets the
audience’s needs if you don’t understand
the audience and their needs.
After you understand what the project is all
about, you can move on to the design phase.
Always start with paper!
Sketching on paper is fast, easy and collaborative.
On paper, you can think about the user experience
without getting caught up in fonts or colors,
and easily pump out iteration after iteration
until you land on something that works.
And also important, you don’t get attached
to it – it’s a lot easier to throw away
a paper sketch you drew in one minute than a full-color Photoshop mockup that took you four hours.
After you get the rough ideas down, you can
get a little more specific with a wireframe
on gridded paper.
This gives you a better idea of what will
actually fit on the page, but it’s still on paper!
Once you nail down your paper wireframes,
you can move on to digital wireframes.
Here, you can work on things like pixel widths
and font sizing, but it’s still in a black
and white environment where it’s fast and
you’re not emotionally attached.
Here is where the process is starting to get
a little fuzzy.
In the past, we’d move from paper wireframes
to Photoshop mockups, but now more and more
designers are making prototypes.
These are kind of wireframes for the website’s
structure.
In a quick HTML prototype (there are some
software options, as well), you can link pages
together and work on the architecture.
The benefit is that it’s still a fast process
because you’re not doing any visual design.
There’s also emerging applications – Macaw
is an example – that are like Photoshop
but output HTML and CSS for you.
Something to keep an eye on.
Still, chances are you, your employer or your
client will want to see a pixel-perfect mockup,
which we make with Photoshop or similar software
(such as Sketch).
This is where you decide on colors, fonts,
spacing and the look of all the website’s
visual elements.
Mockups are what beginner designers usually
think of as the entire web design process,
and they jump straight to this step.
But as you can see, mockups are only one piece
of the puzzle.
They’re important (and fun!), but you can’t
create a successful website if you skip the other steps.
After you know what the website is going to
look like and how people are going to interact
with it, it’s time for the front-end development
– writing the HTML, CSS and JavaScript.
(If you made an interactive prototype, you
may already have some code.)
We could go on forever about all the coding
best practices I recommend, so I’m not going
to go into them here, but feel free to ask
me in the Q&A.
Anyway, during and after coding, make sure
you’re testing to make sure that everything
works across browsers and devices.
Also, make sure the site is SEO (search engine
optimization) friendly, so when people search
for keywords related to the site’s topic,
the site will come up in the search results.
And last but not least, hand off the site
to your client.
Train them how to create and edit pages, and
make sure they have all the design assets they need.
Unless you wrote post-launch maintenance and
updates into your contract (which I don’t
recommend), you’re now done and ready to
get paid!
So moving on to web design careers.
School is a great place to start – good
job!
You can also freelance at any time, including
while you’re in school if you feel confident
in your skills.
Freelancing is a good way to do work in an
area of interest unrelated to your professional job.
For example, if I get tired of only working
on the PCC website all the time and want to
make a website for an animal shelter or the
outdoor recreation industry, for example,
which are some of my interests, I could do
so.
I do recommend not trying to make freelancing
your only source of income, at least not at first.
But it’s a good way to improve your skills,
build your portfolio and make some extra money.
Another good option when starting out is to
get an internship or work study job.
These are geared for people who are in school,
and don’t pay much (or at all at many internships,
unfortunately) but they’re a great way to
gain skills, meet people and maybe get your
foot in the door at a place you have interest
working for.
If your internship employer likes your work,
they may keep you on as a contractor, repeat
freelancer or even hire you as an employee.
They may also know of someone else who is
looking for a designer and help you get a job.
There are also work study jobs here at PCC
and at 4-year universities if you’re transferring.
We have work study students in our office
who help us with PCC website maintenance and
other website projects for the college.
If you have financial aid work study, check
it out.
Plus, there are lots of ways to get involved
in the design community on your own.
Start a design blog, comment on other blogs
or forums, or just design stuff.
You don’t need to have a client or a “real”
project to produce work.
Do you think the Facebook interface could
be better?
Design it, write up your logic and post it.
Want to invent a business?
Design their branding and website and post
it.
Your personal portfolio site, or Dribbble
and Behance (some design community classics)
are great places to post your work online.
Get your name out there.
Someone might see your work, like it and reach
out to you for employment of some sort.
Another great part of all this – you’re continuing to design, solve problems and improve your skills.
Designing is like riding a bike – you never forget 
how, but it does get rusty if you don’t do it often.
So you landed a user interface design job!
Well done.
Web design jobs hide under lots of names – UI
or UX designer, interaction designer, front-end
designer or developer, and web designer, to
name a few.
The things you learn and the connections you
make at this first (an all future) jobs will
be valuable to you for the rest of your career.
For example, I still share design stuff with
my past art director.
Even though we may not have gotten on personally
all the time, we still value each other as
design resources when trying to keep up with
things as they emerge.
I also learned a ton from him while at my
job – I picked his brain to get as much
information as I could from him (for free!).
And learn from other members on your team.
Do you know about project management or business
financing?
No?
Well they do and are probably happy to share
some insight.
Salaries are pretty good in the web industry.
Depending on where you are (yes, in a city
with a decent tech community), you can make
around $45,000 a year starting out.
From what I’ve seen, positions that involve
design and writing front-end code seem have
higher salaries than those with only design,
so keep that in mind.
And you can always freelance!
If your job isn’t in an area that interests
you, find clients who are.
Most people nowadays don’t work for the
same company for their entire lives (it’s
ok if you do!), so don’t feel pressured
to stay somewhere you aren’t happy.
Chances are, you’ll have many professional
design jobs.
Use these changes as a way to work your way
up the ladder.
Many small agencies don’t have room to expand
because there may only be two or so designers
to begin with.
You may have to change jobs to move up.
Or, take the skills you’ve gained and start
something new!
Partner with a developer (or a designer) and
a business person to start a business, or
create a product to manage yourself and make
money.
You can also create a product and sell it
to another larger company – the story of
how so many of the huge web platforms we use
today got started.
Here are some great resources I use all the
time personally and on the job.
For your portfolio website (or client websites)
the big-time CMSs are great.
I use WordPress, but there’s also Drupal
and Joomla.
We also used Concrete5 at my last job – it’s
less robust and well-known as the others,
but it’s streamlined, really easy to customize
and has a great community around it.
There’s also Cargo Collective, which is
a free platform.
They host your site, and you can pick a base
theme and then customize it.
All their websites are artist and designer
portfolio sites, and you can talk with other
designers in their community.
It’s pretty cool.
Some tools I use every day: Pocket, which
lets you save articles and web pages for later.
I don’t have much time to read things while
at work, but it’s great to be able to save
a link and then read it during some free time.
Evernote and One Note are a great cloud-based
note-taking applications.
I use Dropbox constantly to share files between
my work and personal computers,
or with coworkers and clients.
A font manager is really important if you’re
a designer who likes typography.
When I was starting out, I was just adding
tons of fonts to my system fonts folder, which
eventually pretty much crashed my computer
because it was always trying to load them all.
A font manager lets you turn individual fonts
on and off, sort them, and gives you a nice
interface to preview and compare them.
I use Suitcase Fusion, but there are other
options.
I also use GitHub, which is an online code
repository that lets you track changes to
your code and backs it up in case you ever
mess everything up and need to revert to a
previous version (which happens).
You can also branch and customize other people’s
code to expand on or make new things.
For design inspiration, Dribbble and Behance
are classics.
There are also lots of curated web design sites, like siteinspire, thebestdesigns and admiretheweb.
Subscribing to email newsletters is a great
way to find interesting articles and get free
resources, like fonts and icons.
eWebDesign, DesignModo and CreativeMarket
are a few I subscribe to.
There are also countless great design blogs
out there.
A List Apart is fantastic.
Smashing Magazine is a little bloated, but
they put out good information.
Teehan + Lax is a design agency that has a
really good blog you can follow.
Another good thing to do is find designers
you like and subscribe to their blog, or follow
their work on social media.
In Photoshop, there are tons of plugins and
actions that are really helpful.
They can do things like export assets automatically,
divide the page into a grid, etc.
Just search for “Photoshop plugins for web
design”.
Character and paragraph styles are great.
Instead of changing every text layer individually
if you change fonts or sizes, use a style
so you only have to make the change in one
place.
Layer comps let you save multiple layouts
in the same file.
Rather than having a homepage file and an
about page file, use one file with a homepage
comp and an about page comp.
They let you use the same layers, but saves
the positioning, visibility and other attributes
of that layer for each comp.
And organization is so important.
Organize the files on your computer, but also
organize your design layers.
This is especially important if you’re going
to be sharing the file with other designers.
There are tons of coding resources, too.
For your IDE (which stands for integrated
development environment, and is just the editor
where you write your code), there are tons
of options.
I use Brackets, which is free, open-source
and developed by Adobe.
There are also Coda, Notepad++, Sublime, TextWrangler,
etc.
When building a website locally, it’s really
helpful to set up a localhost environment.
This way you can access your site from other
computers or your mobile device because it
essentially turns your computer into a little
web server.
I use MAMP, but there are others.
Frameworks are super helpful.
Bootstrap and Foundation (which we use here
at PCC) are the big kids on the block, but
there are also ones like Skeleton, which give
you the bare necessities for a responsive grid.
And speaking of creating something to sell,
one of my University of Montana work study
coworkers created his own framework a few
years ago and was featured on a couple of
the web newsletters I subscribe to.
Pretty cool.
When writing CSS, I really recommend using
Sass (which Foundation uses) or Less (which
Bootstrap uses) once you’ve gotten a good
grasp on normal CSS.
These are CSS-processors, which means you
can write things that the browser wouldn’t
understand, but they compile your code into
basic CSS which the browser does understand.
You can nest styles, which really cuts down
on repetition.
You can use variables for things like colors
and fonts.
You can write a chunk of code once, then call
that code each time it’s used, which decreases
repetition and the chance of errors.
You can also use math and write basic logic
functions.
Its awesome.
There are some life-saving browser plugins
and add-ons I recommend.
Firebug (for Firefox) and Web Developer Tools
(for Chrome), let you edit code in-browser
and see what it looks like live.
You still have to actually edit your files
separately, but these are the two browser
tools I use the most.
They also help with debugging.
Color Picker lets you grab colors straight
off the screen and copies the HEX value to
your clipboard automatically.
No more taking a screenshot and opening it
in Photoshop to get a color.
Rulers lets you measure things on the screen.
Window Resizer lets you see your design at
common screen sizes with the click of a button.
These are just a few – there are a ton depending
on your needs.
You can do a search on your own.
And training!
Obviously school, always a good option.
There’s also Code Oregon, which is getting
rebooted right now, but will be back eventually.
The state of Oregon is trying to get more
people into tech, so will pay for you to use
Treehouse, which is a fairly expensive online
training site.
The program also helps people in the top 1%
(or something close to that) with job and
internship placement.
There are other great training sites (some free and some not), such as Code School, code.com, and Lynda.
Web Visions is a conference here in Portland
every May where you can listen to, meet and
network with web industry professionals and
other Portland and northwest-based designers
and developers.
I believe they offer a student discount, so
that would be a great opportunity if you’re interested.
There are also quite a few web design and
development Meetup groups in Portland, including
some focused on women in tech.
Those would be a great way to meet people
in the industry in Portland, as well as attend
trainings and gain skills.
So that’s all I have.
If you have any questions, feel free to ask
me in the Q&A session, or leave a comment below.
Thanks!
