MAN AND SOME.


To some extent, I like to be groomed. 

I like looking "put together."

Obviously, there are those that are more put together than me, and some trying to be more put together.

Recently, I designed this website—at least the beginnings of it—MAN AND SOME. It was for the recent class I took at the School of Visual Concepts: HTML & CSS - Level 2. The first assignment was to build a 3-5 page website and all other assignments were to expand that website. I could've used Pocket Shots from Level 1, but I thought that would be a cop out and I wanted to try something new and challenge myself.

The concept behind the website is to help men on their journey in becoming well-groomed gentlemen. Each page of the website compares and contrasts 3 individuals. These individuals—my friends—each have unique qualities. Long hair with a clean shave, classic hair with casual beard, and a styled haircut with a big beard. 

mas-pad-guide.png

Additionally, each page features a buyer's guide with items that help a man's features—all of which I own and use.

The Hair Buyer's Guide contains items like shampoo, pomades, soap, and combs.

The Face Buyer's Guide contains items like beard oil, beard balm, lip balm, and soap.

Each item's description linked directly to the product's website for the user to buy the product themselves.

Style has more emphasis on the 3 individuals and their personal style. During the 5-week class, I was unable to obtain the right resources to make an in-depth style guide. The intent was to feature articles of clothing including tops, bottom, outerwear, accessories, and pieces of flair.

 

In terms of the coding, the website is responsive. As I tried to illustrate with these screenshots, the website reacts to the device you—the user—are viewing it on.  

As I said, the website is not complete and can go in different directions—even different layouts. In one direction, I would love for it to be an information hub for gentlemen. A one-stop for products and guides—maybe featuring a store. A place where you can find reviews of different products. At the same time I would love for it to be a blog of sorts featuring different men and telling their stories and their style tips.

The story behind the name came from two things. First off, if you say MAN AND SOME, it sounds like, "man handsome" or "mansome." Essentially the website is to help men make strides towards being handsome and groomed. Secondly, the features that I talk about—hair, face, style—don't make the man, but add to it. We are who we are, and the hair, face, and style have the ability to compliment. A man and some hair/face/style.

All the photographs featured on the site were taken by myself—at different times and in different conditions (natural lighting). All the photographs were taken with either an iPhone or an iPad.

Like Pocket Shots, MAN AND SOME is not hosted anywhere. The screenshots above were taken while my instructor was still hosting our assignments to check that they work and review in class. I consider this website an ongoing project with hopes to launch the website in the future. 

Pocket Shots.

Last Summer, I took HTML & CSS - Level 1 at the School of Visual Concepts.

Pocket Shots is the project website I worked on during the quarter. 

The task was to create, design, and develop a 3-5 page website throughout the course by executing the concepts of the class.  

My idea was to make a website that compares and contrasts Point & Shoot film cameras. The name was derived from the simple fact that you could take great "shots" from cameras that fit in your "pocket."

Each page of the website shows a camera, some information of that camera, and sample photographs from that camera. 

For the project I chose the Olympus Stylus Epic, Olympus XA, Yashica T4 & T4 Zoom, and Contax T2.

I wanted to keep the website simple and have more emphasis on the images.

It looks similar to the layout of this website (www.markbanaag.com) because I wanted to see if I could recreate the layout. Although this website is more complex since it is a customized Squarespace template (secret's out) , it is important to me that I am able to understand to some extent the coding of my website. 

There are plenty of things to do if I were to continue the project website, however I am happy to have more experience with HTML and CSS.

My previous experience was in the strictly HTML days through Angelfire and Geocities. All layout and content was all on one coded page. 

If I find a way to host Pocket Shots and the website I'm currently working on in HTML & CSS - Level 2so that you can experience the website by means of this website, I will. 

The images are fullscreen screenshots of the pages from the project website. 

All the images within the screenshots are my images that were taken with the respective cameras. The images of the cameras were taken with an iPhone 4S.