By learning to use Figma, you'll take your first steps into User Interface Design and and User Experience Design. These skills are essential for building a great portfolio for yourself and potentially for your own company.

In this Figma Crash Course, I will use a real project website from Frontend Mentor which we will recreate in Figma. Learning by building a project is a great way to solidify your knowledge, so I recommend downloading the assets and following along.

I'll break this crash course into a bunch of parts as we explore different features of Figma including:

• Account setup

• Design file

• Design assets

• How to get started – the basics

• Frames

• Grid columns and rows

• Shapes

• Import images

• Labelling and grouping

• Text

• Navigation bar

• Button design

• Header title and scaling

• Additional text settings

• Hero section and Figma layers

• Groups and sections

• Fonts and Figma colors

• Text line height and spacing

• Alignment and snapping

• Masking with shapes and images

• Copying groups and sections

• Updating sections

• Color picker and copying sections continued

• Color selecting and picking correct hue

• Testimonial section

• Autolayout

• Autolayout options

• Autolayout alignment

• Autolayout content

• Gallery images

• Resizing images

• Footer

• SVG color and overlay edits

• Auto layout menu footer

• Layers toolbar, hide and lock

• Prototype viewer

• Frames and pages

• Prototype interactions

• Prototype interaction navigation to page

• Share test and preview prototypes

• Export pages

• Export groups or sections

In this article, I'll give you a brief overview of some of the main parts of the course so you can get started designing in Figma.

Introduction

Let's begin by creating an account on the Figma Website. You can do this here: Figma.com.

Just sign up with a new account (email or Google sign in) – it's completely free

Next we need to get the design assets to use for this project, which we'll grab from Frontend Mentor. You can download them here:

We are going to build our first draft page. Take a look at the default design layout we will be working with below. Select the + sign, or on the right hand side create a new design page.

How to Make a Frame in Figma

First we will create a frame. This is the same as a page, and it's where our design will live. You can size a frame however you want depending on your requirements.

This example will be a website, so we will select the Desktop Frame – but you can also create mobile application frames, or even custom frames.

• Select the Frame tool from the top menu

• Select the Frame size on the right panel

How to Add Grids and Columns in Figma

Before we start with the design, you will want to add grids that help you keep the alignment of content for your page consistent.

You can add grids to a frame and customise them. For example, I often prefer 12 grids as this is the default for website development.

• Select the frame you wish to grid

• Select Layout Grid on the right panel

• Select Columns and 12 units

How to Use Shapes in Figma

Use the shapes and elements in Figma to create squares, circles, lines, and more. These are the fundamentals for creating a design on a page.

I'll start with a simple rectangle which we will use to create our hero navigation section for the top part of this home page.

• Select Square Shape tool

• Create a square

• Begin to shape and size it

How to Add Images in Figma

You can add images from an online source or locally to your page. Images are an important part of designing a website, especially for the hero section.

Let's add a logo as our first image which we will add to the top left of the screen.

• Drag and drop an image from you local computer

• Import an image from the shapes image upload option

• Resize and place the image on the design

How to Add Text to a Design in Figma

To add text to a design, select the text tool and place it on the page. The font will default to Roboto, but you can change the font family, size, and color at any stage.

In this example we will use right panel to change the color and size of the font, and later the font family as well.

• Select the Text tool

• Add "About" text as the start of the navigation

• Ensure the size and color are 24 and white

How to Label Elements and Create Groups in Figma

Working with lots of layers in Figma can get confusing, so label all your elements as soon as you create them. Even better is to group different sections and shapes with labels such as "Hero Background" or "Navbar".

• Select your element/s and right click to group or press Ctrl + G

• Name your group

• Places groups inside groups for each section of your page to improve readability once your page gets large

Conclusion

Figma is simple to start using, but there's a lot to learn to use it to its full potential. With the basics of shapes, images, and text, you can easily get started prototyping a website, designing a mobile application, and much more.

