Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 03 2014

16:42

14 Online Training Sites for Web Designers and Web Developers

You’re too busy to go back to school. At least that’s the excuse you give for not pursuing additional training in your field.

Well guess what? That excuse isn’t any good any more. In fact, it hasn’t been good for some time. And it’s a good thing too, because you need stay current in your field if you want to stay competitive.

You can get additional training on web design, web development, and many other topics from the comfort of your own home. You no longer have to go somewhere to take a class.

onlineeducation1

Many traditional colleges offer online courses. In addition to coursework available online through the colleges, a large online training industry has sprung up in the past decade.

In this post, I’ll focus on online training sites. I’ll list 14 of the best non-college online training opportunities for web designers and web developers.

If you liked this post, you will probably also like: Learning Web Design: Self Taught vs. a Formal Education.

What to Look for in Online Training

onlinetraining2

Not all online training programs are created equal. There are several factors you should consider when selecting an online training program. Here’s a list:

  1. Experience of the trainer. Many online training sites have biographies posted for their trainers. Study the published bios to find out what kind of experience each trainer has.
  2. Number of courses offered. Some training sites only offer a few courses. Others have a broad listing of classes. If you will need more than one course, make sure that the site you choose has what you need.
  3. Number of students. Pay attention to how many students have used the site. If you can find any published student reviews of courses, read them to get a good idea of what the training will be like.
  4. Completion certification. Some, but not all, online classes offer a completion certificate. A certificate can be a nice “proof of skillset” item to add to your resume.
  5. Cost considerations. Obviously, you need to be able to afford the training. However, keep in mind that the cheapest isn’t always the best. (Although there are some high quality free courses available.)
  6. Is there a community? A learning community such as a forum where students can interact with each other can be a great resource. Being part of a community also expands your network.

Look through the checklist and decide which factors are most important to you. You are now ready to pick a training program.

Online Training Sites for Web Designers and Web Developers

Businesswoman clicking the mouse and writing documents

Once you’ve decided what you want to get from your online training, you are ready to move forward.

If you don’t want to pursue an online course through a college, you have many other options. Many are even free.

Here is a list of 14 sites that offer online training in alphabetical order:

  1. About U. Check the Computing and Technology section for some helpful ungraded courses on topics such as HTML Forms and Web Design. Certificates are not offered. Cost: Free.
  2. Codecademy. This site offers interactive coding courses in several popular topics including HTML and Ruby. The courses are arranged in modules. Cost: Free.
  3. Code School. Learn coding through these hands-on courses. Choose video courses from one of four learning paths. As you complete each course, you will receive a badge. Cost: Pay a monthly fee for full access to the site. Some courses are free.
  4. Coursera. Coursera provides users with access to college courses from well-known universities. There is a large and active community. Cost: The courses may be accessed for free, but if you want a verified certificate you must sign up for the Signature Track, which varies in cost. (Certificates are not available for some classes.)
  5. eClasses.org. This site specializes in providing instructor-led courses in web design, programming, IT, and business. The site also provides the opportunity to become a Certified Web Specialist. Cost: Varies by course.
  6. LearnStreet. Another site that specializes in training coders. You will gain access to course materials on JavaScript, Python, or Ruby beside a coding window. Learn at your own pace. Cost: Free.
  7. lynda.com. This training site has a huge library of courses including over 2,000 video courses. You get a certificate of completion for each finished course. Cost: Varies. A monthly fee gives you access to all courses on the site.
  8. Nettuts+. This site is one of a family of 13 highly regarded tutorial sites owned by Envato. You may also want to explore the other tuts+ sites. Cost: A monthly fee gives you access to courses and eBooks on the site.
  9. Skillfeed. Skillfeed offers a huge variety of video courses (over 23,000) on a wide variety of topics. Learn at your own pace. Courses are ranked by skill level. Cost: Pay a monthly fee to access courses.
  10. Treehouse. Choose from over a thousand video courses. This site allows you to practice coding in real time. Choose individual courses or pursue a professional track. There’s also a member’s forum. Cost: Pay a monthly fee to access courses.
  11. Udacity. This training site offers courses on a variety of web-related topics. Enrolled users receive a certificate upon course completion. A few courses qualify for college credit. There is a forum. Cost: Varies by course, although some courses may be viewed for free.
  12. Udemy. This training site offers a large number of courses taught by a huge staff of experts. You can see the reviews for each course as well as the number of students who have taken that course on the site. Get a certificate of completion when you finish a course. Cost: Price varies by course. Some courses are free.
  13. W3Schools.com. This is a popular online training site. Pay to receive a certificate. This site does contain a forum for students. Cost: Free to access courseware. $95 for online certification in various topics.
  14. WebDesign.com. Sign up for a live webinar at this online learning site. They also have twice a month question and answer sessions for members. There is a forum for members. Cost: Get access to all webinars as well as the video archive for a yearly fee.

(Note: Free sites were free at the time I wrote the post, however this may change over time.)

Your Turn

Have you taken online courses? Add your favorite online training sites in the comments.

October 16 2013

14:41

The Learning Conundrum

When I started working in information technology professionally in 1989, things were pretty easy in terms of choosing a direction to head into. At least in my area (South Florida), you went into one of the following areas:

  • Network and systems management
  • Database administration
  • Software development
  • Project management-related tasks (including QA work)

ColdFusion was my technology of choice and it too lasted me nearly ten years.

I took the software development route and for a very long time, it was easy to choose a programming language that you could base your career on. In my case, I started with Clipper (a dBase-based compiler) and eventually branched into client-server development using PowerBuilder, the latter being my goto tool for almost five years.

And even when I got into web development, tools and technologies were still easy to choose, primarily because the web was still so young and simple post-back, server-side page refresh style development. ColdFusion was my technology of choice and it too lasted me nearly ten years. And most recently, jQuery and JavaScript have been my focus since 2008.

There's a reason I'm telling you all of this.


The Hamster Wheel

I've been very fortunate to have chosen technologies that have had great longevity but of recent, I've noticed a dramatic change in the industry. The maturation of web development has led to an explosion of new tools that aim to help manage the complex process of building today's sophisticated websites and apps. This is actually a very good thing since for a long time, web development was like the wild west. The formalization of patterns, processes and best practices is certainly a positive thing and will invariably help to build substantially more stable systems.

And a lot of this explosion has been driven by the ease of access to sophisticated programming languages and tools, many offered for free via the open source community. This has enabled developers to rethink the way things should be built and empowered them to build amazing tooling.

This empowerment, though, can be a double-edged sword for the developer community as it feels like we're on a hamster wheel with no brakes that allow us to stop and take things in. It's a bit of a perpetual learning cycle where in many cases, not staying on top of the latest development trends can put you incredibly behind in terms of current development practices. I know I've felt it more than once and in talking with my peers, it seems to be a pervasive feeling.


The Evolution of Learning

I think it's fair to say that software developers have one of the most complex jobs in the world.

You'll hear constantly from others that our field is one of constant learning and that is so true. Developers are rockstars nowadays and it's because we work on cutting edge stuff that makes a tangible impact on large communities of people. And those communities are demanding more information via easier user experiences across multiple form factors. I think it's fair to say that software developers have one of the most complex jobs in the world. So constantly learning isn't a choice anymore; it's a requirement.

