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)
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.
How to Get Started
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.
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 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 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 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 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:
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).
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.
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.
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 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.
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.