Quick Tips To Learn Web Design

Learn the fundamentals of web design :

While learning web design it is important to understand the fundamentals of design. As, it 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 about it. So if you learn the basics you will be able to describe whether you like it or not. 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.

• Aesthetic Foundations
• Design Foundations

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 opportunities 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. Moreover, these are all unique to the web and you better become comfortable with them.

• Teamtreehouse HTML deep dive.

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.

Often designers don’t realize 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. Hence, every designer should at least try to implement some of their own designs in CSS and HTML. As it 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 :

• The box model
• How CSS relates to the DOM
• Specificity, inheritance and cascading
• Absolute vs relative positioning
• Absolute positioning inside relative positioning
• Understanding CSS layout techniques

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 behavior and environment based on screen size, platform and orientation.

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

Some other links you might want to check out :

• A collection of responsive sites you can use as inspiration.
• Guidelines for responsive web design from smashing magazine.
• Mashable on responsive design.

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. No doubt Bootstrap is very popular so if you are working commercially it will almost certainly come up at some point.

Some frameworks to check out :

• Bootstrap
• Foundation
• Topcoat
• Semantic (I really like where semantic is going, keep an eye on this one)

To get a feel for developing sites in both Bootstrap and Foundation try this course on framework basics.  For instance, 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. Thus, Google has recently released a set of recommendations 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 synthesize the classic principles of good design with the innovation and possibility of technology and science.

Here are the principles of material design :

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

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 and 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 :

Ashtex Solutions will give you consultancy services and best websites and make you able to become a competent web designer. No doubt, 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!