Which is why I was mentioning my career path to-date. I think it mimics that of a lot of my peers, where we could comfortably depend on knowing some "thing" for "x" number of years before we had to begin to retrain ourselves. If you're in the web development world, that's no longer the case and in my opinion, a career limiting move. I'm not saying that you need to go off and learn every new library that comes out. Honestly, I think many of the libs and tools being pushed out:

  • Are meant to scratch a very specific itch
  • Replicate an existing tool and offers little additional value
  • Are meant to satisfy someone's ego in a "look at what I built" type of thing

But there is a clear rationale for staying on top of emerging technologies especially when you see your peers chatting about them. And to be clear, I don't define peers narrowly as those I work with. I look closely at people on Twitter, Facebook, Google+, blogs and forums to gauge where their thinking is at. If you're not doing the same, you're doing yourself and your career a disservice.

As you get older (yes I'm touching on age), for most, "time" becomes the biggest limiting factor to staying current. I can attest to this as at age 45 with a ton of family commitments, I have to be extremely regimented in order to dedicate the necessary learning "time" while ensuring I dedicate "time" to my family (which is my number one priority). And I'm confident I'm not alone in this conundrum. I think back to when I was in my 20s and used to write for print magazines (you guys remember those right?) and my colleagues would ask, "How do you have time to do that?". Well, it has come full circle and I find myself asking my 20-something developer friends the same thing.

The thing I've learned is that I can't compare myself to a 20-something because our priorities in most cases are different. A young buck will invariably have more time to focus on the newest stuff allowing him or her to tinker away and even build that next great tool. And that is awesome and I remember those days myself!

As you progress in your career though, it's important not to be lulled into complacency and develop a plan that will allow you to stay up-to-date by being selective of not only the technologies you choose but also the goals you plan on achieving.


Choices, Choices, Choices

As you look at the technologies that are currently available, it's easy to become overwhelmed at where to start, much less what to choose. I empathize with you and you are certainly not alone. Part of the problem is that as developers, we're naturally curious about new technology. I like to call it the "moth to a flame" syndrome:

  • Oh look, there's a new lib to mimic web components! (flutter, flutter, flutter)
  • This influencer just released this new preprocessor! (flutter, flutter, flutter)
  • Oh my god, here's the 4th SaaS that offers real-time backend services! (flutter, flutter, flutter)

The list could go on and on. What I'm trying to get at is that at times, we suffer from attention deficit and try to rationalize it by thinking it will immediately solve a non-existent or future problem for us. In essence, we're technology hoarders doing a "just in case". In reality, it's important to sit back and determine what you're trying to accomplish and how the current suite of tools solve your problems based on where you want to head to.

Part of the problem is that as developers, we’re naturally curious about new technology.

For example, I've heard so many developers say that they want to learn iOS only to find that they have no real plans for building an iOS app. If you have the time to do that for fun, more power to you but if you don't, that's time that should be spent learning things that are actually important.

For example, if you're a front-end web developer and that's what you plan on being for some time, I'm of the thinking that ensuring you're up-to-speed on things such as AMD, ES6, Sass and Yeoman is far more important than diving into IPTables, ActiveRecord, WebView or Amazon EC2. Before everyone loses their minds because of what I just said, let's be clear, if you can manage to learn all of these things (for example, a full-stack developer), more power to you because it will make you more valuable.

What I'm trying to convey is that instead of allowing yourself to become overwhelmed with the thought of learning "the full stack", narrow down the scope into easier to manage goals. Determine where your career focus is, pinpoint a handful of key technologies you should be up-to-speed on, and focus on those in order for you to stay relevant within your career focus.

The front-end developer tract, for example, is involved enough and staying current will keep you busy for a long time. Lou Lazaris wrote a post back in 2011 titled "Skills for Front-end Developers" and in many cases he's spot on. If you look at his list, he's specifically targeted front-end technologies that are important to that role. It reinforces my thinking that it's better to narrow down the scope of what you're learning into manageable chunks within the role you're in. But it's also important to filter down lists like these even further. Do I think that CoffeeScript is critical to my success as a front-end dev? Absolutely not, which is why I've purposely not dedicated time to it.

Again, I'm not advocating not learning as much as you can. Despite me clearly being on the front-end side of things, I'm currently working on learning Ruby and Rails because I'd like to learn a new server-side stack to round out my skills. For me, it means sacrificing learning how to use something like Yeoman but I've taken the time to determine the value proposition of going down this route and I think it's worthwhile for me.


Learn Something

Learning comes in different styles. I learn best by:

  • Reading a book (a real one with actual paper pages)
  • Typing in code examples and seeing results
  • Having a mentor I can ask questions from

Others prefer to simply dive into something and learn by the school of hard knocks. Whichever way you learn, having good resources available is a critical part of the equation.

More and more, I've been leaning towards online courses because they've matured to a point where in many cases they're comparable in quality to their onsite brethren. They also afford the flexibility of allowing you to do things on your own schedule (almost always) and to focus on the technologies that are important to you.

In my case, I recently signed up for One Month Rails which offered me the following:

  • Flexibility: I participate on my schedule without the pressure of having to sacrifice enormous amounts of my personal time
  • Affordability: It's $49 $99 and seems to be well-structured for the price.
  • Mentorship: I can contact the course creator directly and have the support of their community

Regardless of what learning options are available, if you don't set aside some dedicated learning time, it's all irrelevant.

I see this as a jumpstart opportunity that will be complemented by sites like Nettuts+ and Tuts+ Premium as well as books and my community contacts. But ultimately, the flexibility and pace of the course is what I feel will allow me to learn something new in a timely manner. Cost is certainly a factor which you need to weigh versus the anticipated learning benefit and resulting updated skill.

The fact that there are so many online learning options available (many of them free) makes it substantially easier to keep your skill-set current, especially if you're methodical about what you want to learn (for example, don't be a moth).

But you need to carve out the time to learn. Regardless of what learning options are available, if you don't set aside some dedicated learning time, it's all irrelevant. I've personally found that spending one to two hours, two to three times a week immediately after work seems to work well because my mind is still in developer mode. I recently chatted with a friend who finds it better to wake up very early (6am) and focus on learning during the first few hours of the morning before starting work. That way, he's fresh and focused, free of distractions or concerns about his job.

My good friend and badass developer Joe McCann offered this great feedback:

The one bit of knowledge I'll add is that the number one thing I learned studying philosophy in college was not what I was learning, but how I in fact learn things. Truly understanding how one learns, understands, etc. is key to learning a new skill or enhancing current ones.

If someone learns by reading a book or writing down notecards or hearing it via lectures, all of these are available to use now online. It's a matter of understanding how you learn and then going and seeking the proper medium to do so.

Well said.


Learning Resources

It goes without saying that I think Nettuts+ and the various Envato properties offer some of the best online learning options around. In addition, here are a couple of learning sites I've used and recommend:

  • Codeacademy: Learn JS, Ruby, Python and more via their interactive site
  • Ember 101: Ryan Florence did a bangup job creating screencasts that walk you through the process of learning Ember
  • Why's Poignant Guide to Ruby: The style takes some getting used to but it’s definitely a great resource for learning Ruby
  • Egghead.io: Focused almost exclusively on AngularJS and recommended by a lot of community members
  • The Ruby on Rails Tutorial: This is the goto tutorial for anyone just starting off with Rails development