If you want to take a deeper dive into these basics, I would recommend watching and following along the whole video crash course which looks at each aspect in more depth.

You can view the full results of the design below:

This whole process is part of what I am trying to teach on my own channel and also part of a course/book I am writing on design called Enhance UI. The goal is to help developers understand the fundamentals of design. Check out my Enhance UI Book below:

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia. I have a tiny channel on Twitter and YouTube, so if you want to know more about me or enjoy my content, check them out sometime. 😉

• YouTube: https://youtube.com/adriantwarog

• Twitter: https://twitter.com/adrian_twarog

1. Wireframe
   Sketching the layout
2. Prototype
   Preparing the user interface from the wireframe
3. Design in Figma
   Completing the design from the prototype with color, image, etc

Watch the full video course with the step-by-step process in the YouTube embed below for free:

Step #1: How To Make a Wireframe

The first step to designing a website: wireframe it.

A good wireframe can give you the vision for the entire layout and functionality of your website. It can also serve as the first stage of a design.

Wireframes give you an idea of the overall structure pages will take, and how navigation will flow.

If you are considering building a website, you can do a wireframe quickly and easily. You don't even have to be a graphic designer to do so.

To get started, all you need is a pencil and some paper. (Or if you want to get an iPad and iPencil.)

We are going to create a wireframe and show how it allows for a quick, iterative design process. This will create a living piece of documentation that you can use for yourself and for a client. And you can use this to reason through your planning – all before you invest any time in actually coding it.

Here are some steps we'll cover in this article (and in the accompanying video tutorial):

1. Sitemap planning
2. Creating a homepage wireframe
3. Using markup in wireframes
4. Wireframe components (header, menu, footer)
5. Wireframing your Features Page and Contact Page
6. Mobile Responsive Wireframes

Sketching out a sitemap

Wireframe #1: Sitemap Planning

Getting started with wireframing begins with a good sitemap. Before you create a page wireframe, a sitemap will give you some structure. This way, you'll understand which pages you're going to build, and how they will all connect to one another.

Most small sites may not need a sitemap. They usually just have either a single landing page, or a few common pages like Features, About, and Contact Us.

This said, as soon as your website or application becomes larger and more complex, you'll want a sitemap.

Sitemaps provide you with a brief overview of where items exist and how they interconnect.

In our example, we will create a simple sitemap which will contain just the Home Page, Features Page, and Contact Us page.

You don't have to spend too much time on this. Just add a few boxes to show each page, lines underneath to show sub-pages, and that's it.

Creating a homepage wireframe

Wireframe #2: Creating Homepage Wireframe

We are going to create our first wireframe page. If you haven't wireframed before, the process is quite simple. Each aspect of a website is represented with a shape or simple graphic, such as:

• boxes with diagonal lines through them to represent images
• horizontal lines to represent paragraphs of text
• and a circle with an L in it to represent your logo.

For the homepage, we'll build out a slider image, menu, and logo. We'll also give it a few labels to show what each item is.

This is also useful to organize each section into rectangles that we can later copy-paste onto other pages (especially for the header and footer).

Creating a wireframe for the body of our home page

Let's also create another section for an introduction to the company (About Us) and a sponsor section (with logos and images of our sponsors).

As we progress through the design, we can also implement other items into the homepage, like call-to-action buttons in areas that would be appropriate.

We finalize the design with a Footer section where we add common elements such as a Contact Form, Contact Info, and reuse the Logo once more.

Creating additional page elements in our wireframe

Wireframe #3: Using Markup in Wireframes

The wireframe is often viewed not just by designers, but by developers, clients, and management. So it's useful to add some markup to each part of the content. This can help guide people viewing your wireframe for the first time. I usually do this at the end of completing a page.

In our example, let's markup the homepage and label each part of the content with red text.

Aspects you want to markup include items such as sections, titles, contact forms, and what images might be.

