AIUX - Lesson Page

This is a sneak peek of the Lesson page from my AIUX course. I started off designing in code, but ended up feeling stuck.

Here's where I left off with my Sass styles. At one point it was much more polished than that, but still not quite what I was going for. I had (and still have) a functioning app, which is nice, but the design wasn't nearly as tight as I wanted– so I switched to Sketch to really dial in those pixels.

My progress so far has been:
1. Wireframe with Illustrator (AIUX)
2. Jump into code (HTML/Sass)
3. Get stuck in code from a design perspective
4. Switch to Sketch for designing tight UI
5. Soon to switch back to code...

You can check out the attachments to see large views of the UI and a small portion of the wireframes I started with. These helped my Ruby developer get ramped up really quickly in terms of scope and what I was after. I designed the wireframes of the product using the same exact method I teach with the product itself, very meta.

If you have any questions about any part of the process, I'd be happy to help you out. Let me know!