If you want something a little more structured and hardcore, a new trend are onsite bootcamps where you will invest a considerable amount of time learning how to use the newest technologies. Just note that many of these require you to move to where the bootcamp is being held and commit full-time to it for a number of weeks. Also, these courses are pricey running into the thousands of dollars in exchange for the more personal learning experience. I've personally participated in the Bloc.io bootcamp but didn't require moving. While I wasn't able to finish it due to time constraints, I would recommend it. Here are some of the bootcamps that have received a lot of positive press:

  • Bloc.io: Well structured course that will run you through up-to-date technolgies and provide you with online mentorship via email, chat or voice. Doesn't require you to move.
  • Hacker School: Based in New York, it's a three month onsite bootcamp where you'll work full-time learning programming skills in Ruby and Python
  • The Starter League: Onsite in Chicago, IL and partnered with 37signals (makers of Basecamp) to enhance their learning experience.

The site BootCamper has been aggregating a list of the various bootcamps that are available and providing information about them in a searchable fashion.


Get Unstuck

The main thing is to keep learning and do it at a manageable pace and in a thoughtful manner.

I've been wanting to write something like this for awhile. It's a bit self-serving since it helped me jot down feelings I've had about being overwhelmed with the hamster wheel of learning. Over time, I've been looking at ways to ensure I'm staying on top of things while not burning myself out and I've come to realize that it's impossible to stay on top of everything, even in my own niche. There's just too many devs building too many cools things and not enough "time".

So I've resolved to focus on things that are timely and relevant but may not be bleeding edge and the newest cool toy. I find this to be a much more manageable way of learning for me. And I also think it's important to revisit the tried and true stuff that may not be the latest model car but may have some great surprises for you under the hood. I look back to Jeff Atwood's great post "Why Ruby?" where he discusses his choice for using Ruby to build Discourse and specifically touches on Ruby's maturity and lack of coolness.

The main thing is to keep learning and to do it at a manageable pace and in a thoughtful manner. Really give thought to where you're heading in your career, outline the key things you should be good at within that scope and work towards developing a plan to tackle staying current. There are plenty of flames out there and you don't need to flap your wings to every one of them.

I'd love to learn more from you guys how you stay up-to-date so please be sure to offer your suggestions in the comments.

Sponsored post
feedback2020-admin
20:51

July 24 2012

13:30

Working on a Team as a UX Designer

User-centered designers aren’t just professional learners; they’re teachers, too. Our job is to reflect what we know while adopting the language of our end-users. This changes our team’s perspective which, in turn, affects its ability to solve design problems. Four ways that I’ve found effective to that end include: learning, brainstorming, (shifts in) perspective, and momentum.

When I was 11, my mother petitioned the local school board to advance my twin brother and me two numbered grades – sixth to eighth – in the middle of the school year. After months of discussion and debate, the board eventually acquiesced. One week we studied with our usual cohort and the next we were thrust into an environment wholly unfamiliar to us.

Kids in a classroom

History and English were the easiest to “get:” they were essentially classes in rote memorization. Science proved more difficult. Our eighth grade teachers introduced us to biology, geology, and chemistry. Hard sciences, indeed.

Mathematics was most the formidable, though. In my sixth-grade Arithmetics class, we reduced fractions and solved elementary functions. In Algebra, we sought answers.

Learning

I joined my eighth grade classmates at the precise moment when our Algebra teacher introduced Linear Equations. With it, we met a number of different concepts:

  • Cause and effect. In Algebra, X and Y were “variables” that could be related by something called a “function.” Any change in X resulted in a change in Y.
  • Change over time. The mathematical unit for change was called “slope” or “rise over run.”
  • Line graphs. Graphs facilitated spatial reasoning and reminded me of the old adage about a picture’s worth.

I’ll be honest: Algebra was really difficult for me. Not only because it was part of the “advanced” math program at my school (adding insult to injury) – it was an entirely new way of looking at the world. Variables? Functions? Change? I lost a lot of sleep.

As a class project, students were asked to prepare a “book of linear equations.” The idea was that, in creating and presenting their various books to the class, students would become better acquainted with the material it contained. It was a concept I was quite familiar with after several years of public schooling. The strange thing is this time it actually worked. After interpreting the material in my own words, I better understood what Linear Equations – what Algebra – was all about.

Learning is, almost by definition, a humbling experience. When we learn, we admit to ourselves that we aren’t “right” and that we don’t comprehend something as well as we could. Learning can apply to social systems (a.k.a “groups of people united with a purpose,” a.k.a your team), too. However, unlike conferences or classrooms – where people come together in order to learn – learning in the context of a social system can have unexpected consequences. Political scientist and thinker Donald Schon explains these in his book Beyond the Stable State:

The power of social systems over individuals becomes understandable, I think, only if we see that social systems provide for their members not only sources of livelihood, protection against outside threat and the promise of economic security, but a framework of theory, values, and related technology which enables individuals to make sense of their lives. Threats to the social system threaten this framework.


Donald Schon, Beyond the Stable State

Anything that challenges the values of a social system – teaching, for example – can incite what Schon calls dynamic conservatism. In other words, it’s difficult to get groups of people to change their mind.

If my entire undergraduate career in Mathematics taught me one thing, it was that although change is easy to model, it’s incredibly difficult to affect. Numbers are a great tool for modelling things, for measurement, but they tell us nothing about the ways in which (groups of) people think or act, nothing about how we might change their frame of mind.

Brainstorming

But things are always in flux, right? Time inevitably passes so that the only constant we have is change. Design is simply the actions we take in preparation for change.

Brainstorming is a creative exercise that encourages people to suspend their judgement in order to conjure up solutions to a particular problem. It’s a technique often employed throughout a design project that bears much in common with improvisational theatre.

Say you’re Wufoo; you’ve got over 11 links in your header. During a brainstorming session, someone on your team suggests removing the Blog link. This person explains that users of Wufoo click the footer’s Blog link five-times-more often than the header’s. While it’s easy to see the fruits of this kind of labor – if you remove a link, it’ll make things cleaner – it’s what you don’t see, the assumptions guiding the exercise, that are arguably more important.

It’s quite possible, for example, that your team ignores a fundamentally better design. This happens because of what an ex-colleague of mine calls “being pickled in the brine.” After months and months of working together, team members form shared value systems. They see the world through the eyes of their peers so often that the suggestions they make today are not only informed by the suggestions their team made yesterday; they’re valued against them. If someone’s unspoken proposal seems superfluous when valued against the shared value system in which they reside, they’ll often (subconsciously) stifle it.

It’s an oft-misunderstood dynamic. While brainstorming provides a perceived “freedom of choice” to its participants, it’s likely not the same breadth of choice visible to someone outside of the system. This simple fact makes consulting possible.

In order to yield a better design, user-centered designers must facilitate new, shared experiences that form the basis of new value systems.

Perspectives

Artifacts of design carry with them an amazing capacity to impact the way we think and reason. Inventions such as Facebook, Twitter and Google – and, before them, Television, Radio, and Print – provided new ways for us to communicate with one another and, as a consequence, new ways to see the world. This might seem obvious, but that’s only because value systems are difficult to unlearn. For those of us who’ve grown up accustomed to modern communication technology, it’s difficult to imagine a time before these technologies existed.

