How to become a web designer.

how-to-become-a-web-developer

Learning how to become a web designer consist of 3 important pillars. If you don’t take the time to develop all 3 pillars you will struggle to reach your full potential.

The pillars of web design:

  • Learn the fundamentals of design
  • Understand your medium
  • Get to know your tools

In this post I will point out the most important aspects to focus on in each pillar if you want to learn how to become a great web designer.

While you will have a head start by focusing on the right things the real magic happens when you practice and try to apply what you learn in real projects. Understanding a principle and being able to apply it effectively isn’t the same thing.

Knowing when to break the rules (and you should) is even harder.

Learn the fundamentals of design

Learning the fundamentals of design allows you to recognize good design and understand why it is good. Often in the beginning you know that you either like or dislike a design but are unsure why. If you learn the basics you will be able to describe why you like it. Over time you will learn to apply these same rules in your own designs.

There are 2 courses available on teamtreehouse.com that cover the basics of graphic design. Treehouse offers a 2 week free trial so it’s a good place to start.

Get 2 Weeks Free! Sign Up Today!

If you don’t want to spend any money work your way through these videos:

For a more in depth post including extra courses and reading material check out my previous post on learning design for non designers:

How-to-learn-design

Understand your medium

In web design just as in print or industrial design you need to understand the medium you are working in. It is extremely important that you know the strength, weaknesses, limitations and oppertunities that your medium provides.

Often web designers come from a print background and don’t understand the complexities associated with the web. The limitations of web fonts, the fact that you can’t guarantee screen size or aspect ratio, the opportunity for using motion to enhance your design. These are all unique to the web and you better become comfortable with them.

HTML – The content layer

HTML is a markup language that is used to describe the content you produce on the web. HTML is combined with CSS by your browser to display information. HTML should be used to describe the content of your document and it’s structure. Not what it looks like. This way of thinking about HTML is called semantic HTML.

Courses and tutorials:

CSS – The presentation layer

Cascading style sheets are used to dress up your content. It’s a language that is used to describe to the browser how you want your HTML rendered.

css

Often designers don’t realise why it takes developers so long to implement the designs they come up with.

Because CSS seems fairly simple it’s easy to pick up the basics by just fiddling around. However there are things that are just not all that easy when working with CSS. At the same time there are capabilities built into CSS that you don’t have available when working with a static photoshop file. Every designer should at least try implement some of their own designs in CSS and HTML. This gives you an appreciation for what is easy and what is hard. Being aware of these limitations and capabilities can and should influence your designs.

Have a look at some of the links below to get an idea of what I am talking about:

 

If you are an absolute beginner at CSS it’s worth checking out the teamtreehouse courses on CSS, I recommend the following order:

  1. CSS Foundations
  2. CSS Layout Techniques
  3. CSS Best Practices

Media queries and responsive design.

The number of devices that people use to browse the web has exploded.  We as web developers have had adapt by learning to design for multiple form factors. Responsive Web design is an approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.

Teamtreehouse has a great project that takes a non responsive site and modifies it to be responsive.

Some other links you might want to check out:

Front end libraries

Front end libraries provide a set of default CSS classes and Javascript modules to help you build modern responsive web UI’s. They typically contain grid systems, menu’s, input controls etc.  Front end libraries help by giving you a head start with the common controls and you get to benefit from a widely tested and cross browser codebase.

You should learn how these libraries work and attempt play around with designing custom themes for at least one of them. Bootstrap is very popular so if you are working commercially it will almost certainly come up at some point.

Some frameworks to check out:

To get a feel for developing sites in both Bootstrap and Foundation try this course on framework basics.  For a more in depth look at bootstrap have a look at the “Building websites with Bootstrap 3” course.

Animation and interaction design

Since you have the opportunity to use animation and motion in the web you need to understand when and how to use animation. Google has recently released a set of reccomendations for all their product called Material design.

While there are other styles that would also work this is a good place to start since it attempts to synthesise the classic principles of good design with the innovation and possibility of technology and science.

The principles of material design are:

  • Material is the metaphor
  • Surfaces are intuitive and natural
  • Dimensionality affords interaction
  • Content is bold, graphic and intentional
  • Colour, surface and iconography emphasise actions
  • Users initiate change
  • Animations are choreographed on a shared stage
  • Motion provides meaning

For a full break down of these principles have a look at this video:

Besides the design principles outlined above Google has also started developing a set of web components that implement the material design principles.

The next video focuses on how these principles affect how you design your application. Watch as 4 google designers talk you through applying these principles to your applications.

Get to know your tools

It goes without saying that you need to be able to apply all of your knowledge. For this you need to learn nd master the tools that are at your disposal. At a minimum you should be able to use both a raster graphics and a vector graphics program. Adobe is the market leader in the industry and there are hundreds of tutorials and courses available online. Lynda.com is your best bet if you want professional grade courses on Adobe products.

Conclusion

Given enough time and dedication it’s within most people’s reach to become a competent web designer. Mastering your craft will take years of dedication but the links and videos above should give you a head start on your journey.

Good luck!

How to become a web developer. Part 4 : Functional Programming

