the gallery landing page

gallery landing page

The Main Points.


Goal

The goal for this project was to design a landing page from scratch, and then code the design into a responsive web page using the user stories on FreeCodeCamp’s project requirements as guidelines.

As the designer and developer of this landing page, my personal goal was to create a brand identity, describe the company, and highlight the subscription service for an online photo printer called The Gallery.

Outcome

The goals of the project were twofold, and it accomplishes both.

At a higher level, the project goal was to fully answer all of the user stories listed in the freeCodeCamp project description. I referred to these throughout the project, just as I would if I was working with real user stories.

When I uploaded the project to CodePen and connected the freeCodeCamp test to find any errors, the project passed all of the tests.

On a lower level, I had a personal goal for the project: to create a landing page design I felt accurately represented the personality of the photo printing company and solved the problem of connecting the proper audience to The Gallery’s services. By thinking through the design problem at length before actually starting to design a page and by going through the process of creating wireframes and design iterations, I was able to better think through my design decisions.

The end design accurately creates a visual representation of the company’s brand and answers its goal to get people to sign up for their service.

Were this a real product, I would put it to the test. Prior to coding the design, I would have implemented moderated user testing with the prototype. After any changes were made and the page was live, I would implement A/B testing with a couple of variations, changing the look or location of the sign up options to see which receives more hits.

Features

Custom icons & background

CSS flexbox

Hamburger menu navigation on mobile

Email address validation

Fixed background

Embedded YouTube video


Skills Used

Responsive Web Design

Web Development: HTML5, CSS3, JavaScript

Concept Development

Digital Design (Adobe XD)

Wireframing (Adobe XD)

Typography


The Details.

Process

First, I decided on a concept for the project: an online company providing photo storage, organization, and printing services to a target audience of couples and families.

I started by thinking about what a company with solely an online presence would need on their website to attract customers. I also considered which demographic would be served and what the company’s brand personality should be. I wanted to balance the vibrancy of the product with a sense of professional that would attract the target audience.

I chose bright colors and a playful header font to create an energetic feel. I wanted the color palette to mirror the excitement of reliving special moments when reviewing photos. The colors needed to be fun, but also approachable. Thinking about who would use the service, I decided families and couples would be the target audience.

Fonts Used

Dancing Script: This is a playful, approachable script font. Because it has a big personality I used it sparingly, just for the main heading and once more to highlight the main pricing plan. Dancing Script has the feel of movement and excitement that matches the mood the brand should convey.

Lato: Lato is a great offset to Dancing Script with its familiar, straightforward feel. With an audience of families and couples, this is a great font to add a sense of ease and familiarity. In addition, it’s very easy to read as a body text. Simply changing the weight of Lato to 300 for headings visually sets it apart to better create a sense of hierarchy, induces a more polished and sleek feel, and still matches it’s 400 weight body text counterpart.

Color Palette

project color palette

I chose bright theme colors to convey a fun and exciting mood, but toned it down with a dark background in the header and footer. The dark background tempers the bright colors and creates a sense of stability and professionalism. The brand uses a complementary color scheme to create contrast and an energetic mood.

Next, I brainstormed page sections and elements that should be included. There were several things that I knew would be needed:

  • The navigation bar at the top of the page and a footer at the bottom
  • A place to sign up for the service highlighted at the top of the page
  • A section describing the service
  • A section breaking down the service plans and prices
  • An engaging video to showcase the services provided

With these sections in mind, I created some rough wireframes for the page layout.

After going through several design iterations, I landed on the idea to overlay the main page information over a photo collage. I created the photo collage in Adobe XD and placed a transparent background over it so as not to distract from the foreground. The photos in the background help establish rapport with the target audience by showing photos of other families and couples. In addition, I created icons in Adobe XD to add visual interest to the first section describing the services offered.

While designing the landing page in Adobe XD, I ensured consistency in font sizing, heading hierarchy, and color usage. Keeping these details consistent creates a cohesive design from the beginning stages and makes future updates less time consuming. Also, when I coded it, I did not have to guess these details.

After initially coding the project (HTML5 & CSS3), I posted it for feedback on the freeCodeCamp forum where I got a lot of great recommendations and questions. During this testing process, I continued making changes to the landing page based on feedback from people reviewing the page. Then I requested further feedback. This process continued for a couple of days until I felt that the result accurately satisfied the project goals.

Challenges

Font Weight Aesthetics vs. Accessibility

In the original design, I wanted links in Lato to be a thin font weight to offset the heaviness of Dancing Script. What I hadn’t considered was that while I am designing, I typically turn up my computer brightness to 75% or higher. Also, I have good vision. These two factors influenced my perception of the design’s contrast and readability.

When I posted the webpage for others to test out, several people mentioned the font weight of the navigation and footer text being too small or too thin to read. These comments and further testing in mobile browsers led me to change the font weight of the links from 300 to 400 (normal). The navigation links are now easier to read and stand out more clearly against the dark background of the navigation area. I left the copyright in the 300 font weight as it’s typically added in smaller text and isn’t meant to be read at any length.

I learned a couple of lessons from this experience. The first was to pay attention to my testers’ concerns, even when I think the solution isn’t quite what I’m looking for aesthetically. The second lesson was to try to create less than perfect conditions when I’m testing the design and see if the current design decisions hold up. Had I tested the design on my phone with my usual 50% backlighting (or less), I would have seen that the text was difficult to read.

Submit Button Styling Overrides

Another challenge I came across was that the submit button (which is technically an <input> element, not a <button>) did not appear as styled on mobile or tablet devices. I tested across browsers on desktop (Chrome, Firefox and Safari), including device mode testing in the Chrome DevTools. All of the versions showed the submit button styled correctly. It wasn’t until I merged my working branch to master on GitHub and actually viewed the page live on mobile that I noticed the submit button was not styled correctly.

After much Googling and reading I came across a thread on Stack Overflow where someone else had the exact problem I was having. The solution is simply adding this code to the CSS:


input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

I first added the webkit line to see what would happen; it only solved the problem on Chrome’s mobile browser. Once I added all three lines to the CSS—problem solved.

This isn’t an issue I’ve come across before, but I know I’ll definitely see it again. I learned that, while using the Chrome DevTools is very helpful, it’s not a perfect replica of what you will see on different devices. Next time, I’ll consult the actual devices sooner to weed out any specifics in the OS that might affect how the design is rendered. I’ve also learned to expect to fix bugs after things go live.