Despite this, author James Gleick attempts to do so. In his latest book, The Information, Gleick tells the story of the human race as it’s adopted and adapted new communication technologies. Regarding the invention of writing Gleick says:

In our world of ingrained literacy, thinking and writing seem scarcely related activities. We can imagine the latter depending on the former, but surely not the other way around: everyone thinks, whether or not they write. But Havelock was right. The written word – the persistent word – was a prerequisite for conscious thought as we understand it.

James Gleick, The Information

This is an important point: before writing, thoughts could only be verbalized if they were to be shared. The invention of writing afforded us a prodigious capacity to capture and document; to share and scrutinize not only own own ideas, but the ideas of others as well. Things that aren’t documented – say a hallway meeting or a Skype chat – lack weight if they aren’t written down. It’s the same reason why my Algebra teacher asked us to create a book of Linear Equations: to facilitate conscious thought.

I began work with a startup early last year on a particularly thorny design problem. Before hiring nGen Works, their team had collaboratively designed and developed two different approaches to their application over the course of nearly 18 months. None of them worked. Carl Smith discussed the project at length with the stakeholders and, having decided that they had the capacity to learn, we agreed to work together.

In the usual user-centered design way, I began the project by listening. What expectations did everyone on the team have? What’s considered valuable? or not-so-valuable? Every time I had a conversation with a member of the team, I added it to an ongoing project journal:

For the first month of the project, I took 45 minutes each Friday to review what was said, what was implied, and where the team thought the project was going. What I learned was this:

  • Everyone had different assumptions.
  • Everyone had different priorities.
  • Everyone had a different idea of what we were building.

The first two issues were easily remedied: more communication (more of the same) would shed light on people’s assumptions and motivations. But the third? How could everyone have a different idea of the system being built, especially after 18 months? I began work on a concept map (something different) that pieced everything together:

It evolved over time into this:

I claim no talent as an illustrator and, thankfully, aesthetic appeal is not the point. Concept maps facilitate visual thinking. After presenting this diagram to the team, we began a new kind of conversation about the models behind the system, how things fit together, and what individual screens of the application really meant in concert with one another. This wasn’t the first time a diagram has helped me clarify things: a line graph was infinitely more intuitive to me than a pair of variables for learning linear equations, for example.

As user-centered designers, it’s our responsibility to constantly learn, assess, and represent (literally re-present) the context in which we’re designing.

At their core, designers are learners as well as teachers. The design process, for example, is something that’s been intensely scrutinized by designers in our field. We learn from ourselves. We’ve given a ton of thought to the various ways in which we collect and present data, and call them by a whole host of names:

  • Stakeholder Interview
  • Experiential Themes
  • User Story
  • Usability Testing
  • Analytics
  • Remote Research
  • Persona
  • Content Survey
  • Sitemap
  • Page Description Diagram
  • Card Sort
  • Design Dictionary
  • Mental Model
  • User Flow
  • Quick-hit List
  • Design Lab
  • Wireframes
  • User Flows
  • Storyboards
  • Prototypes
  • Photoshop comps

The goal of any of these activities or documents is to facilitate shared understanding: to clarify the solution to a design problem. But many people – especially clients who are new to the world of design – don’t understand how everything fits together. What good is our process if we can’t explain it in a way our clients will understand? To that end, I worked with my friend David Leggett to prototype an online documentation system:

The best part is there’s no boilerplate material here when it comes to “deliverables;” each bucket of deliverables is uniquely tailored to a client’s project. Further, each deliverable is linked to others in a way that helps clients see their relationships with one another. This is much more intuitive than, say, a 36-page PDF that presents deliverables in a linear fashion.

If a user is looking at a mental model:

and clicks one of the user personas at the top:

They’re taken to a screen that helps them better understand that user’s context. To practitioners, this web-based version of deliverables may seem redundant. To clients, it can be much more self-evident. Regardless of how you communicate with your team it’s essential that you do so – with both regularity and variety.

Momentum

All projects have momentum, the rate at which they progress an idea. In classical mechanics, linear momentum is defined as:

p = m × v

Where p is momentum, m is mass, and v is velocity. I’d like to suggest that this definition can also apply to a creative endeavor. In the world of bits, mass is meaning. As the saying goes, “ideas carry weight.” Because developers call the-rate-of-speed-with-which-they-develop code their code velocity, a project’s momentum could be thought of as the product of its core idea(s) and the team’s code velocity.

Technical definitions aside, if a project “has” momentum, its team works well. A shared set of values pervade every decision. Conversely, if a project lacks momentum, either it’s being coded slowly or the idea(s) behind that project are in flux (or worse, both). Because clients pay for forward momentum, it’s critical that designers help determine the weight of ideas. To that end I recommend a combination of techniques I’ve discussed throughout this article: discovery, documentation, naming things, and availability. Let’s look at each.

Discovery

Not everyone appreciates healthy discussion. Call it dynamic conservatism or just plain ego, some people have a fixed perspective. This is the bane of consulting. Therefore, an integral part of any design process is a discovery phase, which essentially centers around the following questions:

  • Am I / Are we capable of learning the client’s language? Their business? Their value system(s)?
  • Am I / Are we capable of explaining (teaching) my / our design process?
  • Am I / Are we willing and able to forego certain aspects of the project? my /our process?
  • Is the client willing to explain their value systems in a way that makes sense?
  • Is the client willing to learn more about their design’s context? In other words: are they willing to admit they don’t know everything about their problem?

Answers to these questions are never binary. Instead, they manifest themselves over a period of time. Before committing to any sizeable design project, set aside a small period of time to feel the client out. Ask the client what they’re looking for, make some progress towards that goal, but also explain to the client that you’ll approach their project in an exploratory way. After a month or so, re-assess these questions and see if this project feels like the right fit. For more information on this subject, I also highly recommend Andy Rutledge’s cost of services calculator.

Documentation

As mentioned earlier, writing affords reflection. Although it’s tempting – and easy to forget – always ensure that conversation comes first. A great rule of thumb is this: don’t speak for people, speak with people. Because writing provides a sense of permanence, people often (incorrectly) believe that just because something is written or published it’s somehow more correct. Baloney. Whenever possible, ensure that documentation reflects the latest conversations you’ve had with your team. Documentation is never specification, just a point of reference.

Naming things

Similar to the concepts discussed in the Brainstorming and Perspective sections, naming gives us the power of distilling something’s essence. One example of this comes from the same startup I mentioned earlier. There, the client had a number of different visions for the mobile component of their application. Carl had the great idea to just call it “snap and send.” Effectively, the mobile app would take a picture and upload it to the website. Easy. After giving it a name, the mobile component of this application carried much more weight. The initiative gained momentum.

Another example of this comes from the movie Fight Club:

It was right in everyone’s face, Tyler and I just made it visible. It was on the tip of everyone’s tongue, Tyler and I just gave it a name.

Chuck Palahniuk, Fight Club

Those of you who’ve seen the movie might recall that, at this point, Fight Club is in full swing (no pun intended). Everyone wants to join. The movement had been around the whole movie, portrayed in counterculture snapshots and Palahniuk’s penchant for violence. After giving it the name Fight Club, though, Tyler Durden’s idea crystallizes and takes on a life of its own.