how-to-become-a-web-developer-4
In the previous installment of this series on becoming a web developer we looked at the core Object Oriented Design principles you need to understand. Today we delve into some Functional Programming.

If you haven’t seen the previous posts in this series you can find them here:

Why you need to understand Functional Programming.

No, it’s not because Functional Programming will solve all your coding problems.

Functional Programming is just another tool in your arsenal. Some problems are easier to solve using Functional Programming techniques. Others are more suited to logical programming. Others are best done using OO.

The more tools you have the better programmer you will become.

Having said that there has been a tremendous resurgence in Functional Programming over the last few years. Many programming languages are a hybrid of OO/FP (Like JavaScript and C#) so understanding functional programming will make you a better programmer in those languages.

In addition a number of languages with a stronger functional programming ethos have become popular over the last few years.

Languages like:

Some core Functional Programming concepts you need to understand

Just like OO there are a few core concepts you need to wrap your head around. I have deliberately left out some of the more advanced concepts from this post (Monads, Homoiconicity, Lazy Evaluation, Currying, etc).

If you are serious about your functional programming journey it really is worth spending the time to understand all of these.

Although it’s probably the least practical of the languages mentioned above Haskell is the purist functional language in the group. If you are serious about getting to grips with functional programming then check out the fantastic “Learn you a Haskell for Great Good!” guide.

For now I am going to focus on the easier to grasp concepts that are found in most hybrid languages like JavaScript. The aim is to get you the most bang for your buck.

Closures

A closure is a function called in one context that remembers the variables from the environment in which it was defined. Multiple closures defined within the same context remember that same context, so changes they make are shared between them. Every time a function is called that creates closures, a new, shared context is created for the new closures.

In essence you can think of it as a pairing between a piece of code (the function) and a scope (the scope available at the point of definition). When you pass the function along to other parts of your program, the scope travels along with it.

For an in depth explanation of closures using JavaScript examples check out this post.

Higher order functions

Higher order functions are functions that do one of two things.

They either:

  • Take a function as input
  • Return a function as output

If you come from a language without functional programming features this can seem a little strange at first. It is one of the most useful concepts to wrap your head around though.

If you are familiar with the command pattern in the OO world you already have a taste of what this allows you to do. Often the command pattern is just a workaround for not being able to take a function as an input parameter.

Returning a function is slightly less common but no less useful. For an excellent example of this in use have a look at how scales are implemented in d3.js.

Function composition

Function composition is the act of composing multiple simple functions to create a more complex result. You can compare it to the way the unix command line works. Lots of small simple programs can be combined using the | command to feed the output from one application to the input of another.

Some functional languages have first class support for function composition (with . in Haskell and >> in F# for example) other languages like Javascript don’t have first class support but have libraries that add it (underscore.js chaining).

Side effects

A function can be considered to have a side effect when in addition to returning a value it also get’s input from or modifies another part of the program or the outside world.

Some examples of side effects include:

  • modifying a global variable or static variable
  • modifying one of the functions arguments
  • raising an exception
  • writing data to a display or file
  • reading data from a file or database
  • calling other side-effecting functions

You should be very aware of when your functions produce side effects. Side effects make the behavior of your application harder to predict and control. The same function called twice might produce wildly different results.

Pure functional languages don’t allow any side effects in functions, instead all side effects are pushed into a monad. Don’t worry you don’t need to understand monads just yet, but they aren’t that scary. If you are interested there is a great talk by Brian Beckman that does a good job of explaining monads:

For now just be aware of side effects and try limit side effects to as few areas of your code as possible.

Functional programming in JavaScript

Now that we have covered the basics lets look at how best to start using these concepts in Javascript. I am picking Javascript as it’s a language you have to know as a web developer regardless of which backend framework or language you use.

My go to library for making functional programming easier in javascript is underscore.js, there are other options and underscore has it’s quirks but it is widely supported, easy to get to grips with and has excellent documentation.

The documentation at underscorejs.org is a good place to start but if you prefer a tutorial have a look at “Getting cozy with underscore.js“.

Conclusion

Functional programming is a large topic and learning it can feel like a brain melting task at times. Especially if you come from an imperative/OO background. Just bear in mind that learning OO in the beginning was just as hard, it seems easy and logical once you have spent thousands of hours practicing it. The same goes for functional programming.

Keep at it, it’s worth it in the long run.

Team treehouse 3 months free for a limited time only!

treehouse-free

The folks at www.teamtreehouse.com are having a sale.

As you probably know by now I am a big treehouse fan. I subscribe to their service. I know I can find most of the information they present scattered around the interwebs but the time I save not hunting around is worth the cost to me.

You might not be in the same situation, if you are strapped for cash and can’t afford the cost of the subscription there are other places you could go.

This might be a good place to start:

If on the other hand you are like me and have a million projects on the go and need every second you can spare you should give treehouse a go.

For a limited time you can get 3 Months free on their Basic Annual Plan ($75 Value).

If you are unsure on whether you would like to sign up for treehouse have a look at the review I did of them and lynda.com.

If your main interest is programming and web development team treehouse is your best bet. If you are more interested in the design side you might prefer checking out lynda.

Happy coding!