We’re coming to the end of the course, and you can give yourself a big pat on the back for all your work and the progress you’ve made with the prototyping process. Let’s take a quick look back over everything you’ve learned!
First, you learned how important the prototyping process is in web development. Not only is it an essential stage to prevent problems from arising in the future, but it also helps you save time. You then created your first wireframe on paper to start building the structure of the Yummy Noodles website.
Then, you discovered Figma, the collaborative tool for web design. You learned to create shapes and text boxes to transpose your wireframes into a Figma file and adapt them to mobile format.
Then, you built your first visual identity, which enabled you to create your final high-fidelity mock-up.
That’s quite an achievement!
You’re probably wondering what comes next. So, what are the next stages in your learning?
Discover Other Design Resources
Before we finish, I’m going to share some resources with you that I find very useful as a developer when creating and collaborating on mock-ups.
First, here are some links you can use to access quality visual resources:
Unsplash is a copyright-free high-definition image bank.
Pexels provides copyright-free images and videos.
Flaticon provides downloadable icons and illustrations in SVG format.
Undraw is a great website that provides free illustrations.
Here’s a reminder of some of the other tools we saw during the course:
Figma for creating mock-ups and wireframes
Dribbble for looking for web design inspiration
Coolors for creating color palettes
Typewolf to help you find fonts
Awwwards to get design inspiration from the best websites
Of course, these tools are relevant at the time of writing, but in a few years’ time, there may be other, better tools around. To stay abreast of these, make sure you keep an eye on what’s happening on the market: keep an eye out for information, follow relevant accounts on social media, such as Twitter or LinkedIn, sign up to newsletters, etc.
Next Steps
What Are the Next Steps in the Prototyping Process?
In this course, you’ve learned the basics of building mock-ups. But if you don’t yet feel ready to create your own mock-ups, don’t worry. Before going it alone, why not try to copy a website you like in Figma to get used to using this tool and applying best practices?
The next step could then be to create your own small projects just on one page—a CV for example, or a design for a technical test.
Like with anything else, practice makes perfect, so take all the time you need, and take advantage of every learning opportunity!
What About the Code?
To start coding your website, you’ll need to learn about integration. It might seem odd that as a developer, you’ve only learned about prototyping so far, but don’t worry—it’s an excellent first step to building solid foundations for everything you’re going to learn next.
To find out more about mock-ups and how to prepare for integration, check out the interview below with Karen, Frontend Developer at OpenClassrooms:
To learn about integration, you first need solid foundations in HTML and CSS. HTML provides the structure for your web pages, and CSS is used to create your style. To learn this, you can take the Build Your First Web Pages With HTML and CSS course. And once again, take every opportunity you can to use your new knowledge!
You’ve reached the end of the course. Congratulations on all the progress you’ve made! I hope you enjoyed this course as much as I enjoyed creating it, and I wish you the very best in your career as a developer! To finish, test your skills with a final quiz.