Note that Markup doesn't have to literally explain what the content will eventually be – just what it represents. So instead of putting in the actual "Example of intro title", you can label the title as "Intro Title."

How to Markup a wireframe

Wireframe #4: Add Other Wireframe Components like Header, Menu, and Footer

Now that we have already created a header and footer, we can reuse them for additional pages. If you're working digitally, you can copy-paste headers, footers, and other recurring elements into new page wireframes. (And if you are just using paper and pen, you can always use a razor and a photocopier to achieve the same effect.)

This allows your wireframe design to remain consistent. Tools like Figma will allow you to create asset components which you can also copy-paste throughout your design. You can even configure them to dynamically update other parts of your wireframe when you change your root component.

In our example, we are going to reuse components to build a features page. By creating our first features section component, we can then copy and paste it below several times to build out our entire features page in just a few minutes.

Adding wireframe components and reusing them on different pages

Wireframe #5: Features Page and Contact Page

It gets easier and easier to building out additional pages once you get started with wireframing and build out some components. With the features page finished, we can create a Contact Us page. All we really have to do is add a few common elements, such as a Google Map, Contact Us form, and some basic contact details like a phone number and email address.

In this example, I have small logos for a phone and email, and large blocks to represent where they will be located on the page.

The contact form will be located below (without a box outline), as well as a Google map on the right hand side.

Wireframing the Contact Us Page

Wireframe #6: Make a Mobile Responsive Wireframe

No good wireframe can exist these days without a mobile version. This is because much of the web today is viewed on mobile devices.

It's good to know how a design might collapse down to smaller viewports. If you are have more time on your hands, you can also build out a tablet version of the responsive wireframe as well.

In our example, we build out the home page design wireframe section-by-section. Most of the rows and columns are collapsed. And since we're on a mobile viewport, many of the images, texts and blocks reduce in size.

Because of this, it's possible for some of the sections to still have the same amount of height as their respective desktop versions. On the other hand, some sections with lots of images (like the sponsors section) might end up having much more scroll height.

Due to this, I often also add additional markup to show which desktop version sections correspond to which responsive equivalents for the mobile version.

The final wireframe with several pages designed, the sitemap, and mark-up

Wireframe Conclusion

Wireframing is a quick way to get a better idea of your website or application visually. I recommend you try it for your next project to help you plan how it might function and look.

Wireframing is the ideal approach for this, since it takes so much less time than having a designer do a full-blown User Interface prototype.

Step #2. How to Make a Website Prototype

You may have heard the old saying: "Measure twice, cut once." Well that is exactly why you should plan out a website before you build it. And that's where prototyping comes in.

When we design our websites, we progress from wireframing to prototyping to – finally – a full design.

I wanted to explore and expand on what Prototyping actually means by taking you through the full process.

In this part, we'll cover:

1. What an Early Prototype is
2. Creating a Structure: Frame, Rows, Columns
3. Adding Content: Header, Slider, About
4. Designing Sections
5. Conclusion: What we've learned from the prototyping process

Prototype #1: What is an Early Prototype?

A prototype is normally the secondary iteration of a design, as it is built on top of a wireframe.

A wireframe usually involves a simple drawn sketch via paper, pen, or online tool. Next we build the prototype, which is our more refined mockup for the website or app.

Let's take a look at the early wireframe we built so far.

