Sketchy.
Anyone can sketch, it’s just a matter of remembering how.
ROLE: UI/UX, WEB DEVELOPMENT AND DESIGN, CONTENT CREATION
Sketchy is a platform designed to harness the power of Web Based Learning to teach the skill of Urban Sketching. Web Based Learning is powerful, as specific skills and content can be taught and learnt despite the barriers of distance and time. This means that the website functions to familiarise the user with new terminology and new applications of sketching techniques in short tidbit exercises.
Sketchy is build upon a plethora of theory. This includes pedagogy and learning theory informing the site’s structure, information architecture and content. Furthermore the site’s visual design and interactions are based upon UX/UI research.
Project Background
Web based learning (WBL) can be an extremely powerful tool; we can teach and learn specific content despite the barriers of distance and time. Whilst this medium has extreme potential, where most WBL sites fail short is in incorporating principles of effective learning.
Sketchy was intended to teach the essential skills required to sketch urban environments. This means that the website functions to familiarise the user with new terminology and new applications of sketching techniques. Once the tutorial is completed, users can take these skills and apply them to a myriad of subject matters.
Research
A thorough literature review was conducted to inform the instructional design. There is a myriad of learning theories and pedagogy, out of these emerge three commonly accepted models: behaviourism, cognitivism, and constructivism. After gaining an understanding of a student’s learning process and preference, this theory was applied by adapting the teaching and pedagogical principles of the website.
Ideation
Before any content for the website was written, an information architecture chart was made outlining the information required. The structure of Sketchy was broken up into five ‘mini-exercises,’ each adhering to a successful learning flow by following a procedural exercise and review.
A site map was then created in order to showcase the main webpage sequencing. Although intended to be finished in a linear progression, the website also caters for multiple levels of prior knowledge, as some beginners may have different experiences with drawing. I also realised that creating five ‘exercises’ was too convoluted, so I broke the structure up into three.
Sketches and doodles were then created in order to flesh out multiple versions of the website. Out of these I narrowed down the UI design accordingly to how it would fit the content. Sketchy was created for both the desktop and mobile, as it will be responsive.
Wireframes were then created in order to develop the prototype into a mid-fidelity map, before moving into high fidelity.
High Fidelity mockups were then created in order to inform the next iteration – coding the prototype.
Final Product
Sketchy was designed in order to be chunked to make information more digestible. This was be achieved through a loop of declarative objectives and procedural objectives, with quizzes and feedback being constantly provided for the user to track their learning.
structure. Additionally, both formative and summative assessment styles were taken into consideration, were objectives, and feedback configures the learning process.
The final prototype was coded using HTML, CSS and Javascript; and is fully functional.
Menu and Overview
Information Design
Interactive Instructions
Assessment
Finish
Whilst Sketchy is intended to be used on the desktop computer, it is also optimised for mobile.
The creation and justification of this website is further documented within a website proposal and prototype report. These are available to view below: