Which Web Design Course is Right for You?
So you want to learn to design and build websites? Let’s talk about where should you start, what you need to learn, apps you’ll need, industry terminology, and more. There are two sides to creating websites: design and coding. At Noble Desktop you can enroll in individual classes or full certificate programs focused on design, coding, or both.
Web Coding (Front-End Web Development)
The front-end of a website is what you see in a web browser. It’s the content, appearance, and interactivity seen in a webpage. To code the front-end you’ll use HTML, CSS, and JavaScript. Below are explanations of common web coding topics:
HTML & CSS
The foundation of all webpages is HTML & CSS. HTML marks up or labels content such as headings, paragraphs, lists, links, and more. CSS styles the content based on your markup. HTML & CSS are easier to learn because they are coding, not full-blown programming. HTML is the easiest because there’s less code and complexity. CSS takes a bit longer to master because there’s more to it and it has some concepts that need to be understood for things to work properly. CSS continues to get new features faster than HTML, with newer layout techniques such as flexbox and grid. CSS continues to develop to give developers more control over the layout and appearance of a webpage.
You can get started with the basics of HTML and CSS in only 3 hours in our Intro to HTML & CSS class. If you need to learn it more in depth, take our Web Development Level 1 class, or for the most comprehensive program take our Front-End Web Development Certificate.
JavaScript
You can add animation and interactive functionality to webpages using JavaScript. JavaScript is the lord of a webpage, and can change both content (HTML) and styling (CSS) within a page. If anything needs to change after a page had loaded, it’s typically JavaScript that will be responsible for doing so.
Instead of having to write all the code yourself, many JavaScript libraries allow you to use pre-made functionality. This will enable you to create things faster (by writing less code) without re-inventing the wheel. The most commonly used library is jQuery because it's so versatile. The best JavaScript library for animation is GreenSock (also called GSAP).
jQuery
jQuery is like the swiss army knife of JavaScript libraries. It allows you to do so many different things. Many developers have packaged up their jQuery code as plugins, allowing you to do even more (slideshows, form validation, showing/hiding) without having to write much code yourself.
GreenSock
The GreenSock Animation Platform (GSAP) is a JavaScript library focused solely on animation. GreenSock gives you the most flexibility and control over animating anything within a webpage. It’s supported by all the major ad networks and recommended by Google for creating animated banner ads.
You should know some JavaScript/jQuery before learning GreenSock. While very powerful, in some ways GreenSock is easier than a lot of JavaScript/jQuery because the GreenSock syntax is very efficient and consistent.
How to Get Started
Looking at the list of languages you can learn for front-end, it can be overwhelming knowing how much you should learn and where to start. When you’re getting started don’t worry about learning everything. You don’t need to know it all to start creating webpages. Knowing some HTML and CSS will get you started building simple websites. You can then add in JavaScript/jQuery.
See how you do learning and using those, and you’ll be in a better place to decide if you want to learn more and what that will be. Maybe you’ll want to learn more JavaScript and get into GreenSock, or React.
When learning HTML, CSS, etc., keep in mind that you are learning a language! Kids learning to speak their native language can understand you before they can speak, and when coding you’ll be able to look and understand code before you can know what to type in from scratch.
Practice makes perfect. To become a proficient coder keep the following in mind:
- Learn the codes and know what they do.
- Type those codes repeatedly to ingrain them into your memory.
- As you start coding you’ll need to reference the books you get in our classes, Google, etc. until eventually you’ve written that code enough times that you can remember it without having to look it up.
- Sometimes you may not fully understand concepts when you first see them, but they should start to make more sense after you get a bit deeper into a language. While HTML/CSS let you do things with very little code and get immediate feedback, more complex languages such as JavaScript require you to understand multiple core concepts before you can do something basic. HTML/CSS are going to be easier, while JavaScript is a step up in terms of complexity and difficulty. Just take things in stages. It’s like learning to crawl, walk, and then run. In time you will get it, especially the more you learn and practice.
Noble Desktop’s front-end classes are a great way to learn to code. They come with step-by-step workbooks which you can reference later if you forget how to code something. You can practice by going over the exercises and once you know the code you can start using it to build your own pages.
Visual or UI Design
Visual designers create the look and feel of the website, and make decisions over layout, typography, composition, and more. Using Sketch, Adobe XD, or Photoshop, designers layout webpages and optimize graphics. We offer visual design courses that focus on learning the applications, as well as a Visual Design Bootcamp to learn design concepts and to start developing a portfolio.
Sketch
Sketch is a Mac-only app that many web designers are using, and more people every day are switching to it. Not only can you create your designs (for website, apps, etc.), but you can even turn them into working prototypes to show clients and do user testing with.
You can buy Sketch for $99 which includes 1 year of updates and Sketch Cloud. After that, you can renew the license for $69/year if you want updates and access to Sketch Cloud.
Adobe XD
Adobe XD is a newer Adobe app that is very similar to Sketch. It’s an easy to use app that enables you to design and prototype your ideas. Unlike Sketch though, it works on Mac and PC. It’s a relatively new app and is still developing rapidly.
You can get XD for free (with some limitations), as a single app for $9.99/month, or as part of the Creative Cloud.
Photoshop
Photoshop has been around the longest and is used by many web designers. It is a photo editor with web design features added on, so some web designers are turning to other apps such as Sketch and Adobe XD which were created solely for the purpose of visual and UX design.
You can get Photoshop for $9.99/month, or as part of the Creative Cloud.
UX Design
UX designers are responsible for creating a user experience that is easy, intuitive, and anticipates the customer’s needs. UX designers are generally concerned with the total customer experience including the ease of finding information within the product and accomplishing tasks quickly, easily, and enjoyably. (UI designers focus on visual elements such as graphics, typography, color, and composition.)
The following are primary tasks of UX designers:
Designing Prototypes
The prototype is an interactive representation of how the product will operate. The prototype is a functional version of the concept without code or final UI design, letting the UX designer test out ideas quickly without expensive development costs. It can demonstrate paths between pages or screens and animations within the design. UX designers may present the prototype design to a client and do user testing with it. Many of the UI decisions happen after the prototyping phase. Prototypes can be built with apps such as Sketch, Photoshop, Adobe XD, and InVision (to name just a few).
Creating Mockups
A mockup is a high-fidelity, static representation of the product. The mockup stage is where designers choose the colors, typography, etc. The mockup takes time to develop, so UX designers typically don’t get to this stage until they are sure about the features and flow of the app or website. The mockup is usually created with apps such as Sketch, Photoshop, and Adobe XD.
Usability Testing
User testing is an important part of the UX design process. UX designers demo a prototype to prospective users, so they can understand a user’s pain points while using the product, and suggest improvements. Sometimes users won’t notice or interact with a particular button or will propose a new feature.
Communication
Good communication skills are important for a UX designer. UX designers must explain a product to users in plain English, then translate customer feedback to the developers writing code, clients, digital marketers, and other stakeholders who don’t understand the technical language of design. For UX designers, the ability to communicate with individuals of differing technical expertise is essential.
Product Improvements & Feedback
UX designers make adjustments to the product based on research and user feedback. These adjustments can include changing the layout of screens and order of information, adding or removing features, and altering the interface to make the customer experience more intuitive.
Web Animation & Video
The use of animation in webpages and emails continues to increase. You can use it to catch a user's attention, and make your content stand out. Videos are a great way to demonstrate things in ways words and photos simple cannot, and are becoming more common in today's websites.
Animated GIFs
Animated GIFs work virtually everywhere, so they can be used in emails and webpages. From social media posts, to email announcements, to ads, to webpage animations, animated GIFs are good for short animations. Photoshop makes it easy to create animated GIFs. If you want to create more complex animations, you can build them in Adobe After Effects and convert that into an animated GIF.
GreenSock
GSAP (The GreenSock Animation Platform) is the industry-standard JavaScript library to animate websites. With GreenSock you can create web banner ads, complex timed animations, interactive animations, and more. It’s supported by all the major ad networks and recommended by Google for creating animated banner ads. You should know some JavaScript/jQuery before learning GreenSock.
Adobe After Effects
After Effects is used for animation and video post-production. With it you can design and deliver professional motion graphics and visual effects for film, TV, video, and web.
Adobe Premiere Pro
You edit video in Premiere Pro. Put video clips together, trim off unwanted parts, add audio, color correct footage, adjust timing, and so much more with this powerful video software.