The wireframe we created in [my previous wireframing course](https://www.freecodecamp.org/news/what-is-a-wireframe-ux-design-tutorial-website/" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 17.6px; vertical-align: baseline; background-color: transparent; color: var(--gray90); text-decoration: underline; cursor: pointer; word-break: break-word;).

It has a number of pages, sections, and areas where text and images will be added later.

The goal, then, in the Prototype is to build this visually, but without adding color or images.

In this example, I will be using Figma to do the Prototype. You can view the whole Figma protype here.

Prototype #2: How to Create a Website Prototype Structure: Frame, Rows, Columns

When we created the wireframe, we considered the grids – but they were hand drawn.

When doing an early prototype, we have to define them properly so that the whole design follows the grid structure.

In this example, I will be using a 12-column design with a regular width of 1140px, which is traditionally used and seen in Bootstrap designs. This gives us a 15-30px margin between grid units.

This will be useful later when we collapse the columns to rows for mobile responsiveness.

You can create your own grid structure in Figma. But be aware that you (or someone else) will later need to actually code these designs.

Whenever you're designing something, be sure to take the developer into consideration.

Prototype #3: How to Add Content to a Website Prototype: Header, Slider, Sections

Unlike the Wireframe, we are no longer representing text with lines, and headers with blocks. Instead we need to fill out content for a mockup.

This doesn't mean adding colors or images. But it does mean we have to show real text.

At this stage, it's a great idea to make sure that the header and sections are shown with the actual content they will be intended to hold. This will allow better selection for colors and images in later stages of the design.

In this part of the example, I built out the slider with hero text, and a description underneath. There are a few things to look out for at this phase of the prototype process:

• Font sizing and positioning
• Content location and spacing
• Margins and padding between sections and content

Prototype #4: How to Design Sections of the Website Prototype

For prototyping and the final mockup, it's important to start layering your groups and sections. Sections can include things like the header, the "about us" section, and the sponsors section.

You can create groups in your UI tool (Figma does this with Ctrl+G). Label your sections and set them with different background colors. This will make it easy to identify them, and will allow you to easily move them about.

Too many times I've been asked to move certain parts of a website up and down the grouping. By grouping all your components into sections, you will make it much easier on yourself during the prototype phase of the design work.

Prototype Conclusion: What We Have Learned from the Prototyping Process

As we build out the rest of the design, it's important to ensure that this early prototype does not become a full mockup for a website design.

It's easy to get carried away. But the goal of doing a prototype after a wireframe is to ensure that we can continue to plan the website's development.

It's much easier to identify problems and issues in the early planning stages and update them before diving into creating the full design. Such prototyping may only take you a few hours, but it can save days worth of effort later in the process.

Step #3. How to Build a Website Design in Figma

Our final step will pull all the elements together so far, and fill in the space between. This includes replacing blank boxes with real images, placeholders with content and greys with color.

It's important to do a bit of research into what sort of product or website you will be building. Most things can often be extrapolated from the logo, such as what kind of design and color will be used.

Design #1: Introducing the Logo

The introduction of this logo will show the colors for this design, which will include blacks and blues, as well as the design aesthetic, which has a more simple box like model.

The logo should not be too large and overwhelming, as the main focus should be on the hero content, and the menu, but it should be enough to stand out on its own when placed at the top of a website.

Design #1: Hero Section

Using the shades from the logo, we can apply the same colors to the background of the hero image. In this case, it's black with white text. This immediately allows for better contrast of the logo, menu and text in this section.

The hero section can be improved further by adding in a background image that is subtle in nature, and doesn't take focus away from our text, as well as an image that can bring into perspective the product, service or content we are trying to deliver.

Design #2: Content

The content of a design can be further improved by applying good photography or imagery.

While stock photography is useful to bring more life, if you have good images of the product or service, those always deliver more context when paired with the description, such as an about us section.

Design #3: Testimonials

It's always a good idea to bring reputation and authority to your website, so whenever designing a page, a good testimonial section provides just this.

We customise the design of this section by letting it stand out with an alternative color – in this case blue. This blue also makes this section be segregated from the section above it.

Then white is used for each of the testimonials themselves. If you only have one or two, that's fine, you can divide the boxes. However if you have many, it's also useful to turn this section into a swiping slider.

Design #4: Footer

Finally the footer. This part of the design is usually one of the easiest and doesn't require too many changes.

First we match the dark colors we have been using so far. Adjusting the contact form to fit more inline with the text of the website as well as including the logo in once more at the bottom. We make sure the same spacing is applied from the bottom and top and we are complete!

Conclusion: What the Finished Website Looks Like

What the finished website will look like

I hoped you enjoyed this journey on developing the wireframe, prototype and full design.

You can view the whole process in real time on YouTube at this link, which will cover a lot more elements, such as the mobile and responsive design, and additional thinking process for each stage.

You can also access the Figma design files to view or use if you want to give this example a go yourself, or create your own personal version using this as reference.

This whole process is part of what I am trying to teach on my own channel and also part of a course/book I am writing on design called Enhance UI. The goal is to help developers understand the fundamentals of design. Check out my Enhance Ui Book below:

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia. I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime. 😉

• YouTube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog

When we design our websites, we progress from wireframing to prototyping to – finally – a full design.

I wanted to explore and expand on what Prototyping actually means by taking you through the full process.

Note that I created another course that covers the first step of designing a website: building a wireframe. You can read about wireframing and watch my 30 minute video course here.

In this tutorial, we'll cover:

1. What an Early Prototype is
2. Creating a Structure: Frame, Rows, Columns
3. Adding Content: Header, Slider, About
4. Designing Sections
5. Conclusion: What we've learned from the prototyping process

What is an Early Prototype?

A prototype is normally the secondary iteration of a design, as it is built on top of a wireframe.

A wireframe usually involves a simple drawn sketch via paper, pen, or online tool. Next we build the prototype, which is our more refined mockup for the website or app.

Let's take a look at the early wireframe we built in the previous article:

The wireframe we created in my previous wireframing course.

It has a number of pages, sections, and areas where text and images will be added later.

The goal, then, in the Prototype is to build this visually, but without adding color or images.

In this example, I will be using Figma to do the Prototype. You can view the whole Figma protype here.

How to Create a Website Prototype Structure: Frame, Rows, Columns

When we created the wireframe, we considered the grids – but they were hand drawn.

When doing an early prototype, we have to define them properly so that the whole design follows the grid structure.

In this example, I will be using a 12-column design with a regular width of 1140px, which is traditionally used and seen in Bootstrap designs. This gives us a 15-30px margin between grid units.

This will be useful later when we collapse the columns to rows for mobile responsiveness.

You can create your own grid structure in Figma. But be aware that you (or someone else) will later need to actually code these designs.

Whenever you're designing something, be sure to take the developer into consideration.

How to Add Content to a Website Prototype: Header, Slider, Sections

Unlike the Wireframe, we are no longer representing text with lines, and headers with blocks. Instead we need to fill out content for a mockup.

This doesn't mean adding colors or images. But it does mean we have to show real text.

At this stage, it's a great idea to make sure that the header and sections are shown with the actual content they will be intended to hold. This will allow better selection for colors and images in later stages of the design.

In this part of the example, I built out the slider with hero text, and a description underneath. There are a few things to look out for at this phase of the prototype process:

• Font sizing and positioning
• Content location and spacing
• Margins and padding between sections and content

How to Design Sections of the Website Prototype

For prototyping and the final mockup, it's important to start layering your groups and sections. Sections can include things like the header, the "about us" section, and the sponsors section.

You can create groups in your UI tool (Figma does this with Ctrl+G). Label your sections and set them with different background colors. This will make it easy to identify them, and will allow you to easily move them about.

Too many times I've been asked to move certain parts of a website up and down the grouping. By grouping all your components into sections, you will make it much easier on yourself during the prototype phase of the design work.

Conclusion: What We Have Learned from the Prototyping Process

As we build out the rest of the design, it's important to ensure that this early prototype does not become a full mockup for a website design.

It's easy to get carried away. But the goal of doing a prototype after a wireframe is to ensure that we can continue to plan the website's development.

It's much easier to identify problems and issues in the early planning stages and update them before diving into creating the full design. Such prototyping may only take you a few hours, but it can save days worth of effort later in the process.

Once you've prototyped multiple pages, you can move on to the full mockup design phase. This will involve figuring out color theory, typography, and images that work accordingly. We will take a look at this in the next article in this series next month.

Bonus: Adding an Interactive Prototype Run

We only created a single page for this example. This said, prototyping also allows you to create an emulated example of the site operating.

This emulation is very useful for conducting demos, testing how clients respond to seeing a real world example of an early mock-up, and revising how all of your links flow.

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia. ? I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime ?

• Youtube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog

A good wireframe can give you the vision for the entire layout and functionality of your website. It can also serve as the first stage of a design.

Wireframes give you an idea of the overall structure pages will take, and how navigation will flow.

If you are considering building a website, you can do a wireframe quickly and easily. You don't even have to be a graphic designer to do so.

To get started, all you need is a pencil and some paper. (Or if you want to get fancy, an iPad and iPencil like I use in my video tutorial above.)

We are going to create a wireframe and show how it allows for a quick, iterative design process. This will create a living piece of documentation that you can use for yourself and for a client. And you can use this to reason through your planning – all before you invest any time in actually coding it.

Here are some steps we'll cover in this article (and in the accompanying video tutorial):

1. Sitemap planning
2. Creating a homepage wireframe
3. Using markup in wireframes
4. Wireframe components (header, menu, footer)
5. Wireframing your Features Page and Contact Page
6. Mobile Responsive Wireframes

Sketching out a sitemap

Step #1: Sitemap Planning

Getting started with wireframing begins with a good sitemap. Before you create a page wireframe, a sitemap will give you some structure. This way, you'll understand which pages you're going to build, and how they will all connect to one another.

Most small sites may not need a sitemap. They usually just have either a single landing page, or a few common pages like Features, About, and Contact Us.

This said, as soon as your website or application becomes larger and more complex, you'll want a sitemap.

Sitemaps provide you with a brief overview of where items exist and how they interconnect.

In our example, we will create a simple sitemap which will contain just the Home Page, Features Page, and Contact Us page.

You don't have to spend too much time on this. Just add a few boxes to show each page, lines underneath to show sub-pages, and that's it.

Creating a homepage wireframe

Step #2: Creating Homepage Wireframe

We are going to create our first wireframe page. If you haven't wireframed before, the process is quite simple. Each aspect of a website is represented with a shape or simple graphic, such as:

• boxes with diagonal lines through them to represent images
• horizontal lines to represent paragraphs of text
• and a circle with an L in it to represent your logo.

For the homepage, we'll build out a slider image, menu, and logo. We'll also give it a few labels to show what each item is.

This is also useful to organize each section into rectangles that we can later copy-paste onto other pages (especially for the header and footer).

Creating a wireframe for the body of our home page

Let's also create another section for an introduction to the company (About Us) and a sponsor section (with logos and images of our sponsors).

As we progress through the design, we can also implement other items into the homepage, like call-to-action buttons in areas that would be appropriate.

We finalize the design with a Footer section where we add common elements such as a Contact Form, Contact Info, and reuse the Logo once more.

Creating additional page elements in our wireframe

Step #3: Using Markup in Wireframes

The wireframe is often viewed not just by designers, but by developers, clients, and management. So it's useful to add some markup to each part of the content. This can help guide people viewing your wireframe for the first time. I usually do this at the end of completing a page.

In our example, let's markup the homepage and label each part of the content with red text.

Aspects you want to markup include items such as sections, titles, contact forms, and what images might be.

Note that Markup doesn't have to literally explain what the content will eventually be – just what it represents. So instead of putting in the actual "Example of intro title", you can label the title as "Intro Title."

How to Markup a wireframe

Step #4: Add Other Wireframe Components like Header, Menu, and Footer

Now that we have already created a header and footer, we can reuse them for additional pages. If you're working digitally, you can copy-paste headers, footers, and other recurring elements into new page wireframes. (And if you are just using paper and pen, you can always use a razor and a photocopier to achieve the same effect.)

This allows your wireframe design to remain consistent. Tools like Figma will allow you to create asset components which you can also copy-paste throughout your design. You can even configure them to dynamically update other parts of your wireframe when you change your root component.

In our example, we are going to reuse components to build a features page. By creating our first features section component, we can then copy and paste it below several times to build out our entire features page in just a few minutes.

Adding wireframe components and reusing them on different pages

Step #5: Features Page and Contact Page

It gets easier and easier to building out additional pages once you get started with wireframing and build out some components. With the features page finished, we can create a Contact Us page. All we really have to do is add a few common elements, such as a Google Map, Contact Us form, and some basic contact details like a phone number and email address.

In this example, I have small logos for a phone and email, and large blocks to represent where they will be located on the page.

The contact form will be located below (without a box outline), as well as a Google map on the right hand side.

Wireframing the Contact Us Page

Step #6: Make a Mobile Responsive Wireframe

No good wireframe can exist these days without a mobile version. This is because much of the web today is viewed on mobile devices.

It's good to know how a design might collapse down to smaller viewports. If you are have more time on your hands, you can also build out a tablet version of the responsive wireframe as well.

In our example, we build out the home page design wireframe section-by-section. Most of the rows and columns are collapsed. And since we're on a mobile viewport, many of the images, texts and blocks reduce in size.

Because of this, it's possible for some of the sections to still have the same amount of height as their respective desktop versions. On the other hand, some sections with lots of images (like the sponsors section) might end up having much more scroll height.

Due to this, I often also add additional markup to show which desktop version sections correspond to which responsive equivalents for the mobile version.

The final wireframe with several pages designed, the sitemap, and markup

Conclusion

Wireframing is a quick way to get a better idea of your website or application visually. I recommend you try it for your next project to help you plan how it might function and look.

Wireframing is the ideal approach for this, since it takes so much less time than having a designer do a full-blown User Interface prototype.

As a developer, I've built wireframes for my websites for years. I almost never develop a website without sketching out at least some of my ideas of how it will look visually.

Happy wireframing.

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia ? I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime ?

• Youtube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog

So I wanted to share some of the things I do to stay motivated to keep learning to code, and how I continue to enjoy it day after day, year after year.

Here is my TLDR for those who want to view this at a glance. But if you want to know more, keep reading!

• Start by setting aside only 5 minutes to learn
• Break down any learning into smaller achievable parts
• Just pick 1 thing to learn and get started on it immediately
• Enjoy the process of learning itself as part of the journey
• Keep to a routine with scheduled time set aside to learn consistently
• Avoid mindlessness of social media, etc when learning
• Do it again, continue to learn, it's not something you can fail at, only something you might temporarily put on hiatus

5 minutes of Learning

It doesn't seem like much. It isn't much. But it's more than not doing anything at all.

It's easy to get overwhelmed when contemplating setting aside hours of your time to learn something you might not understand.

The engagement for learning to code sometimes misses that level of entertainment you might get when playing a sport or game. But that's because that level of fun happens only once we get into the thick of things.

Setting aside 5 minutes each day or week is enough to get you started, and starting is the hardest part. Once you start coding, the rest will come more naturally.

You will enjoy and gain the motivation to want to do a little more. I've often found myself learning a lot for hours at a time after planning to have only spent 5 minutes on it.

Break down large learning into smaller parts

Most thing's can be broken down into simpler and simpler parts that are easier to understand at each level. Learning to code is no different.

Learning JavaScript, for example, might seem like a huge task. There are so many nuances to it. Yet, every part of JavaScript, down to how it handles an array (a group of items), to the way you can call methods (a way to do something) can be broken down layer by layer.

The final result is that you might just start by learning how to pop (remove a single entry from the group). If you continue learning bit by bit, you will eventually learn how all the methods and functions work, until you can use this one aspect JavaScript without having to google it every time.

You are essentially building on what you learn bit by bit until you get a better understanding of the whole, and this can be only done by reducing it all into smaller components to start off with.

Pick 1 thing to learn, and start learning it immediately

You probably already know what you want to learn, you might have had it in the back of your mind for a while. Whether it is HTML, CSS, React or even just plain old JavaScript, it's great to want to start learning something.

If you don't know yet what you want, freeCodeCamp has you covered with heaps of topics so you can just pick one or start at the top.

But if you already have a topic, don't just think about it. It's all great to read the latest articles, look at the documentation over and over, see the news of what's happening in that language, but to really get started, you need to just start.

This means if you want to learn React for example, just open up a new project right now and start working on it. It doesn't have to be anything fancy, you might just be doing the Hello World getting started guide, but the goal is to stop thinking about learning, and start learning.

Enjoy the process of learning itself as part of the journey

When you go for a run, eat some food, or go to watch a movie even, you don't think of it in terms of "I want to complete eating this dinner", or "I successfully watched that movie". Rather, you enjoy the process of what you do.

Often we forget about this in learning, we focus so hard on "Understanding the language" that we forget about "Enjoying the learning process".

The best sort of learning is done when you enjoy what you are doing. Your brain will pick it up easier and remember it longer. That's why so many people who do well are the ones already invested and happy to learn something new.

The trick is to stop thinking too much about "finishing" and more about what is fun and interesting in each topic you encounter. This way you will go further and be happier for it. When you look back, you will do so happily and when you look forward, you will want to experience more learning journeys.

Keep to a routine with a scheduled time set aside to learn consistently

It's easy to put learning last. Last thing of the day to do, last thing of the week to do. You are essentially setting it as the last object with little importance. You won't have energy by the time you get to it, and you might altogether let it lapse.

Instead, schedule it in first. First thing you might do when you wake up, or the first part of your day that you complete before going to work.

You will be setting an agenda for it that is easier to keep. You will have more energy at the start of the day so you will learn it easier. And if you schedule it in before anything else, routinely, you will over time (days and days, weeks and weeks) learn quite a lot.

It doesn't have to be for hours – when you spend just 15 minutes on a subject daily over a year, that's over 90 hours of learning!

Avoid the mindlessness of social media, etc when learning

It's easy to forget yourself or lose concentration when you have a hundred little distractions. Learning requires mental focus, and staying motivated to learn means that you should put only one focus in front of you.

With social media notifications popping up in the background, YouTube playing on the side in a picture-in-picture, and a dozen other distractions, you might feel like you are never able to learn.

The best way to stay motivated and focused on learning is to simply switch all of these things off during your learning period. Set your phone to silent or do not disturb. Close all your browser windows, and if you plan on having music, make sure it's without lyrics that might be so catchy that you find yourself singing along.

All of these affect your learning, and if you can cut them out, you will do a better job.

Do it again

Continue to learn. It's not something you can fail at, only something you might temporarily put on hiatus.

If you get used to the idea of learning, it doesn't become a chore, rather, it becomes something you look forward to.

Since technologies, libraries and frameworks are changing so often, it will be something you will need to keep doing in coding. Look forward to it and take time to appreciate that things will never be stale and boring because there will always be something new on the horizon to learn and do.

Stay Motivated to keep Learning to Code

These are some of the things I do personally to stay motivated to keep learning to code. I think they have helped me a lot in getting to where I am, which is a Full Stack developer who enjoys doing both Front end development and some Back end work as well.

Over the years I learnt HTML, CSS, JS, PHP, React, React Native and more. I figured out early on I enjoyed React, so I learn more in that area such as mobile applications, how to use state, and more.

As you learn more yourself, and code more, you will figure out what you enjoy learning and you can focus in on it, but you will only do so if you stay motivated to keep learning to code.

I'm Adrian from Australia ? I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime ?

• Youtube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog