This Axure tutorial goes through basic styling of prototypes. It explains how to use CSS styles to consistently design the look and feel of widgets across all pages. We’ll also focus on which styling options are changed through CSS and which styling features don’t affect it.
After reviweing the video tutorial, verify your comprehension of the content by completing this short pop quizz : https://goo.gl/forms/Qt3LlUUl8c7QYUbj1
It’s fun and will help you remember things better. To get the most out of it, try remembering the answer before looking at the options.
The Quizz requires an email to submit it. If you do, you’ll recieve your results along with individual feedback and comments. You don’t have to send the quizz to benefit from completing it though. The act of trying to remember the answers and filling the form is what helps you learn, even if you don’t send it in.
In the previous video tutorial, I suggested to exercice your skills. If you have followed it, you may have already created a sketchy wireframes of the three following pages :
Go back to the prototype and edit the CSS styles and other styling options covered in this video to give your prototype a look and feel that is closer to the online version of the site. Try to match colors, layout, fonts and shapes as closely as possible ! Notice wether the styles are updated everywhere and if not, try to figure out why not.
If you have not, have a look at the previous step in these tutorial series. This video about axure basics is complete with a quizz and instructions for the first step of the practical exercices. If you’re familiar with creating greyscale or wireframe layouts already, you can dive right into the styling exercice of course.
You can also post your questions and prototypes in the comments of the video for feedback.
Happy prototyping !