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!
For more infomation >> 12 pequeñas leyes sabidas de Karma That Will Change su vida - Duration: 5:44. 
For more infomation >> [ITA SUB] 161206 Jungkook Log - Duration: 4:01. 
For more infomation >> Why PC Sucks Sometimes! - Duration: 2:07. 
For more infomation >> Jeune Fille Ukrainienne Ruslana, cherche un homme pour le Mariage - Duration: 12:29. 
Không có nhận xét nào:
Đăng nhận xét