Make it available

Availability is empowering. Because Google, for example, provides a gateway to a vast amount of information in a fast, intuitive interface, people are empowered to learn new things. In a perfect world, our team’s design environment allows for that same feeling. To that end, consider:

  • Basecamp – If all conversations, deliverables, etc. are documented in one location, it allows your team to access the team’s collective knowledge, instantly.
  • Google Docs – Collaborative editing and commenting, in addition to notification settings, ensures that teams can come together around a particular idea.
  • Office hours – If possible, set aside an hour or two a week to just answer emails and be available for questions. Holding office hours empowers your team to answer design questions.
  • Roll your own – David Leggett and I prototyped a documentation system to explain our perspective on our client’s design problem. This makes a large body of knowledge accessible to a team and facilitates self learning.
  • Sketchboarding – This is essentially the physical analog of the digital documentation that David and I created. Being a tangible artifact gives it permanence and prominence within your office.

Be a good study buddy

Learning is an essential skill for any knowledge worker and, increasingly, we’re all knowledge workers. Designers have a unique skillset that allows them to work within their teams to facilitate both a self-learning and a shared-learning environment. This ensures that the projects they work on move towards the “weightiest” ideas in the fastest manner possible.


The post Working on a Team as a UX Designer appeared first on UX Booth.

October 28 2010

16:15

An essential list of UX reading

Josh over at 52WeeksofUX has included a great reading list at the end of his latest post, Keep on Learning. Fire up your Amazon reading wish list!

September 26 2010

18:14

Promote JS – give newbies a chance

javascript on search

Do a search for JavaScript and you find a painful set of returns. The worst offender is having Java results show up. Ouch. (Remember: Java is to JavaScript as Ham is to Hamster!).

Compare to a search for Java, or C#, or Ruby, (or ….).

Ouch. We need better. To begin with the pirates of JSConf (lead by the awesome Mr. Chris Williams!) have started a grass roots Operation SEO at Promote JS. Go there, and help the cause by doing embeds like the following:

If we can do half of the work to promote this as we have with the awesome VaporJS library, then we should be in a better place.

Step 2: Come up with a fantastic landing area for JavaScript.

Editor’s note: This was posted by Dion but he had no way to push it live. I am doing this now. To find out about my personal stance on this very cool idea, check out Why supporting promotejs is a good idea.

September 20 2010

04:05

What Designers Can Learn From Hackers

Foreword: I first became fascinated with the ways white hat hackers took things apart to solve problems after joining an awesome local hackerspace called Collexion. I have them to thank for seeing the inspiring overlap of design and hacking (and for helping me to write this article).

The (virtuous) Hacker Ethic

What is the Hacker Ethic? In 1984, Stephen Levy wrote a book which describes six general tenets of a shared philosophy observed by (ethical) hackers. Each tenet applies in illuminating ways to the design process.

1. Hands-on imperative

handson
When computing power was scarce (read: behind locked doors), hackers would go to any lengths (e.g. picking locks) to get hands-on time with the latest in technology. They risked everything to gain hands-on time in order to make things and experiment. How does this apply to design? Today our scarcity isn’t tools, it’s time. If paying work hinders your learning new technologies and methods, then do personal projects. Ultimately design is not a spectator sport, it’s hands-on!

2. “Information wants to be free”

infofree
Your experiences and talents are uniquely yours, but ultimately worthless without execution. Yet chasing every idea can get nothing done. Get into the habit of getting all of your ideas down. This habit both helps you to remember moments of brilliance and to generate new ideas. The best ideas will nag you (for months, even years) until you grant their freedom.

3. Mistrust authority

mistrustauthority

You should not blindly follow (nor reject) prevailing conventions, rules, or trends. Hackers value facts over fancy, and can explain their reason for solving a problem in a particular way. In design, you may have encountered the boss that wants the buttons to be red because it’s the hotness. When the authority demands more cowbell, should you yield? It is easy to say “no” on principal but why not take the hackerly approach and test the assertion. If testing is not practical, be armed with facts and information to defeat the request. Learn to mistrust authority, even your own.

4. No bogus criteria

boguscriteria

True hackers judge one another on their hacking, not bogus criteria like degrees, race, age, sex, or position.

We all know the designer who cites a design degree, a lucrative job, or an advanced experience level as the reason they are more of an authority than you are. Often the same designers produce little and/or terrible work. But what’s important? To a hacker, not these criteria—the important thing is the work you do. All else is bogus.

5. “You can create truth and beauty on a computer”

beautytruth

A computer alone does not make a great designer just as a powerful calculator doesn’t make a great mathematician. Ultimately, it’s about idea and execution. But do not be numb to or biased against new technologies as they represent fresh canvases and stages for your ideas.

6. “Computers can change your life for the better”

computerscanimprovelife

Computers clearly have impacted the way we design with new tools and expanded marketplaces. However, a frequently underexploited channel for designers to thrive is through social media. Designer-focused social media (e.g. Dribbble, Behance, Forrst etc.) are drastically changing the business of design.

Conclusion

We have looked at some of the ways the methods and ethics of hacking can inform your design. But (in the hackerly advice of Levar Burton), “don’t take my word for it”—get hands-on by checking out your local hackerspace!

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

What Designers Can Learn From Hackers

July 21 2010

16:27

Front End Design Conference – The All Female Line-up

Quick! Look at your calendar, now back at me, now back at your calendar, now back at me! What are you doing on July 23rd? You should be at the Front End Design Conference in St. Petersburg Florida. Front End is a single day presentation focused on content, presentation & behavior. Front-End Conf was created for anyone interested in front-end design to spend a day learning and hanging out with a bunch of like-minded peeps. The topics are intended to cover as much of the spectrum of front-end design that we can squeeze into a single day. For our speakers, we look for people that excel in a particular aspect of front-end design. We have seven awesome speakers this year and we’re adding in a few bonus events for anyone looking to “geek out” all weekend.

FrontEndConf

The Details

Now, we know we said this is a One Day event but, there’s stuff going on over several days that can gain you some awesome one on one time with the presenters as well as other designers which, as we know is awesome.

The Conference:

July 23rd

9:30 a.m.-5:00p.m.

Registration and continental breakfast begin at 8:30 a.m.

Hilton Bayfront
333 1st Street South
St. Petersburg, FL 33701

$99 Hotel Special

Google Map

After-Party

6:00 – ?
After-Party

We’re working out where we’ll be getting together for some drinks and converstation.

Ignite Session and Meet-up

July 24th

11:00 a.m. – 3:00 p.m.

This will be bonus time for attendees to get together, meetup and share an Ignite presentation if they’d like. Maybe we’ll find some speakers for next year…

Studio 620
620 1st Avenue South
St. Petersburg, FL‎ 33701

Studio 620’s Site

Google Map

Photo Walk

July 25th

10:00 a.m. – 12:00 p.m.

This will be open to anyone that wants to grab their camera and wander around downtown St. Petersburg. We’ll have some sort of contest and prize, too.

Hilton Bayfront
We’ll walk the downtown area, but begin and end at the hotel.

The Presentors

This might possibly be one of the most elite all female line-ups to ever grace the design stage together. This is surely going to be an informative “amazing-fest.”

