Getting Started with Wireframes & Prototypes for Applications
Tags: webdev, opensource, css, showdev
Published: 2022-04-06 17:57:24

#Beginning Stages
Recently, I have been working on developing comps for an application. One of the first things we decided to accomplish is agreed upon criteria. My team and I spent days just coming up with different ways to reach a common goal of solving usability concerns. In these sessions, we were whiteboarding ideas that could form into something larger accomplishing the resolution of some issues. **Whiteboarding** is definitely a technique and tool that should be used to facilitate ideas. Just like companies use this technique, we use it as an instrument to increase productivity and effectiveness. One of our earlier sessions resulted in the image that is seen below.
![White boarding design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyloey8s179l76dt6zft.jpg)

#Purpose
Our main objective is to make the feel of the application feel like a _journey_ to the user with a cohesive design. The goal is to make a smooth user experience whether you have a lot of experience or none at all. It is also being redesigned to look a little like doodle jump with the grid like structure. The image below is for reference for those of you that do not know what doodle jump is.
![Doodle Jump](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phgkklz855cfqapqr4ik.jpg)

#Application Flow _to date_
When talking more about the flow of the application, it starts off simple with two possible points either portfolio or course. From there, a type can be chosen such as Technology, Arts, Business, and or Photography. At any point the user can revert or exit the journey or flow of the application. Lastly, the style can be edited and changed. The flow is also determined based on if the user is a new or returning users which will be stored.

#Collapse Card
One of the main parts of the application that I was responsible for the card itself. Below is an image that shows the different possible card forms and its full expansion. To draw the user in and save space, the card is collapsable. It also shows the variations overtime and how our vision altered. We also took the approach from [Wiredjs.](https://wiredjs.com/) I recommend playing around with it, very cool. The variations are very apparent.
![Expanded Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x29j3te6qqsr5v7clt52.png)
![Expanded Card 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4hbhqbb21fp2j73sexs.png)
![Expanded Car 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0qk98m8tsvig4kxhmse.png)

#Event Planning
This application is one of many applications out there that are dipping their toes in the land of web components. Web components are still very new and ever-growing. While I have been developing on [HAX-the-Web](https://haxtheweb.org/), I am also the **Project Manager** for HAXCamp 2022. _< hax-camp >_ is an **unconference** dedicated to all things [Web Components!](https://open-wc.org/)This year's event is being student-run and we anticipate there being discussions about openwc, lit, performance, element composition, css, hax.psu, pedagogy, and design systems. If this work flow is something that you are interested in, I would encourage signing up for this event. It is much more than this, larger than you know and a way to connect with students, faculty, staff, and professional in the industry. 

![Banner ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixzkgultldeir4l4aky6.png)

#Teaser
Teaser
Want to learn more about **LitElement**, **VanillaJS**, and others? _Come learn with us!_
Interested in framework-agnostic components you can use in your existing **React**, **Angular**, **Vue**, **Backbone**, and **CMS Projects**? _It's all we're talking about!_
Have you made some cool web components and want to show them off? _Join us!_
Need to figure out tooling, building, SEO, polyfills, and other considerations? _Let's figure it out together!_
Do you want to learn more about web components from top to bottom? _Join us as we all discover together!_
Want to learn more about HAX, HAXcms, and all things HAXTheWeb? _Join us and find out!_

#Final Remarks
Attached below are the two flyers for the event. More information can be found on our website for [HAXCamp 2022](https://hax.camp/) and [Sign Up Here!](https://www.eventbrite.com/e/hax-camp-web-components-all-the-things-tickets-288109562457).

#Awesome One!
![Cool One](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtck0v98ouvfasdf5mh0.png)

#Professional One!
![Professional](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4nazyloqav4zei8vkn4.png)