Raul Alcantar is a professional photographer who has shot and filmed an enormous amount of distinctive events.

My responsibility for this project was to design and code—HTML5 and CSS3—a responsive photography website template. I also took the liberty of revamping the original JPEG logo by making it bolder, fancier, and in vector format.


Raul Alcantar Landing & Header screen example

This template was designed to be absolutely minimal and simple...

With the goal of intriguing the viewer, for the landing screen's background I used a large high-quality photograph. I designed the contact information to be the focal point by using the brand's most vivid color as the div's background-color.


Raul Alcantar About screen example

To keep the site's simplicity, for the About section I decided to design it with a brief introductory paragraph and only one image. The image is a photo of the photographer.

The idea for having only one photo and the About text having a limited amount of characters was influenced by many social media platforms, but especially Twitter.


Raul Alcantar Gallery screen example

Since the Gallery is the main focus of the site, I decided to design it to be large and full-width. The individual squared images show portions of an even larger image. When the user taps on one of the squared images, an image gallery pops open to display the entire image. From the image gallery, the visitor has full control of scrolling through rest of the images.


Raul Alcantar Contact and Footer screen example

These sections were designed to look basic and common to make it easy for the visitor to get in contact with the photographer.

Integrating Google maps will give the visitor a visual representation of the photographer's business location. This way, the visitor can instantly determine if the photograhper would be and ideal hire based on location.

Twitter, Email, and Phone information are hyperlinks. If the visitor taps/clicks on Twitter, they will be taken to the Twitter site or Twitter app depending on what device they are on. If the visitor taps/clicks on Email, the local mailing engine will open. If the visitor taps/clicks on Phone, they will be asked if they would like to call the photographer.

All social media icons are hyperlinks as well.


Raul Alcantar full view examples