Larissa

Personal Site: LarissaMeek.com

Follow Larissa on Twitter: @larissameek

Meagan

Personal Site: Owltastic

Follow Meagan on Twitter: @meaganfisher

Lea

Personal Site: XOX

Follow Lea on Twitter: @lealea

Niki

Personal Blog: The Design O’Blog

Follow Niki on Twitter: @nikibrown

Jina

Personal Site: Sushi & Robots

Follow Jina on Twitter: @jina

Adelle

Personal Site: AdelleCharles.com

Follow Adelle on Twitter: @adellecharles

Sarah

Personal Site: Sazzy.co.uk

Follow Sarah on Twitter: @sazzy

Connect with Front End Conference

Blog: blog.frontenddesignconference.com

On Twitter: @frontendconf

On Facebook: FrontEndDesign

On Flickr: View Pictures

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Front End Design Conference – The All Female Line-up

May 31 2010

00:49

Dive into HTML5

As the post title describes: A dive into understanding and implementing HTML5 and other Standards.

April 19 2010

23:13

Learn Web Design: Educational Resources for Beginners

In recent weeks we have published a few posts that focused on graphic design basics: Learn Photoshop and Learn Illustrator. Both of those posts generated a lot of interest from readers, so today we’ll continue with a third post in the series, this one focusing on the basics of web design. Here you will find categorized resources and links for learning HTML, CSS, typography, the design process, and more. If you’re just getting started or looking to brush up on your skills, you may want to bookmark many of these resources.

Introductory Information and General Learning Resources

General resources for learning web design

The sites listed below are excellent places to find loads of content aimed at people who are looking to learn more about web design and front end development. Much of the content is free but some of it is available for a membership fee, which may be worth the cost to save yourself some time in tracking down the right resources.

W3Schools

W3Schools

Tuts+ Network

Tuts+ Network

HTML Dog

HTML Dog

Lynda.com

Lynda.com

Articles for web design beginners

While are of the links and resources provided in this post will teach some aspect of web design, these four articles take a broad look at the subject and provide valuable information for beginners.

Resources to Learn HTML

HTML is of course one of the fundamental aspects of web design. There are a number of resources and tutorials out there that are aimed at beginners.

HTML Beginner Tutorial Series

HTML Beginner Tutorial Series

HTML Tutorials from HTML.net

HTML Tutorials from HTML.net

HTML Tutorial

HTML Tutorial

HTML Reference at SitePoint

HTML Reference at SitePoint

HTML and CSS – The VERY Basics (video)

HTML and CSS - The VERY Basics

Learn HTML and CSS: An Absolute Beginner’s Guide

Learn HTML and CSS: An Absolute Beginner's Guide

HTML Tags

HTML Tags

The Most Common HTML and CSS Mistakes to Avoid

The Most Common HTML and CSS Mistakes to Avoid

10 HTML Tag Crimes You Really Shouldn’t Commit

10 HTML Tag Crimes You Really Shouldn't Commit

12 Principles for Keeping Your Code Clean

12 Principles for Keeping Your Code Clean

More resources for learning HTML:

Resources to Learn CSS

CSS (Cascading Style Sheet) coding will control the presentation of the website and should also be a major area of focus for beginners.

CSS Beginner Tutorial Series

CSS Beginner Tutorial Series

CSS Tutorials from HTML.net

CSS Tutorials from HTML.net

CSS Beginner Tutorials from CSSDog

CSS Beginner Tutorials from CSSDog

CSS Tutorial from W3Schools

CSS Tutorial from W3Schools

CSS Reference at SitePoint

CSS Reference at SitePoint

CSS Properties

CSS Properties

An In-Depth Coverage on CSS Layers, Z-Index, Relative and Absolute Positioning

An In-Depth Coverage on CSS Layers, Z-Index, Relative and Absolute Positioning

30 CSS Best Practices for Beginners

30 CSS Best Practices for Beginners

20 Useful CSS Tips for Beginners

20 Useful CSS Tips for Beginners

Resetting Your Styles with CSS Reset

Resetting Your Styles with CSS Reset

CSS In Depth: Margins, Padding & The Box Model

CSS In Depth: Margins, Padding & The Box Model

CSS Do’s and Don’ts Part 1: CSS Selecting

CSS Do's and Don'ts Part 1: CSS Selecting

CSS Do’s and Don’ts Part 2: Markup

CSS Do's and Don'ts Part 2: Markup

Learn CSS Positioning in 10 Steps

Learn CSS Positioning in 10 Steps

Using CSS 3 (video)

Using CSS 3

More resources for learning CSS:

Typography

Typography is an important aspect of web design that impacts not only the look of a site, but also the readability and user experience.

6 Ways to Improve Your Web Typography

http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/

8 Simple Ways to Improve Typography in Your Designs

8 Simple Ways to Improve Typography in Your Designs

On Web Typography

On Web Typography

How to Size Text in CSS

How to Size Text in CSS

20 Do’s and Don’ts of Effective Web Typography

20 Do's and Don'ts of Effective Web Typography

More resources for learning about typography:

Usability

Even an attractive website won’t be very effective if it is not usable. Creating user-friendly website should be a priority throughout the design process.

Useit.com

Useit.com

Top 10 Mistakes in Web Design

Top 10 Mistakes in Web Design

Quick Usability Checklist

Quick Usability Checklist

10 Useful Usability Findings and Guidelines

10 Useful Usability Findings and Guidelines

Factors that Affect Usability

Factors that Affect Usability

8 Characteristics of Successful User Interfaces

8 Characteristics of Successful User Interfaces

More usability resources:

Accessibility

Like usability, accessibility is critical for the success of a website. If visitors cannot access the site and it’s content, it will be useless to them.

Introduction to Web Accessibility

Introduction to Web Accessibility

An Idiot’s Guide to Accessible Website Design

An Idiot's Guide to Accessible Website Design

Evaluating Website Accessibility

Evaluating Website Accessibility

CSS for Accessibility

CSS for Accessibility

11 Accessibility Tips

11 Accessibility Tips

Layouts

The resources provided here will teach you about the different types of layouts and some keys to creating effective layouts.

Fixed vs. Fluid vs. Elastic Layout: What’s the Right One for You?

Fixed vs. Fluid vs. Elastic Layout: What's the Right One for You?

Whitespace

Whitespace

Make Your Mockup in Markup

Make Your Mockup in Markup

Ultimate Guide to Grid-Based Web Design: Techniques and Tools

Ultimate Guide to Grid-Based Web Design: Techniques and Tools

More resources for learning about layouts:

Colors

Color choices have a huge impact in web design. In this section you’ll find resources for learning the basics of color theory and color psychology, as well as some tips for using available resources to help with picking a color scheme.

A Guide to Choosing Colors for Your Brand

A Guide to Choosing Colors for Your Brand

Color Theory

Color Theory

A Look into Color Theory in Web Design

A Look into Color Theory in Web Design

Using Color in Web Design

Using Color in Web Design

How to Use Color to Enhance Your Designs

How to Use Color to Enhance Your Designs

More resources about colors in web design:

The Design Process

Part of being an effective web designer is establishing a process for your design projects. In this section you’ll find some resources that teach various aspects of the design process.

