In this section we have put all the best of 1stWebDesigner’s content in the one place. As the title says, here you will be able to catch up if you are starting out as a web designer and polish your skills as an amateur. Keep coming to this page often, pick your interesting section and go through each article one by one until you come out as a web design professional, ready to take control over your life and work.
I admit it this is a massive section, we have covered a lot during 7 years of our existence, but we truly believe this is the best of the best training content to make a massive growth in 2015. We have videos, written content, podcasts just waiting for you to get started and take in the wealth of knowledge.
This page is dropped down in sections (jump to interesting one)
Getting Started – What It Takes To Be A Freelancer?
Graphic Design Theory, Basics, Color, Balance
Graphical Design Tutorials – Learn Photoshop
Usability, UI, UX
Coding Basics – Start Your Programming Career
HTML Tutorials
CSS Tutorials
JavaScript Tutorials
WordPress Tutorials
Freelance Business Training
Congratulations on coming to this page and showing your commitment to become a designer or become a better designer. With this profession the first thing to remember is that your learning is never done. You must be committed to never-ending education and self-growth if you want to be a brilliant web designer. This will be easy if you love what you do! If you don’t you shouldn’t become a designer anyway.
If you think earning online by building websites is an easy way to make lots of money and work from home, you are wrong. You need lots of self-discipline and invest serious time for at least a few years to become a truly good professional.
As mentioned earlier, this guide is considered to replace your classical way you learn – by spending several years in the school and paying thousands of dollars for these studies. I learned the basics of design in the web design school and basics of coding in the programming school. Looking back, I cannot believe how much time I wasted there learning outdated languages and things I never wanted to do like – interior design, 3D modeling, drawing. I knew I wanted to be a web designer, but in coding school I got to learn HTML/CSS, MySql only in the last year. In web design school I was learning web design from teachers, who didnt know much about modern web design standards and they were teaching us outdated things, which were true about 5-10 years ago.
What I did find valuable in these studies was basics. I am grateful I learned basics of coding, colors, balance, composition in school. But did I really need to spend 8 years to learn the basics? No! You’ll have quick crash course right here.
My biggest learning source in graphic and web design have always been Internet. And that’s what I am offering to you here – you will learn the basics here, and as you choose your specific path as a graphic designer, web designer or programmer you will learn only the skills you need the most to start working with clients.
The best way of learning is with practice when you go out in the world, start working with clients, promise them things you don’t even know yet how to do and figure how to do them along the way.
And since you will need to work a lot with clients, we won’t focus as much on design side, but we will teach you the business side of things. Why? Because you naturally learn design skills, but most people neglect the business side. If you are working for yourself, you have a business and you need to treat it as one. You need to learn the basics about how you can stand out, how you can sell your services correctly to be able to get jobs you really enjoy and that pay well.
Do I Need To Go To School To Become a Web Designer?
Absolutely not. If you absolutely love personal connections and learning in classes, you can do it, but you should know there is alternative way of learning online everything you need. And really it’s not really important anymore to have a diploma, we have examples, where designer with no formal education is working with clients like NASA, LA Magazine and Supreme Cort Of Texas.
Everything starts with curiosity and YOUR first step. Just listen to your instincts. - Tobias van Schneider
Click To Tweet
Read about 8 young designers doing great without college education and read a few more reasons why going to school might be a bad consequences to your future.
We don’t want to show online education as the only right option, but explain more that there is an alternative way of learning. Read objective pros and cons of standard and online education here.
How can you make living online as a designer?
Even as a creative you need to be aware and take charge of the financial side, because starving artist no longer exists in the modern world. The most classical way of making living online is by offering services – graphic, web design, coding services to clients. This is the path we will be encouraging for you to start with as well. There are alternative ways, you can make passive income and stop trading your hours for money, but you first need to be able to pay your bills and then on the side you can slowly build up passive income streams. For example, I started as a freelance designer, started writing 1stWebDesigner on the side and right now we are an educational company.
Do you have what it takes to be a freelance designer?
First of all before you start the journey and invest serious time in becoming a freelance designer, read this article to see if you are doing it for the right reasons.
Ask yourself:
“What is it I want to achieve during my career?”.
Write the answer down and really think about it. You MUST be passionate and love what you are doing, only then you will be making the right choice! Designing shouldn’t feel like work – if you are truly enjoying it, you will love learning new things, you will love the countless hours you will spend working!
We’ve got a lot of people asking us, if they are not too old to start learning about design, so let me debunk this myth. If you are a fast learner and you know how to use computer, you can learn anything. Industry changes very fast, everybody needs to keep up with the change. The good thing to newcomers is that they can easily catch up with professionals because of these constant change.
If you want to become a freelance designer you must know what you are signing up for. It is nice to work from home, but it also requires a lot of self discipline. Read these articles to know what to expect:
12 Things I Have Learned After 7 Years of Freelancing
Questions to Ask Yourself Before Becoming a Freelancer
10 Things to Consider Before Starting a Freelancing Career
Things to Know if You Plan on Working Abroad
In the world where only successful ends of journey are being celebrated, I wanted to share some failure to success stories. Don’t be discouraged by setbacks, learn from them and become stronger in the process! Here are three stories shared by 1stWebDesigner team.
“Why Do I Succeed?
I succeed because I am willing to do the things you are not. I will fight against the odds. I will sacrifice. I am not shackled by fear, insecurity, or doubt. I feel those emotions, drink them in and then swallow them away to the blackness of hell. I am motivated by accomplishment, not pride. Pride consumes the weak-kills their heart from within. If I fall, I will get up. If I am beaten, I will return. I will never stop getting better. I will never give up, ever.
That is why I succeed.” - Anonymous
Inspiring Stories From Successful Web Designers and Business Owners
Now when you know about potential setbacks, think about what kind of lifestyle you would like to have. If you don’t know where you are going, how can you possibly achieve the results you are looking for? Time will pass anyway, isnt it better to work towards your dream lifestyle?
Do you want to travel the world, while working online? Do you want to work 3-4 hours a day and spend more time with your family? This is an excellent time to take a piece of paper and start writing where you want to be in one year, three years, ten years.
To get your creative juices flowing, I will share several case studies and interviews with successful web designers and business owners:
How to Travel the World as a Freelance Web Designer or Web Developer – learn how you could live a life as a digital nomad as a web designer
An Interview With Chris Coyier – Founder of CSS-Tricks – Chris is a famous web designer and successful speaker, blogger, writer. He answers to reader questions about starting designers career online.
Principles of Design and David Kadavy’s Design for Hackers, Interview – learn how David got into design world, how having a blog contributed to his success and allowed him to write a book that went to #18 spot on Amazon. Very inspiring story.
Living a Full Life as a Freelance Web Designer with Brian Hoff – Brian Hoff took traditional way to learn in the school, he worked at Apple. He felt unhappy in 9-5 job and eventually went on to become a freelance web designer. Learn how he did it.
Wildly Successful Freelance Designer Jacob Cass Shares His Insights – Jacob is a young designer, who has been doing really well online during the years. He shares exactly how he started, how he manages his freelance work with full-time work. Lots of great lessons.
Joost de Valk, Founder of Yoast, Shares His Success Story – Joost is coming from SEO and development world. His most popular WordPress plugin is WordPress SEO. Learn how he mixed his developers experience with SEO to create a sustainable online business.
How Ruben Gamez Turned Bidsketch Into A Successful Online Business – Ruben will talk more about business side of things and share his story. He started as freelance designer and now runs a successful online business.
An Interview with Lea Alcantara: One of the Best Female Web Designers in the World – we have strong male stories, how about a female success story? She will talk a lot about establishing personal brand.
Interview with Alex Bilusic – Why And When Doing Spec Work Might Be A Good Idea – Alex explains pros and cons behind spec work. Speck work is work on crowd-sourcing sites, which is like a contest, where designers submit their designs, but only a winning designer gets paid. It is a popular starting option for new designers with it’s pros and cons.
I hope you did notice in the stories how these people took charge of their life, understood what makes them happy and passionate and did it! Passion is the key and if you are going to go this path – you must love what you do. Also notice how each of these designers have found ways to stand out from the crowd and differentiate themselves from the crowd.
You've got to find what you love. If you havent found it yet, keep looking. Dont settle. - Steve Jobs
Click To Tweet
I keep reminding to myself these wise words from Steve Jobs:
“You’ve got to find what you love. And that is as true for your work as it is for your lovers. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it.
And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle…Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma — which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice.
And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.” - Steve Jobs
Why Becoming a Freelance Web Designer is Great Right Now
Getting Started
Now when you are prepared to do what it takes, let’s get to actual learning part. In this first part you will learn the basics you absolutely need to know as a graphic designer. We will start with graphic design, then we will go into web design and eventually we will graduate to programming part. Once you have the necessary skills to do the work, we will talk about business side and how you will go about getting and working with clients.
I would recommend to go through this guide step by step and don’t skip anything, but if you seriously dont want to do anything with graphical part, you can skip to web design and programming section.
What means to be a graphic designer? What kind of jobs graphic designers can do and what kind of skills are required? I wouldn’t recommend you to just stop with being a graphic designer, because it is much easier to do well as a web designer. Pure art just don’t pay as well as a full web site service or even marketing service together with it. But you must follow your passion and find your ways, we can just show you the way – you need to walk it.
The main job of a graphic designer is to design visual elements for the web and print, such as layouts for websites (which are the most of the time “translated” into real websites by the web designers), posters, brochures, flyers or advertising campaigns (both in web and offline).
Graphic Design Theory And Basics You Must Know
In this section you will learn the most important basic design principles you absolutely must know and master.
There are in total six elements of a design which you need to be aware of: the line, the shape, the color, the texture, the value and the space. Read about each of them and see real-life examples.
Now it’s time to learn about design principles like balance, dominance and priority, proportion, contrast, rhythm, harmony and unity. It’s very important to learn these principles, because they’re what separate the good designers from the amazing designers. Some of the principles we’ll cover today are applied unconsciously, but they definitely exist and we will show you examples from the web to illustrate the concepts.
When you have learned about overall principles, it’s time to learn about composition and it’s basic elements – single visual, the golden ratio, focal point, grid design, Gestalt laws and The “Z” and “F” layout. Learn here how you can use negative space as a design element too. In the school we had a really good exercise where you needed to hand draw the flyer following these principles.
Once you have learned these basics, start observing the art around you – in the websites you visit, on cars, posters, advertisements. Notice what they are doing right, what they are doing wrong and how it feels to you. When you will become more prolific in design, you will be able to experiment and develop your own unique style.
Another great exercise is described in this article. Nowadays every phone has good camera built in them and taking photos is a great way to learn about composition, symmetry (learn about symmetry and asymmetry), background and rule of thirds.
Do you know what is the good step by step way to start and finish a design project? If you don’t, you must read 7 step formula of design thinking process. Too many times designers spend too much time than necessary on design project just because they are all over the place and are not applying systematic step by step approach. By saying that, it’s good to have design thinking process, but don’t go overboard, make sure you still stay creative and actually embrace imperfection.
*Note: If you have kids at home, why not learn design together with them? Did you know by teaching what you are learning to others deepens and amplifies your growth rate?
Learn About Typography
Using beautiful graphics and fonts other talented designers have created is the fastest way to produce quality outcome yourself. As for typography, it is important that you don’t mix ugly fonts together and don’t go too crazy as a beginner. That’s why we have created this article on combining multiple fonts and how to do it the good way. Be careful though, don’t use too many fonts, it’s best to stick to one main font and use one another different font for accents. For example on the blog, you would have all the textual content in one main font and then only main article headings in different font. You would do this to bring extra attention to headlines, since in the blog one of the main goals is to get visitors to read your content.
Here is a very helpful tutorial with examples and explanation, how you can work with types to create really unique and beautiful posters. And this typography tutorial style was even used on popular rapper disc cover.
If you like to work with type, you should learn about Swiss Style typography as well. With recent minimalism style, Swiss typography really looks great.
Good artists copy, great artists steal. - Pablo Picasso
Click To Tweet
Typography is like a soul to design, you shouldn’t underrate it. Make sure you don’t make any of these typography mistakes.
It might be too early for web typography, but this seemed the most appropriate place to pitch in these three articles:
A Simple Guide to Improving Web Typography
How to Safely Match Web Design and Typography
A Short Course On How To Improve Your Website’s Typography – learn the guidelines to consider in mastering typography for the web and discover useful tools, techniques and resources to help you achieve effective designs
If you enjoy typography, you should keep learning more about it online, here is the list of further learning and reading materials.
Learn About Colors And How To Utilize Them Correctly
I have seen so many bad designs created just because of the color choices designer made. Even if you create balanced design with good focus points and typography, if you choose bad colors or use too many of them your design will not look good.
I stick to the same rule as proposed for typography. Go with one main color and use another contrasting for all the calls to action like links, buttons. 1stWebDesigner uses white color, dark background on header and our action color is orange, which we took from our logo. In the result site looks clean and professional.
Back to you now, first you should have a fun and educational read about optical illusion and notice how great power you have in your hands as a designer. For graphic designers, unfortunately we do not have articles about colors for them, but we do have a lot of educational materials about how to apply color in web design. Don’t worry though, because basically the same principles apply on graphic design.
How to use colors effectively in the web:
How Colors Help Make Websites Successful – read how colors stimulate senses, how to mix colors and see us analyzing different websites and giving you ideas for colors you could use when building your website
Colors in Web Design: Choosing The Right Combination for Your Website – this article goes more in depth by showing color spectrum and what colors mean in different cultures
Empathizing Color Psychology in Web Design – similarly to previous article, this one talks about different color meanings and analyze good website examples
5 Web Design Colors that Encourage Visitors to Click that Subscribe Button – I saved the best article for the last. Learn about the five most popular color schemes used in web design. With the help of color palettes created by talented designers you will make a great impression with colors
A Guide To Improve Your Website’s Readability Through Colors - many designers sacrifice usability and readability to create a sexy design. Don’t do that. Rule of thumb – your grandma should be able to read text in your design easily and the most important element should grab the attention first
We are big advocates of keeping your designs simple, clean and minimal. We recommend to make use of white space and white color. This article goes in deeper explaining what makes white color beautiful and how to create websites, that look professional and elegant.
To wrap this color section up, read this article to get more ideas how to pick the right color combinations when building websites or creating designs for your clients. Usually your clients will have logos already created, which makes an excellent starting point. As I mentioned earlier, colors for 1stWebDesigner website are directly derived from our branding logo.
Creating A Logo Design And Branding
It’s hard to teach logo design and we won’t pretend that 1WD is the best place to learn it. I can give you a few pointers though – keep it simple. The best logos created are simple, elegant and with hidden meaning by utilizing negative space. For beginners the best way to create a new branding is by playing with typography and modifying text. 1stWebDesigner logo is a typographic one and has achieved unique looks just by playing with type.
If you are a creative type, you definitely should think about becoming a logo designer. If you like creativity within the set of rules like I do, you should become a web designer, the path we embrace here.
Good and Bad Logo Design Case Studies:
15 Famous And Successful Logo Redesigns – What Has Been Improved? – in this article we analyze the changes done to famous company logos and how these changes improved company branding
The Difference Between Timeless And Classic Logo Design – learn what are the four basic logo types, you can always start with when creating logos
Successful and Failed Logo Redesigns – oftentimes when companies update their logo, they loose the association they had with their clients and that’s when logo redesign has been failed. Don’t make this mistake yourself
Razzie’s Of Logo Design: The Worst Logos Ever Designed – title may be a bit bold, but this is a more fun read where designers unconsciously create controversial logos, which convey the wrong message
When trying to create a new branding, it’s important to experiment, just sketch, play with type and have loads of inspiration with successful branding examples. We can help you with some inspiration:
Lines into Trademark: Finest Line Art Logo Examples for Inspiration
38 Brilliant Logo Branding Designs For Your Inspiration
25 Sources For Logo Design Inspiration
20+ Awesome Flickr Groups for Logo and Web Design Inspiration
Graphic and Web Designers – Be Inspired!
Since we are on the groove to become inspired, let’s not stop with logo design. This section will definitely get you excited to tinker around Photoshop, start drawing and get pumped up to start delving deeper in graphic and web design.
It is very important to learn from others, be part of community to exchange ideas and share knowledge. You can find inspiration everywhere – online or offline, you just need to look for it.
Look deep into nature and then you will understand everything better. - Albert Einstein
Click To Tweet
You should never underrate the past and you should learn from history. Many great artists have lived before you, and if you neglect their work, you are simply arrogant. In the design school we spent quite a bit of time learning about great art movements that inspired our day designers and I regret to say I neglected these studies at first.
Our world is full with different countries and it is always interesting to explore how their cultural differences reflect in their artworks:
Graphic Design Examples Worldwide: from Latin America, China, Japan, Middle East, India and the Netherlands
Worldwide Graphic Design: from Scandinavia, Israel, Russia and Africa
Graphic Design from Around the World 3: from Turkey, Egypt, The Philippines, Thailand and Cuba
Notice how your culture affects how you design and develop your own unique style!
Now let’s mix up inspiration a bit more and here are lists of beautiful magazine covers, business cards, brochures, packaging designs and more:
Useful Tips on How to Design a Great Magazine Cover – this is more useful learning than inspiration you should read if you are creating cover for magazine
23 Creative Book Cover Designs and Their Story – after reading magazine article, check these creative book cover designs
50 Fresh and Creative Business Card Designs – every business needs a business card, in my early days I created quite a bit of cards. The most important thing to remember is that you are designing for print. Don’t put important elements on the edges of business card and make sure you consult with printing companies if they can print what you have created
40 Awesome Examples of Typography in Advertising – typography in advertising can be very creative process. Not many companies will want to associate with such craziness, but you can always choose to find ones, that will
Showcase of Creative and Effective Booklet and Brochure Designs – how about booklets and brochures? Graphic designers will love this
Creative and Environment-Friendly Packaging Designs – packaging design is best for creative type of designers
50 Awesome Examples of Minimal Typography – typography can be applied everywhere, just be creative about it
Become A Part of Designer Community
We didn’t want to leave you hanging with limited inspiration selection, so go ahead and check this article, where we review the best designer communities, that will be endless source of inspiration, whenever you need some.
Participate in these communities, gain new friends, follow designers, who you admire and read blogs about topics that interest you. Being part of design industry means that you need to be committed to never-ending learning and growth.
30 Must-Follow Designers on Twitter – if you are on Twitter and your friends tweet about what they ate in dinner, you need to mix it up with inspiring tweets of people sharing their latest design lessons and inspiring thoughts
30 High Quality and Most Influential Web Design Blogs of All Time – if somebody would have shared this article when I started I would have been so grateful. This article reviews in detail the best websites to read and what they write about. Read 1stWebDesigner and then read some more
You have learned the basics now and you know what you are signing up for when becoming a freelance designer. I wanted to congratulate you getting this far. You have taken the most important step and decided to take charge of your life and follow your passion!
Graphical Design Tutorials – Learn Photoshop
Note: If you are a developer, read why you should learn how to to design and join this learning!
It is time to go and learn your tools of trade. How will you design actual graphics? We will help you to get started with Adobe Photoshop, which is the most popular tool for designers. Adobe Illustrator, Adobe InDesign come next for graphic designers, but if you learn Photoshop, it will be quite easy to learn Illustrator and InDesign next because all of them are Adobe products and their interfaces are similar.
Since we are focusing on web design here, our tutorials reflect that. We are committed on helping you become a professional web designer with great business sense, not a starving artist.
We do recommend for you to learn Adobe Photoshop to get started with. It is the most popular designer tool, and everybody will recognize designs you provide in .psd format (Adobe Photoshop file type). As you grow, you will learn your own preferred tools, but now lets have a little history lesson and explore how Adobe Photoshop started its existence and grew throughout the years.
Adobe Photoshop has 30 day free trial and then it costs either 10$/mo or 30$/mo based on your needs.
To be able to work faster, download a Photoshop cheat sheet, print it out and keep it handy as you start learning Photoshop keyboard shortcuts.
It’s time for tutorials! Over years 1WD has created lots of tutorials you can follow.
Let’s start with easy ones for beginners:
Design a Custom Twitter Header in 8 Simple Steps – start by making your own Twitter header professional!
Create a Flat Countdown iOS 7 Inspired Timer – design a poster for yourself, textual and video tutorial combo for your convenience
Learn How to Quickly Create Tasty Social Icons – learn to use shape tools, brushes and layer style options
How to Create Flat Icons – learn how to create an icon embracing flat web design trend
Create a Pricing Table using Photoshop in about 20 Minutes – work with colors, rectangles, type, line and create a good looking pricing table! Oh, if you are seriously creating a pricing table for client or yourself, make sure you learn the best practices!
Create an All-Purpose Advertisement Banner – simple tutorial showing you how to create a banner
Design an Elegant Calendar in 15 Minutes – do some quick magic to learn how to subtly work with colors to create elegant and minimal design
How to Create a Music Player UI Using Adobe Illustrator – alright we will throw in one AI tutorial, just so you get some grasp about power of vectors. Enjoy!
Now it’s time for the next step, building your first website page! Are you ready?
Before we go in, I will share with you where you can find beautiful web design resources you can use when crafting your designs.
We have two great Adobe Photoshop tutorials for this, both focusing around creating the first page on your website, which is called a landing page. Second tutorial is a little bit outdated since web design trends change very fast, but look past that. It’s all about learning and you need to get a hang of Photoshop and understand how you can create website elements there:
Create a Classic-Styled Portfolio Design – learn how to use a combination of textures and patterns to create a nice old-school look and how to use guides in a smart way
Create Design Agency Landing Page – this tutorial focuses on slightly minimal style, it uses lots of simple shapes and styles to achieve clean looks
Are you still with me?
If you are and you are still thirsty for more Photoshop tutorials, here is a roundup of free and premium places where you can learn Adobe Photoshop even more. By the way we have our own video course where you can learn how to build a website in Photoshop, convert to HTML and then convert it into responsive flat WordPress Website. Check it out here.
Once you are ready to move on, I will introduce you to the basics on web design usability, user interface, user experience and latest web design trends. From now on, we will going deeper in web site design creation process.
Learn About User Interface (UI) And User Experience (UX)
First of all you should understand what UI and what UX actually means. Both of these terms will be intertwined as you design websites, but it is important for you as a designer to understand the difference.
UI and UX is all about the little details in web design, that matter. Little things matter.
In simple terms:
UI – in simple words, user interface is actually the system through which users will interact with the machine. There is hardware and software included in the user interface, hardware in the physical form and software in the logical form.
UX – also known as user experience or user usability is the way most basic users feel about using an application, a program, a website or anything. User Experience is based on the reactions and responses the user performs and provides. While it can seem related to gaining feedback, it is actually not the same. User Experience is meant to understand and make the user reach the “final goal” which is defined by the owner of the product.
Learn about UX most important factors, which influence a user’s experience with your system/product here. Once you have learned these factors transform this understanding into tangible and perceivable changes you can do in your website.
Since we are on the topic about what elements matter in a good website design, let’s keep going deeper:
Why UX Design is like Your Clothes – this fun article uses interesting comparison with clothing and UX, must read
How to Use Images Successfully, Web Design Usability Guide – this study explores how much images affect your design user experience and how to use images in your favor
Guide to User Flow – The “Foolishly Ignored” Backbone of Website Design
Essential Factors to Consider When Designing a Website – learn how to design for your target website user to ensure better user experience
The Elements of Design in Modern Web Design – use these elements like grid, line, form to create a harmonious website that feels and looks good
How to Make the Best Out of the Fold – as a web designer you will hear the term “above the fold”, it’s important that you learn about it. And while you are on it, make sure you are not making these header mistakes that drive visitors away
Introduction To Defensive Web Design – what does it mean? The defensive design is also called contingency design and refers to the idea that the interface has to be designed in such a way that potential failures will not force the user away from your webpage, but will keep him there.
5 Web Design Colours that Encourage Visitors to Click that Subscribe Button – I know I included this article already in the color section, but this is so important study, that you need to get it right and ensure you are using good colors
How To Design For The Right Audience – this article talk about the importance to know what age and social group will be visiting website, so you can adjust design to elements they will enjoy. For example medical websites have their specific guidelines, the same way as for kids you would design a different website than for grownup
That was a lot of learning, you now know most than many amateur designers! You deserve some inspiration with web designs across the globe! Enjoy!
Now, since you have learned the good way of creating websites, let’s look at the common mistakes beginner designers make. These two articles are great case studies showing terrible examples and then contrasting good solutions:
20 Reasons Why Your Website Design Sucks Part 1
20 Reasons Why Your Website Design Sucks Part 2
Embrace Flat Web Design Trend
Minimalism has been a very popular web design trend for recent years and it doesn’t seem to be going away any time soon. And it makes sense, because you cannot go wrong with clean and minimal website. Even in interior design minimalism rules for years.
These are good news for you if you are starting out just now. It is easier to learn minimal and flat web design trend than it was before with Web 1.0, Web 2.0 years ago. You just need to remember old designer saying – “Less is more.” and get to work.
Flat design principles are really simple and you can get started now. Maybe regular users don’t really care if your website is flat or not, but by following this trend, you will simply make less mistakes. And since flat trend has been embraced so much, there are so many free and cheap UI kit elements you can use in your designs. I would even go as far as to recommend to simply purchase cheap flat premium WordPress theme, customize it and build great websites quickly. It is a bit early now though, since you still need to learn HTML,CSS, WordPress and basic business skills first.
If you dont know how flat web design looks like, check this showcase of 40 beautiful flat web designs.
Flat goes hand in hand right now with HD web design (sites optimized for retina displays), so educate yourself about it too, this knowledge soon will come handy.
Learn The Web Design Basics
We already had an introduction to web design with UI, UX and web design trends, let’s keep on learning how to make a better websites and become a professional web designer. While studying this guide make sure you make the most out of it and take action, don’t just read this guide as a book – but instead play around, take tutorials, research.
As you start studying about web development, learn the 10 things every beginner developer should know. You are good with the first point from article, because you are already taking the good way of learning by learning basics first and then earning your way up to the good stuff.
Since you are working on becoming a web designer here are ten more things you should expect in your upcoming career.
Depending where you are in your journey – either coming out of school, starting fresh or just freshening up your knowledge, pick your interesting topics here. We will talk about what are the role you could fill in web industry and a good way of preparing and executing a web design project.
What potential seat you could fill in the web industry? This article is generalization and also exploring some alternative online paths like SEO, content creation and customer service, but it is a good overview in the main roles you can fill online.
When preparing for a potential web design project execution, how do you do it a good way? You will learn absolutely the most recommended way to execute a project and I invite you to take in at least wireframing, prototyping and organizing lessons. So many times I lost so much times because I didnt organize my files, didnt think the design through and in the end wasted lots of my and my team’s time.
Website Planning & Developing Your Website Blueprint – what are the things you need to think and research before designing your website?
Beginner’s Guide to Wireframes and Tools to Create Them – your first introduction to wireframes, what they mean, why and how to start creating them
How Well Do You Understand Wireframes and Prototypes? – one more article showing great examples of wireframes and prototypes
7-Step Process All Designers Should Follow To Complete Every Project – title says it all
Preparing For a Web Design Project – remember I told you how important is to be organized with your files? This article explains exactly how to do it
And here are some more new ninja tools you can use to plan better, do real user testing and recommended wireframing tools.
If you do even 20% of these recommended steps when taking a web design project, I guarantee you will spend at least 50% less time looking for files, changing designs and being stuck.
Coding Basics – Start Your Programming Career – Build A Website
Alright, finally you will be able to do some coding! This is the part where you will learn how to build websites. Let’s take a brief history lesson before we start. Did you know how web industry started in 1989? And just 20 years ago nobody was using Internet and now whole world cannot imagine how they can live with their little mobile device which gets them connected!
The path we embrace here at 1stWebDesigner is:
HTML5
CSS3
JavaScript – jQuery
PHP – WordPress
Alternative route would be this, but this is the path for hardcore programmers, who like the sound of hacking everything together jumping between C language, Ruby on Rails, Python and Java. This path won’t be for most people, but if you are enjoying solving hard coding problems. That might be the right path for you.
At 1WD we focus more on helping you to become a freelance Front-End designer with strong business sense and helping clients to drive results they want.
Before we start with HTML learning, let me give an introduction to you. If you are starting from scratch, there might be a lot of new terms to you, you won’t get at first. This article will walk you through about the ways you can learn web design, what are the most common terms web designers use and learn about web development process.
Little do’s and dont’s now.
People do appreciate:
good navigation allowing them to find what they want to find
familiar setting – you should experiment, but you should follow unwritten web design guidelines. For example, above the fold there should be the most important content, navigation, sidebar has less important, but useful information. Search bar is near the top, you can click on company logo to get to the home page and have additional navigation on footer for people who want to find out more about the company behind the website
flexible design – website that looks good on popular browsers, mobile devices, tablets
and more..
What are the dont’s in web design? They are mostly related with usability and there are terrible websites sacrificing it all just to earn a few bucks. Think twice before accepting animated banner, adding auto playing audio or video on your website, paginating articles in 10 parts just to get more pageviews and having too many social buttons in eagerness to get more shares.
Read these two articles to understand what you shouldnt do or if you do, then use with caution:
Ancient Website Design Practices That Beginners Should Avoid Part 1
Ancient Web Design Practices that Beginners Should Avoid Part 2
Check these tools to understand if you are doing things correctly. Pingdom for page speed check and Feed The Bot for Google are great tools showing the red flags as well as green lights. Speed is important part of making website usable.
HTML Tutorials
Alright, I think we are ready to get started with HTML. Right now the standard is HTML5 and you should use validator to check how well you are doing and how you can improve your website.
If you don’t know much about HTML5, this introduction article will be a big help. You will learn what are the new additions from HTML 4.0 to HTML 5, see some good website examples as well as get some book recommendations.
Here are some more do’s and dont’s focusing on helping you writing better code, check them out before and after you go into the coding phase.
Are you ready for tutorials? Let’s jump straight in it!
Note: I have separated HTML and CSS sections, but in reality these languages go hand in hand. HTML is for all content display on the web, CSS ir for making it look good.
Convert Your Product Landing Page From PSD to HTML - this tutorial will show you how to build a page in HTML, so you can see what’s behind the website in the code view
Create a Custom HTML5 Audio and Video Element UI – this tutorial will show you the power of HTML5 and use of its new audio and video elements with style
Convert 1st Ideas from PSD to HTML – convert another page to HTML
Convert A Page from PSD to HTML with Skeleton Boilerplate framework
Creating a Responsive Email Template – this tutorial will involve some CSS to make it responsive
How to Create a Responsive Website in about 15 Minutes – cool tutorial showing you how to leverage prebuilt tools and be able to build a simple responsive website fast
Now, when you have some understanding about HTML, here are 20 useful HTML5 code snippets from boilerplate, you probably will be using frequently.
This will conclude our HTML section, but there will be much more of it in CSS tutorial section, as you cannot build a website without HTML or CSS. As you saw from last 15 minute tutorial with tools you can really build out functional website fast. Take a look a these premium HTML and CSS templates to see what is possible to do and get inspired. When working with clients, I would strongly recommend thinking of using any of these cheap premium templates, because you will save so much time and achieve such high quality quickly for such small investment.
CSS Tutorials
This will be a much longer section as we mix in HTML and CSS tutorials, talk about responsive website building, best practices, animation effects. You gonna love it!
Okay, first of all let’s talk about what’s hot and what’s not by analyzing sites from Sony, Starbucks, Disney, Coca Cola and more. And before we go into tutorial marathon, arm yourself with the best responsive design tools and have a proper introduction to responsive web design.
Responsive Web Design is the concept of a website which should adapt to fit any device that chooses to display it. Not only mobile devices, but also stationery computers and tablets.
Now off to the CSS learning – basically, CSS is for styling how your website looks – margins, paddings, borders, size, color etc. Since CSS3 is the new standard, you should learn what’s new in it compared to the previous versions.
Go ahead and download some of these CSS cheat sheets, they are great help when you are starting out. I had one printed besides me, when I was actively coding myself.
Let’s get into tutorials, before we start I will share the video tutorials we are the most proud of. These videos series alone will give you a solid foundation to building responsive HTML and CSS websites.
15 thorough training videos
As a followup, you will learn cool new tricks how to make specific website elements and learn the best features of HTML5 and CSS3:
How to Create a CSS3 Pop-Out Menu – this tutorial uses bits of JavaScript to add some style
How to Create CSS3 Diamond Grids – create a nice CSS grid using shapes
Adding a Countdown Timer on the Coming Soon Page – everybody has a time, when you need one! Learn how to do it
Image Caption Animation with CSS3 Transform and Transitions – learn new CSS3 animation effects
Make Different Shapes with CSS – learn how much you can do and be free to experiment
Creating Shapes with SVG – use SVG format to create a retina scalable shapes, which look great an all size in addition with CSS shapes
How to Use CSS3 and Photoshop to Animate Objects
How to Create Smooth CSS3 Animation Styles and Effects with Ease – see what you can do easily with animation
Bend and Set Text on a Circle Without Using Photoshop – example how to do this with CSS3 and JavaScript afterwards
Now if you are ready to consider taking CSS to a whole new level you should learn about CSS preprocessors.
As a followup we have two tutorials, one about learning SASS and another about learning LESS, two of the most popular CSS preprocessors.
What’s Next?
You learned from the tutorials, you got the basics – what now?
Now you are ready to learn the best practices, get useful CSS snippets and techniques you will use frequently when building your websites. And of course resources for further learning:
Amazing CSS3 Techniques You Can’t live Without
25 Incredibly Useful CSS Snippets for Developers - whether you are a veteran web developer, or are just getting your foot in the door of css, they are all well worth checking out
CSS Best Practices to Follow and Bad Habits to Avoid – through practice, you should be able to avoid CSS errors. So, to give you a guide on the dos and dont’s when writing CSS codes, we listed below the CSS best practices to follow as well as the bad habits to avoid
<a href