![](\"https:\/\/designshack.net\/wp-content\/uploads\/web-design-in-30-days.png\")
\n
![\"30](\"https:\/\/designshack.net\/wp-content\/uploads\/web-design-in-30-days-368x246.png%20368w,%20https:\/\/designshack.net\/wp-content\/uploads\/web-design-in-30-days-150x100.png%20150w,%20https:\/\/designshack.net\/wp-content\/uploads\/web-design-in-30-days.png%20768w\")
<\/p>\n
\n<\/p>\n
Is learning the basics of web design still on your \u201csomeday\u201d list? Why haven\u2019t you got started yet? We\u2019ve put together 30 tips and resources to help you start learning web design this month (and maybe even find yourself a new career path!)<\/p>\n
Graphic designers, print designers, and creatives looking to learn something new or break into website need to quit procrastinating. Every day that you don\u2019t take that first step leaves you one day further behind everyone else!<\/p>\n
Follow these steps to begin learning how to create your first website, industry best practices, and much more\u2014all in 30 days!<\/p>\n
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you’ll ever need in your design resource toolkit.<\/p>\n
See More<\/a><\/p>\n The best way to start learning web design is to start doing it. That\u2019s the advice from David Kadavy, author of Design I recommend you start a blog. I started a blog just to have a web design playground, and 7 years later, I launched a best-selling book on the subject. Having a personal project, such as a blog, gives you a place where you can try new things, and your boss won\u2019t fire you if you mess up.<\/p>\n<\/blockquote>\n You don\u2019t have to start with a massive website or crazy design; start small. Play with the website, figure out what makes things work. (And make sure to inspect the code, so you can start getting familiar with what\u2019s making your website work.)<\/p>\n Want to get started quickly? A website builder like Wix can help to give you a head start with a stylish website design<\/a>, as you begin to learn the concepts and building blocks of what goes into a website.<\/p>\n Start reading. Because you are on this blog, you\u2019re probably used to keeping track of what\u2019s happening in the world of design. Keep reading.<\/p>\n Read everything you can about website design, and trends, and techniques, and best practices. Follow designers you admire on social media.<\/p>\n Cast a wide net for your website design reading as well. Read about the basics to learn some code, read about design theory and read tutorials and current articles.<\/p>\n If you aren\u2019t the most articulate person, brush up on those skills. A big part of website design is communication.<\/p>\n Website designers have to communicate with clients regularly to figure out what problem the design needs to solve; they have to communicate those solutions and implement them as well.<\/p>\n Consider a subscription to Envato Elements<\/a>, which also gets you access to the excellent Tuts+<\/a> learning resource.<\/p>\n Tuts+ publish regular courses on graphic and web design, from basic techniques, through to the latest advanced approaches and developments. It\u2019s completely self-paced, taught by expert instructors. You\u2019ll also get access to Envato Elements, which is a great resource for finding graphics, templates, and more to plug into your web design work.<\/p>\n HTML, or hypertext markup language, is a cornerstone of website design. HTML is the skeleton that helps create the structure of a website and once you can read the language, the world of website design will make a lot more sense.<\/p>\n W3Schools has a great HTML starter tutorial<\/a> with hundreds of HTML examples that you can play with on the screen to see what happens and exactly how it works. (You might find it more intuitive than you imagined.)<\/p>\n While HTML is a good start, you can learn almost any programming language from Codeacademy<\/a>. The free set of tools teaches you to code using interactive activities and games.<\/p>\n You can pick up a Codeacademy course where and when you need it and start and stop as needed. Pick a subject to learn \u2013 web development, programming, data science \u2013 or language to focus on \u2013 HTML & CSS (a great place to start), Python, Java, SQL, Ruby, and more.<\/p>\n CSS, or cascading style sheets, define the presentation of a document written in HTML, or XML and SVG.<\/p>\n As defined by Mozilla<\/a><\/p>\n CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.<\/p>\n<\/blockquote>\n Mozilla also has a great collection of CSS resources to get started, with a solid introduction of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS. Then modules move on to explain styling text and boxes.<\/p>\n If you are already working in a creative or graphic design field, think about the things you already know that you can apply to website design as well. The principles that make something visually appealing don\u2019t change based on medium and all that design theory will come in handy in the digital space as well.<\/p>\n While elements such as learning code might not feel natural, having a design background is a huge bonus. What good is a beautifully coded website if not one wants to interact with it?<\/p>\n Take note of websites that you love. What about them is appealing to you? (And how can you learn to replicate those elements?) Pay attention to:<\/p>\n Wireframing is a web designer\u2019s brainstorming.<\/p>\n In its purest form, a wireframe is a sketch of what the website will be. It\u2019s not an outline of aesthetic elements, rather a blueprint of the website. Drawing a wireframe isn\u2019t really about the look of this design, it\u2019s about the information structure therein.<\/p>\n Not sure how to create a wireframe? Digital Telepathy has a guide of best practices<\/a> to help you learn.<\/p>\n Sketch<\/a> is a vector-drawing tool for Mac that makes it easy to create design elements. A lot of designers are turning to Sketch to create UI elements and repeating design blocks.<\/p>\n It\u2019s packed with plugins and allows you to export code for easy use and access. It\u2019s one of the most powerful, and popular, tools to come around since Adobe\u2019s Creative Suite and worth your time.<\/p>\n AI, VR, AR, 360-degree video, bots.<\/p>\n It can be hard to keep up with so many new technologies and trend. But you need to make a point to stay on top of these changes.<\/p>\n Tackle them one at a time and start with technologies that are the most directly related to the work you do. If you have a website with online chat, start by learning about bots. Or if you use a lot of video content, play around with 360-degree video.<\/p>\n Elements such as artificial intelligence and virtual or augmented reality are even more complex but are likely to become integrated parts of the website design landscape down the road. At a minimum, you should know what they are and what the potential uses might be.<\/p>\n While many web designers think an SEO specialist can handle getting a website ready for search engines to read, there\u2019s a lot of design work that\u2019s connected to SEO.<\/p>\n From the way images are uploaded to creating clean code that\u2019s fast to including meta descriptions on pages and elements, the designer should incorporate search thinking into their workflow.<\/p>\n Freelancers, this is vitally important for you as well. Most clients are savvy enough to ask for an SEO-optimized website. If you work alone, you need to know enough to create a solid framework that Google can read (and be able to refer the client to an SEO specialist if more work needs to be done).<\/p>\n A website builder can be a great way to get comfortable with best practices and how to start building and designing websites.<\/p>\n Most of these tools have plenty of templates and allow you to customize elements and even add code snippets. For simple sites, many website builders also have a free plan where you can create a personal portfolio page or basic website that serves as a playground for you.<\/p>\n Then pick apart the pieces within the website builder. Look at how they are designed and coded to get a feel for how it all comes together. You\u2019ll be amazed by what you can figure out just by picking another design apart.<\/p>\n Is there someone you work with that you admire as a web designer? Take them to lunch and pick their brain about the industry.<\/p>\n Finding a mentor that is willing to work with you and help you think about the field and how to learn web design on your own can be invaluable. And while you can probably find a mentor in an online community, nothing is better than a live person that you can meet face-to-face periodically. (Maybe it is worth having online and in-person mentors.)<\/p>\n Once you start getting comfortable with some code and programming, you want to join the CodePen<\/a> community. The open-source community allows you to share and edit code snippets in a social network of sorts.<\/p>\n Here\u2019s a little more from the site\u2019s founders: \u201cCodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating tool for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript and preprocessing syntaxes that turn into those things.\u201d<\/p>\n For some learners, a more formal classroom setting is best.<\/p>\n There are a ton of classes available \u2013 in-person and online \u2013 for you to learn web design basics. Start with a local college or online learning hubs such as Udemy or Coursera. Pick up a class at your current ability level and just keep moving forward.<\/p>\n For the not-so-traditional-learner, find the answer to the web design problem on Google. There are so many tutorials and videos available that can walk you through almost any problem \u2013 and solution.<\/p>\n The key is to search exactly what you need to know and look to a reputable source for the answer. Here\u2019s another tip when it comes to tutorials and videos \u2013 more recent content is probably going to give you a better, more complete and more relevant answer. (Remember, some of this stuff is changing fast.)<\/p>\n Nothing can make or break a website like user experience design. You need to plan for it and understand it.<\/p>\n Here\u2019s how the Interaction Design Foundation<\/a> describes UX design:<\/p>\n User experience (UX) design is the process of creating products that provide meaningful and personally relevant experiences. This involves the careful design of both a product\u2019s usability and the pleasure consumers will derive from using it. It is also concerned with the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function.<\/p>\n<\/blockquote>\n UX designers, or designers who are aware of the process of experience formation, seek to create and shape the factors influencing the process deliberately. To do this, a UX designer will consider the Why, What, and How of product use.<\/p>\n<\/blockquote>\n What does a modern website design look like? It\u2019s not a trick question. To design modern websites and user experiences, you need to know what users want and how they are interacting with it. If the last time you downloaded an app or looked at a website on your phone was 2016, you\u2019ve got a lot of ground to make up.<\/p>\n Creating website designs that have modern touches and trends integrated into the design will help your projects stand out. How do you know what\u2019s trending? Keep reading sites like this and pay attention to what other designers are doing. Take note of colors and styles and features that are included in the websites you visit frequently.<\/p>\n Start every design without color. A great designer once told me that if your design works in black and white, it will be flawless in color.<\/p>\n That might not always hold, but it is a great starting point.<\/p>\n By creating designs in black and white, you can see where elements contrast and how they play together. You\u2019ve stripped out any emotional associations with color or eye movement that happens because of it. This simplest form of design will give you an idea if something works as a concept before you move on to finalizing it.<\/p>\n Google Fonts<\/a> is your friend.<\/p>\n Regardless of how you feel about Google, the ability to browse, sort and select typefaces that you know will work in website designs is important. You don\u2019t have to think about licensing or if typefaces are compatible with specific browsers or not.<\/p>\n The limitation is that you only have what\u2019s in the Google Fonts library to work with. But if you try you can find something that will fit almost every project. It\u2019ll save you a lot of time in the long run.<\/p>\n Download a user interface or icon kit and pick it apart.<\/p>\n Just as you can inspect the code of a website, look at how design elements are constructed for the web. Take note of the scale and grid, look at the color mixes and how files are organized within Photoshop or Illustrator.<\/p>\n Look for a kit to download that includes elements in multiple formats for high-resolution displays. (Downloading a bunch of JPEGs isn\u2019t going to serve you all that well.)<\/p>\n Then try to build or customize an element or two of your own.<\/p>\n Modern website design has a strong focus on typography \u2026 good typography. From hero headers with giant words to layers of text that draw a user into the design, understanding the principles of how to pair type elements and construct engaging text blocks is vital.<\/p>\n Start with Ellen Lupton\u2019s Thinking with Type<\/a>. (There\u2019s also a book of the same name.) Lupton is the authority on typography and her information will have you thinking like a typographer in no time.<\/p>\n When you are starting to feel pretty good about dabbling with web design, challenge yourself again to learn JavaScript. After HTML and CSS, it is the most important language of the web.<\/p>\n JavaScript is a tool that allows designers to implement complex things and interaction on web pages. It\u2019s what makes a slider slide or that parallax animation animate.<\/p>\n Learn JS<\/a> has an interactive tutorial to help you get started.<\/p>\n Once you start designing for the web, make sure to update your portfolio with web design projects. This simple action will help you show yourself \u2026 and others \u2026 that web design is part of your repertoire.<\/p>\n An updated portfolio can help potential clients see what your \u201cstyle\u201d looks like. Make sure to showcase layouts, colors, typography and different techniques that show what you can do.<\/p>\n With so many shortcuts and code snippets to help you fix almost any website issue you are having, don\u2019t get lazy. Remember to challenge yourself continually to learn new skills, new technologies and keep improving your web design game.<\/p>\n The one thing about this field is that it is constantly changing; there\u2019s always something new to learn or try.<\/p>\n Get out there and design. You have to start designing websites to be a web designer.<\/p>\n Start small, but take on projects with others. Ask to join in on a project with a team at work. Tackle a small website for a friend. The more experience you have building websites, the better and faster you will get.<\/p>\n What are you waiting for? Stop procrastinating.<\/p>\n Use your network to collect feedback on your website design projects, no matter how small you think they are. Listen to this feedback \u2013 even if you don\u2019t like it and see what you can learn.<\/p>\n Aside from visual preference, did the person providing feedback offer suggestions for making the website function better? Could they easily understand the goal of the design? Did they connect with the messaging?<\/p>\n1. Start a Website<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/start-web.jpg\")
<\/a><\/p>\n\n
2. Read Everything You Can<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/olu-read.jpg\")
<\/a><\/p>\n3. Be An Effective Communicator<\/h2>\n
4. Subscribe to Tuts+ & Envato Elements<\/h2>\n
![\"\"](\"https:\/\/designshack.net\/wp-content\/uploads\/tutsplus.jpg\")
<\/p>\n5. Think in HTML<\/h2>\n
6. Play with Code at Codeacademy<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/codeaca-1.jpg\")
<\/p>\n7. Learn to Understand CSS<\/h2>\n
\n
8. Apply Your Design Skills to the Web<\/h2>\n
9. Pay Attention to Websites You Love<\/h2>\n
\n
10. Draw a Wireframe<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/pexels-wireframe.jpg\")
<\/a><\/p>\n11. Take Some Time to Learn Sketch<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/sketchapp.jpg\")
<\/a><\/p>\n12. Stay Up to Date with Technology<\/h2>\n
13. Get Comfortable with SEO<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/fabian-seo.jpg\")
<\/a><\/p>\n14. Play with a Website Builder<\/h2>\n
15. Find a Mentor<\/h2>\n
16. Join the CodePen Community<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/codepen.jpg\")
<\/p>\n17. Take a Class<\/h2>\n
18. Want to Do Something? Google It<\/h2>\n
19. Pay Attention to the User Experience<\/h2>\n
\n
\n
20. Pay Attention to Design Trends<\/h2>\n
21. Create Without Color<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/henrybw.jpg\")
<\/a><\/p>\n22. Learn to Love Google Fonts<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/gfonts-1.jpg\")
<\/p>\n23. Pick Apart a UI Kit<\/h2>\n
24. Become a Typographer<\/h2>\n
25. Jump into JavaScript<\/h2>\n
26. Update Your Portfolio<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/update-port.jpg\")
<\/a><\/p>\n27. Challenge Yourself<\/h2>\n
28. Maximise Your Experience<\/h2>\n
29. Ask for Feedback<\/h2>\n
30. Keep Learning New Things<\/h2>\n
![\"learn](\"https:\/\/designshack.net\/wp-content\/uploads\/rainbowlap.jpg\")
<\/a><\/p>\n