Creating an Effective Mood Board (video)

Creating an Effective Mood Board

The Value of Paper Prototyping

The Value of Paper Prototyping

Using Wireframes to Streamline Your Development Process

Using Wireframes to Streamline Your Development Process

More resources for learning about the design process:

Browsers

One of the biggest frustrations for new web designers is dealing with browser inconsistencies. In this section you’ll find some information that will help you to understand browsers, as well as some resources for testing your websites.

Cross Browser Web Development

Cross Browser Web Development

IE CSS Bugs That’ll Get You Every Time

IE CSS Bugs That'll Get You Every Time

9 Most Common IE Bugs and How to Fix Them

9 Most Common IE Bugs and How to Fix Them

More resources related to browsers:

What Are Your Favorite Resources?

If you have any other resources that you would like to share please leave a comment.

For more educational resources please see:

March 23 2010

05:36

The Lost Principles of Design

The Lost Principles of Design
In the instant age that design has evolved into recently many of us often stray away from the basics. If you had a professor in college who taught you the fundamentals of design these may be engrained into your head. For the self-taught, you may have a book on your desk with these very principles. However, the more and more people that flood the internet for design content need to learn the basics before trying to make a stellar gradient in Photoshop. While this is cool and amazing right now, there will come a point where this style is strayed away from and a new style is made. In history, this lesson has repeated itself with movements like the Bauhaus and Swiss Modernism and will soon come label our current trends as part of history. The fundamentals of design will however, never change. They are the glue that holds the industry together and we need to learn & take them to heart.
Balance
Arranging parts to achieve a state of equilibrium between forces of influences.
Examples: Symmetrical, Asymmetrical, Radial
Contrast
Interaction of contradictory elements. Expresses the duality seen in opposites.
Examples: Large & Small, rough & smooth, thick & thin, light & dark, organic & geometric
Emphasis & Subordination
Establishing centers of interest which focus the viewer’s attention. If all the elements are given relatively equal weight, there will be no emphasis.
Directional Forces
Both implied and actual, they help guide the eye and mind movement of the viewer. They can also bind the work into a single entity.
Proportion
The size relationship of parts to the entire work, and each to the other. Very often associated with figural art.
Scale
The real apparent size of an object seen in relation to other objects, people, its environment, or the proportions of the picture plane.
Repetition & Rhythm
The recurrence of a design element coupled with a certain order to the repetition. Provides continuity, flow, direction forces etc.
Unity within Variety
The force operating within a work of art which can give it the appearance of oneness or resolution. The consistency of the concept.
When a a variety of these are combined a design becomes very successful and hard to ignore. It is something that commands attention, guides your eye through and keeps you visually entertained. Combining these together is referred to as Gestalt – a configuration, pattern, or organized field having specific properties that cannot be derived from the summation of its component parts; a unified whole.

In the instant design age many of us often stray away from the basics in design. If you had a professor in college who taught you the fundamentals of design these may be engrained into your skull. For the self-taught, you may have a book on your desk with these very principles that you refer to on a daily basis. However, the more and more people that flood the internet for design content need to learn the basics before trying to make a stellar gradient in Photoshop. While this is cool and amazing right now, there will come a point where this style is left behind and a new style is made. In history, this lesson has repeated itself with movements like the Bauhaus and Swiss Modernism and will soon label our current trends as part of history.

The fundamentals of design will however, never change. They are the glue that holds the industry together and we need to learn & take them to heart.

Balance

Arranging parts to achieve a state of equilibrium between forces of influences.

Examples: Symmetrical, Asymmetrical, Radial

Principles-01

Principles-02

Contrast

Interaction of contradictory elements. Expresses the duality seen in opposites.

Examples: Large & Small, rough & smooth, thick & thin, light & dark, organic & geometric

Principles-03

Principles-04

Emphasis & Subordination

Establishing centers of interest which focus the viewer’s attention. If all the elements are given relatively equal weight, there will be no emphasis.

Principles-05

Directional Forces

Both implied and actual, they help guide the eye and mind movement of the viewer. They can also bind the work into a single entity.

Principles-06

Proportion

The size relationship of parts to the entire work, and each to the other. Very often associated with figural art. (the image shows the Golden Ratio)

Principles-07

Scale

The real, apparent size of an object seen in relation to other objects, people, its environment, or the proportions of the picture plane.

Principles-08

Repetition & Rhythm

The recurrence of a design element coupled with a certain order to the repetition. Provides continuity, flow, direction forces etc.

Principles-09

Unity within Variety

The force operating within a work of art which can give it the appearance of oneness or resolution. The consistency of the concept.

Principles-10

When a a variety of these are combined a design becomes very successful and hard to ignore. It is something that commands attention, guides your eye through and keeps you visually entertained. Combining these together is referred to as Gestalt – a configuration, pattern, or organized field having specific properties that cannot be derived from the summation of its component parts; a unified whole.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

The Lost Principles of Design

March 15 2010

19:31

Learn Photoshop: All of the Basics for Beginners

We frequently publish posts on this blog that feature  tutorials for learning how to do various things with Photoshop, but we have rarely focused on just the basics. This post is intended for designers or aspiring designers who either want to get started with Photoshop or have limited experience and are looking to improve.

While there are plenty of great learning resources available online, it’s often difficult for beginners to know where to get started because everything seems to be scattered. With this post you’ll find links to plenty of resources to teach you all the basics and fundamentals of Photoshop.

Most of the resources and tutorials listed in this post will focus on teaching one particular aspect of Photoshop, such as how to use a specific tool. Everything is broken down into sections so you can find exactly what you are looking for.

Intro to Photoshop’s Tools and UI:

The resources in this section will serve as an introduction for those who are new to Photoshop. They will help you to learn your way around the interface and with some of the basics of Photoshop.

Getting Started with Photoshop

Getting Started with Photoshop

Getting Started in Photoshop

Getting Started in Photoshop

Photoshop’s Toolbox

Photoshop's Toolbox

Using Palettes in Photoshop

Using Palettes in Photoshop

More resources for learning the tools and UI:

Layers, Layer Styles, Layer Masks and Adjustment Layers:

In order to be able to efficiently and effectively work with Photoshop you will need a solid understanding of layers. The resources in this section provide guides for working with layers in Photoshop, as well as layer styles, layer masks and adjustment layers.

Working with Layers in Photoshop

Working with Layers in Photoshop

Photoshop Layers Essential Power Shortcuts

Photoshop Layers Essential Power Shortcuts

Layer Styles in Photoshop

Layer Styles in Photoshop

Saving, Loading and Reusing Layer Styles in Photoshop

Saving, Loading and Reusing Layer Styles in Photoshop

Understanding Layer Masks in Photoshop

Understanding Layer Masks in Photoshop

Getting to Know Clipping Masks and Layer Masks in Photoshop

Getting to Know Clipping Masks and Layer Masks in Photoshop

A Basic Guide to Photoshop CS4 Adjustment Layers

A Basic Guide to Photoshop CS4 Adjustment Layers

Photoshop 101: Adjustment Layers

Photoshop 101: Adjustment Layers

More resources for working with layers:

The Pen Tool:

Photoshop’s pen tool can be used for impressive results, but it can be very difficult to use if you don’t understand how it works. The following resources will provide helpful guides to explain the pen tool and how you can use it in your own work.

