FR

Réalités Parallèles

Ergonomie et conception de jeu vidéo

Advanced Axure - styling axure 8 prototypes with css options

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.

https://youtu.be/naPhQR5J4gk?list=PLu1hnHTFZqvLVo5PnJ50NhWk0DIcciqaI

After reviewing 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 submit this “assignment” here to get feedback : https://goo.gl/forms/amWIqSiylfG8CDYu1

You can also post your questions and prototypes in the comments of the video for feedback.

Happy prototyping !

Posted by Cornelia on 2017-03-20. Last updated on 2020-08-15

Articles on similar topics

Axure basics - create a browsable interface

Axure training, Training in wireframing interactive prototypes, Interactive wireframing,

Axure basics - creating within-page interactions with anchors and visiblity

Axure training, Training in wireframing interactive prototypes, Interactive wireframing,

Axure basics - creating within-page interactions with dynamic panels

Axure training, Training in wireframing interactive prototypes, Interactive wireframing,

Axure - optimal widget use to iterate painlessly

Axure training, Intermediate Axure tutorial, Training in wireframing interactive prototypes, Interactive wireframing,

Axure - Creating menus with dynamic panels

Axure training, Training in wireframing interactive prototypes, Interactive wireframing,

Axure - How to create Masters and use them efficiently in Axure

Axure training, Intermediate Axure tutorial, Training in wireframing interactive prototypes, Interactive wireframing,