Resources

Codio

How to Use Codio

Codio is a web-based platform for coding solutions, especially in the context of a class like what you’re taking at Cedarville University.

Getting started with Codio

Create an account

Cedarville students receive a discount for an account with Codio that will be active for one year. Watch for information from your professor for how to create your account.

Join a course

An account with Codio gives you access to the Codio development platform for creating an project you’d like. And you can join courses at will there as well. However, you'll need to access assignments for this course through links provided in CULearn for each activity.

Complete course assignments

Once you’ve joined a course you’ll see any available activities inside of that course in Codio. There will usually also be a link to activities directly inside CULearn as well. Simply click to enter such an assignment.

Invision

How to Use InVision

InVision is a web-based tool for creating prototype mockups of websites. You essentially design screen mockups using other software, upload those screens to InVision, and then add hotspots and transitions in order to simulate how the site or application should work. The result is a prototype that you can review with users in user testing, discuss with clients, and collaborate on with colleagues.

Getting Started with InVision

Create and account
University students can create an account with InVision for free using information provided by your professor that should include an access code.
Your student account will remain active until 6 months after graduation and allows you unlimited projects in the meantime.
Learn InVision
After creating an account with InVision you can log in and learn more about how to use the tool.
InVision also created an introductory video specifically for students.
Use InVision with Sketch
InVision built a very neat plugin for Sketch and other tools called Craft. This enables some very helpful features and the ability to synchronize screens in a project straight from art boards in Sketch. Learn more »
When working between Sketch and InVision you'll use Craft to keep the two in sync. Here's the overall process:
- Create a project in InVision. See project details to ensure you set up the right kind of project.
- Complete your design work in Sketch.
- Use the Craft plugin to connect to your InVision account and upload screens to the correct project. If you're doing this for the first time, make sure the Craft Manager application is running and that you've used it to install the plugin in Sketch.
- Back in InVision you can set up the hot spots/links and other interactive simulations on your screens from Sketch.
- If you make changes to the screens in Sketch be sure to upload the updates to InVision again and double-check your interactive elements in InVision.
Use InVision for Design Feedback and Revisions
As we will be using the Craft plugin to synchronize design comps from Sketch to a project in InVision your professor will use InVision’s commenting feature to provide feedback. Here is an overview of the typical process:
1. Add your professor as a collaborator on the project in InVision.
2. Use the provided submission in CULearn to indicate that you’re ready for feedback or have completed the assignment.
3. Your professor will use the comment and workflow tools to provide feedback on any screens.
4. You can review feedback by clicking on the project and then the Comments tab. Your professor might also use the Workflow tool to further amplify this process, so watch for announcements about this feature.
Use Inspect
InVision has released an excellent extended feature called Inspect that allows you to view any screen of a project uploaded from Sketch and other tools and gather technical settings from it. This includes actual CSS code, measurements, colors, and even quick access to slices exported from Sketch.
Learn more about Inspect »
Note that this tool is not a substitution for good CSS practice; you should not simply copy and paste everything Inspect provides. Instead, it is a) a helpful reference you can use for measurements while building a comp and b) provides quick access to copy and paste necessary content and settings.

Sketch

How to Use Sketch

Sketch is the preferred software for Mac users in the field of web design. It is made by Bohemian Labs and can be purchases as a student for around $50. It is a wonderful combination of many of the strengths of Adobe Illustrator and Adobe Photoshop with some unique features of its own. It also integrates smoothly with other popular web tools such as Invision.

Getting Started with Sketch

Obtain a License
University students may have access to licenses of Sketch in select campus computer labs. Look for an instructions from your professor.
If you would like to obtain a license for your own computer you may purchase one with a student discount. Learn more »
Learn Sketch
If you’ve used Adobe software such as Illustrator or Photoshop you will find Sketch easy to learn. InVision recently made a very nice set of tutorials to help folks get started with Sketch.
Watch the Sketch Tutorials from InVision »
Note that you’ll need to provide an email address in order to view these tutorials. This is a trusted site that sends a regular newsletter with excellent interactive design content.
Install Craft
Craft is a plugin for Sketch built by InVision that helps Sketch and InVision work smoothly together. Craft is discussed in the tutorials above so if you skipped over them you can learn more about Craft and download it from the Craft webpage.