Photoshop’s Pen Tool: The Comprehensive Guide

Photoshop's Pen Tool: The Comprehensive Guide

Photoshop Pen Tool Guide

Photoshop Pen Tool Guide

Making Selections with the Pen Tool

Making Selections with the Pen Tool

Become a Master of the Pen Tool in Under 30 Minutes

Become a Master of the Pen Tool in Under 30 Minutes

More resources for the pen tool:

Brushes and Other Presets:

Brushes, patterns, shapes, and the other presets are an essential part of Photoshop. Whether you are using the presets that come with the software, downloading those created by other designers, or creating your own, learning the potential of these presets and how to work with them should be a priority.

Beginner’s Guide to Photoshop Brushes

Pen Tool Cheatsheet

Photoshop’s Brush Tool – Basic Guide

Photoshop's Brush Tool - Basic Guide

Installing and Managing Brushes and Other Presets

Installing and Managing Brushes and Other Presets

How to Create Your Own Photoshop Brushes

How to Create Your Own Photoshop Brushes

Guide to Patterns in Photoshop

Guide to Patterns in Photoshop

More resources for brushes and presets:

Type Tool:

The type tool is a little more straightforward than some of the others for beginners, but it still helps to have a firm grasp of how the tool works and what you can do with text in Photoshop.

A Comprehensive Introduction to the Type Tool

A Comprehensive Introduction to the Type Tool

Tip: How to Change Text Orientation

Tip: How to Change Text Orientation

Photoshop 101: The Type Tool

Photoshop 101: The Type Tool

Transform:

With Photoshop’s transform capabilities you can edit and manipulate objects in a variety of different ways. The links provided below with get you started.

Using Transform in Photoshop

Using Transform in Photoshop

Photoshop 101: How to Use the Free Transform Tool

Photoshop 101: How to Use the Free Transform Tool

Photoshop Free Transform Tutorial

Photoshop Free Transform Tutorial

Selections:

The are several different ways to make selections in Photoshop, and each technique has certain situations where it works better than others. Here you’ll learn about the basic selection tools and when to use them.

The Selection Tools

The Selection Tools

A Comprehensive Introduction to Photoshop Selection Techniques

A Comprehensive Introduction to Photoshop Selection Techniques

Master Photoshop’s Selection Tools in Under 30 Minutes

Master Photoshop's Selection Tools in Under 30 Minutes

The Magnetic Lasso Tool

The Magnetic Lasso Tool

The Polygonal Lasso Tool

The Polygonal Lasso Tool

The Lasso Tool

The Lasso Tool

How to Cut an Object in Photoshop Using the Polygonal Lasso Tool

How to Cut an Object in Photoshop Using the Polygonal Lasso Tool

The Elliptical Marquee Tool

The Elliptical Marquee Tool

The Rectangular Marquee Tool

The Rectangular Marquee Tool

Five Secrets of the Marquee Tools in Photoshop

Five Secrets of the Marquee Tools in Photoshop

More resources for selections:

Clone Stamp Tool:

The clone stamp tool allows you to duplicate, or clone, an area. The resources below will explain how to tool works and how you can use it.

How to Manipulate Images with the Photoshop Clone Stamp Tool

How to Manipulate Images with the Photoshop Clone Stamp Tool

Useful Applications for the Clone Stamp Tool

Useful Applications for the Clone Stamp Tool

Blend Modes:

Photoshop’s various blend modes give users a lot of potential to create different results quickly and easily. The links in this section will explain how you can play with the blend modes of your layers and what types of changes it will have.

An Explanation of Photoshop Blend Modes

An Explanation of Photoshop Blend Modes

Photoshop’s Five Essential Blend Modes for Photo Editing

Photoshop's Five Essential Blend Modes for Photo Editing

More resources for blend modes:

Filters

Photoshop has a number of different filters that you can use, and each has its own purpose and use. These links will explain some of the different filters, how they work, and when you should use them.

Photoshop’s Filters

Photoshop's Filters

Getting to Grips with the Vanishing Point Filter

Getting to Grips with the Vanishing Point Filter

10 Photoshop Filters You Should Definitely Know

10 Photoshop Filters You Should Definitely Know

Channels:

Earlier we provided some links to tutorials on selection methods. Channels can also be used to select and extract, as well as to edit photos in other ways.

Digging into Channels as an Extraction Tool

Digging into Channels as an Extraction Tool

Photoshop 101: Working with Alpha Channels

Photoshop 101: Working with Alpha Channels

Smart Objects:

Photoshop smart objects can help you to save time on repetitive tasks, and these links will show you how to use them.

Genius Ways to Use Photoshop Smart Objects

Genius Ways to Use Photoshop Smart Objects

Photoshop Smart Objects, Smart but not Always that Smart

Photoshop Smart Objects, Smart but not Always that Smart

Actions:

Photoshop actions are a great way to automate certain processes and save time. You can create your own actions or use those created by others.

Lights! Camera! Photoshop Actions!

Lights! Camera! Photoshop Actions!

How to Use Adobe Photoshop Actions

How to Use Adobe Photoshop Actions

More resources for Photoshop actions:

Efficiency and Performance:

If you use Photoshop a lot you will want to make the most of your time with it. The resources here will help you to work smarter with as little wasted time as possible.

Professional Tips for Improving Photoshop’s Performance

Professional Tips for Improving Photoshop's Performance

20 Photoshop Tips for a Faster Workflow

20 Photoshop Tips for a Faster Workflow

Create Your Own Custom Photoshop Keyboard Shortcuts

Create Your Own Custom Photoshop Keyboard Shortcuts

Batch Editing and Automated Processing in Photoshop

Batch Editing and Automated Processing in Photoshop

More resources for efficiency and performance:

Saving Images:

These links will show you how you can save and optimize images that are going to be used on websites, for maximum performance.

Saving Images for the Web

Saving Images for the Web

Save for Web, Simply

Save for Web, Simply

Optimizing Images for the Web with Photoshop

Optimizing Images for the Web with Photoshop

Working with Colors in Photoshop:

Colors are, of course, an essential part of any design. These resources will explain the basics of working with color in Photoshop.

Photoshop Color: Custom Photoshop Color Swatches and Sets

Photoshop Color: Custom Photoshop Color Swatches and Sets

Photoshop Color Replacement Tool

Photoshop Color Replacement Tool

More resources for working with color:

Design for Print:

Designing for print is different than designing for the web. These links will explain some of the intricacies of designing for print and how it should be handled.

Spot UVs, Proofs, Roll Folds and Other Printing Terminology Explained

Spot UVs, Proofs, Roll Folds and Other Printing Terminology Explained

Designing for Print – Setting Up Crops and Bleeds

Designing for Print - Setting Up Crops and Bleeds

More resources for designing for print:

Working with Graphics Tablets:

Although it is not necessary, you may choose to work with a graphics tablet. These links will explain how to do so and how to decide on the tablet that is right for you.

Using Pen Tablets in Photoshop

Using Pen Tablets in Photoshop

How to Choose a Graphics Tablet that Fits Your Needs

How to Choose a Graphics Tablet that Fits Your Needs

Now that you’ve learned the basics of Photoshop, here are some tutorial collections that you may want to check out:

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...