Sketches for Yoga in the City

Here are some layout sketches I came up with, so that a user can quickly see a schedule. I also was trying to think about how this would look on a phone. So I went with the vertical layout, versus a grid-like calendar.

Here’s the wireframe html/css. Pretty simplistic.

cc: @kylefiedler

1 Like

I like the idea of going vertical so it’s easy to scroll through quickly on a phone. Seems like there might be some good opportunities to play with the responsiveness of the typography so that it is larger when viewed on a mobile device and the info for each day is super clear, easy to see and readable without pinching and zooming.

@Li_Ouyang This is a great start. I like the sketches and I like the initial direction. Do you have a nice photo for that space? I would work more on the typography for each session on each day. Right now they look really bland. I’m assuming the goal for this site is to get people to these sessions so they need to clearly communicate what and when. Right now they aren’t doing that.

@kylefiedler finally got a picture for the background image! You can check it out here Design for Developers starter

This was originally an instagram picture, and i stitched some more mountains and water to the left. Now I can go back to focusing on web design.

@Li_Ouyang thats an awesome photo. While you are designing around the photo keep in mind that the person (I’m assuming you?) is part of the foreground and needs to align to your grid the other parts of the photo act as a background and can be ignored. That is going to be tricky to do (though if you can pull it off I think it will look great) and keep it responsive (don’t know if that was a goal). One more thing to keep in mind is the readability of your type as you continue to design. Sometimes it can be tricky to do.

@kylefiedler yes, i agree that getting the background image to align while being responsive is going to be touch. I updated it here if you want to take a look. It’s optimized for a laptop screen, but should be semi-fine for mobile as well. It looks like I’m going to have to use different versions of the image on diff screens. Will also have to figure out how to have a background-image as fixed on iOS.

I threw in some filler text for the future class details, that show up when you click on the class list item. Haven’t decided on the typography of that. Any thoughts on the typography of the basic outline structure, i.e. “Monday Feb 10, 7:30 Mimi Jivamukti”?

@Li_Ouyang For the background I would try to have it always fill up the screen. Some assortment of background-size: cover; and min-hight: 100vh; or another way to make the background image fit. It’s fairly hart to read any large body of text with the small type, text-shadow and opaque black background. I think the typeface for titles is working well but I’m not sure the body typeface makes sense. Monospace typefaces have a technology / code connotation which (in my experience) Yoga is not.

Try using a dark brown instead of black for the opaque background. Since real black isn’t found in nature it really contrasts against your photo.

One usability thing: make sure that anything that is clickable has the link pointer otherwise people won’t understand that they can.

Are you using any css frameworks for this, like bourbon or bootstrap for the mobile layouts and stuff?

yup, I’m using bourbon and neat actually.

Sweet I have been using those recently, along with bitters and refills, they make my life so much easier, keep up the good work ^^