Made with  | Mehul Shah.

mehul1995@gmail.com | Seattle, WA

Photography Mobile Website

MEHUL SNAPS

Programming and Tools:

HTML, CSS, Javascript, Jquery, Wordpress, Photoshop

Timeline:

5  Weeks

Mehul Snaps is a personal project that aims to showcase Photography done by iPhone on the website. I worked on developing this mobile-friendly website in my spare time after work to learn more about mobile web design,  responsive web development and mobile photography. Although the website is only mobile friendly, and still under development for desktop use, I believe the challenges I faced while working on a WordPress plugin gives me valuable insights into the perspective of development.

Learning about more web designing, I began more inclined towards the process of designing before actual development. Through this project, I learned more about wireframing and high fidelity mockups. At the very beginning, I did not have the required tools to get my hands on the design phase. Eventually, I started exploring ways to replicate web designs on a scratch paper and started producing my own designs. 

1/1
Wireframing
  • During the initial stages of web development, when I learned to start paper wireframing. I had kept in mind on the pain points of already existing photography websites to establish a unique way to display photographs with the way of infinite scrolling on the featured albums.

  • Over sketching, I learned that the main intention was to showcase the photos, in a way to take up maximum space on the screen.

  • While wireframing I found there was a need to have a simple approach to the hamburger menu, which slides down to display more options. On the other hand, I figured that a traditional approach to have hamburger menu slide over the contents would affect the smooth flow and obstruct the displayed picture.

High Fidelity Mockup
  • Finally, while taking feedback from my friends and family. I began producing high-end mockups to reflect on the learning and understandings from paper wireframe.

  • I began applying primary and gradient colors to designs to produce an embossing effect when displaying photos.

  • Applying minor accents to the selected options on the menu allowed a better use case.

Font Family
Lato Regular

Characters

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

Lato Bold

Characters

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

About

 

 

Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-source Open Font License by his foundry tyPoland, with sup­port from Google.

Color Code
Primary Colors Used
#FFFFFF
#000000
#999999
#FF3A91
Gradient Colors Used
#FC4A1A
#F7B733
#FF00CC
#333399
  • iconfinder_Medium_3721675
  • iconfinder_square-linkedin_317725
  • iconfinder_stackoverflow_1220346
  • iconfinder_behance_313494
  • Instagram
  • Twitter
  • codepen