Yelp Facebook LinkedIn YouTube Twitter Instagram

Noble Blog

Articles on: Web Design

Which Type of Design is Right for You?

Interested in a career in design? Confused about what career you should choose?

UX Designer, Graphic Designer, UI or Visual Designer, and Motion Designer are just a few job titles you’ll see on most design job boards. The challenge is that these job titles often overlap in job duties. There can be confusion about what different designers do. This guide will help you understand the different types of design and narrow down your choices.

Web Design  UX Design  UI Design

What Is Git & Why Should You Use It?

From web developers to app developers, Git is useful to anyone who writes code or track changes to files. So what’s it all about and why should you start using it?

What is Git?

Git is the most commonly used version control system. Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all be merged into one source. 

So regardless of whether you write code that only you will see, or work as part of a team, Git will be useful for you.

Git is software that runs locally. Your files and their history are stored on your computer. You can also use online hosts (such as GitHub or Bitbucket) to store a copy of the files and their revision history. Having a centrally located place where you can upload your changes and download changes from others, enable you to collaborate more easily with other developers. Git can automatically merge the changes, so two people can even work on different parts of the same file and later merge those changes without loosing each other’s work!

Web Design  Web Development

Should I Learn Front-end or Back-end Web Development?

Aspiring coders often ask, should I learn front-end or back-end development? The best coding language to learn and whether you learn front or back-end development depends on what you intend to do. Different languages are used to create webpage layouts, style text, create slideshows, build ecommerce functionality, program search functions, etc. Some software, such as Salesforce, allow you to customize the software to your needs with specific coding languages.

The two primary categories of coding languages for the web are:

  • Front-end Languages: HTML, CSS, JavaScript are used to design the look and feel of a website. These languages alter color, typography, layout, animation, interaction, text, and images. Everything that the user sees and interacts with is built with front-end languages.
  • Back-end Languages: PHP, MySQL, and Python are back-end languages that manage data and input from website users. For example, when you type a message into a website contact form and hit send, PHP code can send the data to a recipient’s email, or store it into a database. Data typed into a search engine, contact form, or searchable directory are other types of data that would be managed on the back-end.

What about frameworks? Framework (such as Bootstrap, jQuery, and GreenSock) are not coding languages, they are collections of code that allow you to do things more efficiently in a specific language. For example, the Bootstrap framework consists of CSS and JavaScript that simplify complex processes like creating grid-based layouts, buttons, menus, and more. jQuery and GreenSock are JavaScript frameworks that let you quickly add interactive JavaScript functionality to websites, faster than writing plain JavaScript.

Coding on a Laptop

Web Design  Web Development

You May Not Need a Full-Time Course to Change Careers

This post was written by Erica Freedman, Content Marketing Specialist at SwitchUp.

In recent years, the coding bootcamp boom has saturated the market with a variety of programs. Many software engineering and coding bootcamps offer full-time, immersive programs that can cost as much as $17,000 and require months of time to complete. Individuals who are working in full-time positions may not have the ability to quit their current career to pursue a new one. Flexible options offer a potential route to achieving a shift, but some individuals may not need a full-length course to achieve their professional dreams.

Web Design  Web Development  UX Design  UI Design

Noble Desktop Website Redesign

We launched a major website redesign earlier this month and we’d like to share some insights into the process. We’ll be discussing UX improvements, user testing, how to handle lots of content, CSS grid, flexbox, and speed.

A Major Improvement to the UX (User Experience)

We completely overhauled the visual look of the site, but one of the primary goals was to make the site easier to use. The last time we redesigned our website, we taught fewer classes. We simply outgrew that design.

Our previous registration process required multiple screens and was too complicated. We knew we could make it faster and easier, and we've already seen improved conversion rates. You can now see all class dates directly on a class page (at both the top and bottom of the page, so they are easy to find). One click and the class is added to your cart.

one click registration

An even bigger improvement is for certificate programs which contain multiple classes. Previously you couldn't see the dates on the certificate page and had to go to another screen to select the certificate program. Now you see all the dates, and one click adds all the appropriate classes to your cart. The results we've seen in just a few weeks prove what we already knew, simple and easy = more conversions.

Web Design  Web Development

Video Tutorial: Web Animation Techniques

How do we animate in this day and age of HTML5? Should you use animated GIFs, CSS, or JavaScript? Animation is coming back to the web in a big way, and the trend is to make things move. You can even add animations to emails. Learn about creating animations with CSS, JavaScript (GreenSock), Photoshop, and After Effects in this free class!

View the Presentation Slides
Download Demo Files & PDF Exercise

LEARN GREENSOCK:
Videos + Book Training:
Class (attend in New York City or Live Online)
Book (eBook or Print)
-----------------------
LEARN ADOBE AFTER EFFECTS:
Classes (attend in New York City or Live Online)
Books (eBook or Print)
-----------------------
LEARN ANIMATED GIFS:
Class (attend in New York City or Live Online):
Book (eBook or Print)

Web Design  Web Animation  Adobe  Photoshop  After Effects

Video Tutorial: Intro to SVG

If you’re not saving your vector graphics (icons, logos, etc) as SVG for use in your webpages, you should be! Instead of using pixel-based PNGs, keep the graphics as their native vectors (so they download faster and can be used at any size). As great as that is, you can even use JavaScript to animate them!

Download the Presentation Slides
Download Demo Files

LEARN MORE:
HTML5 Animation with GreenSock Class (attend in New York City or Live Online)
HTML5 Animation with GreenSock Workbook (eBook or Print)
Web Design Classes (attend in New York City or Live Online)
Web Design Books (eBook or Print)

Web Design  Web Development  JavaScript  Adobe  Adobe XD

Coding Basics: Intro to HTML Syntax

Here’s a free sample exercise to get you started coding and get a taste of Noble’s teaching style. The exercise is about as simple as it gets—you’ll learn the basic syntax and the most essential HTML tags that are needed to get up and running!

In this step-by-step exercise, you’ll learn how to create the website shown below by hand-coding HTML. Download a PDF of the exercise and class files to begin.

Microsoft patent website sample exercise

Interested in learning more coding? Find out more about starting a career in Web Design. Or check out our numerous class offerings:

Web Design  Web Development

Video Tutorial: Intro to HTML5 Animation with GreenSock (GSAP)

Want to animate your webpages or create rich HTML5 banner ads? Learn how the GreenSock Animation Platform can breathe new life into websites, mobile apps, games, or online marketing.

View the Presentation Slides & Files.
Learn more in our HTML5 Animation with GreenSock Class or Workbook.

 

Web Design  Web Development  Web Animation

Video Tutorial: Designing for Mobile

Learn about designing for mobile websites and apps. In this free class, we’ll cover numerous resources and info.

Want to learn more? Check out the following classes we offer:

Photoshop for Web Design & UI
Sketch in a Day
Adobe XD in a Day
Web Design Certificate
Responsive HTML Email
Mobile & Responsive Web Design

View the Presentation Slides

 

Web Design  Adobe  Photoshop  Adobe XD