A mock up of a new co-working space coming to the Portland area. This project uses best practices such as planning with user stories, sketching layouts, wireframing layouts, prototyping, and mobile-first development.
This project is mock-up of a fictional co-working space that's coming to the Portland area. The project includes user stories, research, mock-ups in Sketch, prototyping in Sketch, and fully functioning website.
To use this download and use this project, make sure you have Node Package Manager (npm) installed on your machine. From there, enter the following commands in terminal from the Desktop directory:
git clone https://github.com/bjrshea/co-working.git
cd "your project name"
npm install
npm run start
After running these commands, you be able to make changes to the project and see those changes in the local server.
In order to get a feel for the market and the types of companies that are offering co-working spaces, I reviewed the following websites for information and inspiration:
After reading through and reviewing those resources, I decided that my landing page should be more of a digital experience. I want the user to feel something when they open up the website. I want them to see themselves at this space and creating work that is meaningful to them._
Once I had a feel for the layouts, I began sketching up a very rough draft on what my site will look like on both mobile and web:
I used Sketch on this project to wireframe the different viewports a user will use with this application. First off, let's take a look at the mobile viewport:
Second, let's take a look at the desktop viewport:
As you'll see, the mobile viewport condenses into a smaller version of the desktop viewport. The only real change is that the header will turn into a hamburger icon when the user is viewing the website from a mobile device or shrinks their viewport manually.
Sketch also served as a great tool for prototyping. If you're not familiar, prototyping is a way to demonstrate how your wireframes will function once they're coded and built. Here are some screenshots to show off some of the functionality:
