Overview
Throughout Lesson 2, I have learned about the complexity of grid design for website landing pages. This has allowed me to examine some of my favorite websites and look at them through a new lens. I feel that a lot websites I frequently visit such as e-commerce retail sites or public relations agencies utilize basic grid design for their landing page layout. Through my own design I tried to incorporate some interesting CSS elements to help emphasize my text material but also use adobe color themes to create an aesthetically appealing page. I wanted to use cool greens to draw the attention of my audience without being too vibrant and overly distracting. I believe using bright neon’s and bold contrasting colors sometimes takes away from the content of the landing page.
Successful Grid-Based Design
Ogilvy is one of the largest and most well know creative advertising agencies based in New York City. Their website is one of my favorite examples of grid-based design that first came to mind. On the Ogilvy landing page, it features five text boxes that contain images of recent work examples. As you scroll down you can see the web designer used various sizes of grid boxes to emphasize the importance of the content or to fit the image in a more appealing way.
I think this is one of the best uses of grids on a website and it also features a great hover text when putting your cursor over the box. Following that text, you can directly view the creative campaign from which the image was from to make for easier and more in-depth browsing. Visit Ogilvy here. 
E-Commerce Example
Another great example of a retail company that uses the classic grid based design to high light and sell their products is a makeup and skin care brand named Glossier. Their simplistic color scheme and grids display their products with an aesthetically appealing design and plays to the over arcing theme of the brand: simplicity. Glossier breaks away from traditional sites that traditionally show models with full faces of make up wearing the products on the site. Instead, Glossier tries to show that beauty comes from holder and instead of trying to cover up your flaws, you should be proud of scars or other imperfections and utilize their products to enhance your natural beauty. I feel that this theme is represented within the design of the website and breaks traditional e-commerce designs. Visit Glossier here.
Breaking the Grid
An example of a company that breaks the traditional grid based design of their landing page is Patagonia. The outerwear mogul recently changed the design of their traditional landing page to emphasize and broadcast their brand’s social impact and accountability campaign. The landing page features the brand’s mission stating “Environmental Justice is Racial Justice” and also has a button below to learn more. I think we will see this trend to continue in the future of landing pages and more companies will feature their brand’s initiatives. Visit their page here.
Websites that Missed the Mark: Grid Examples
One website that I think missed the mark when trying to execute a traditional grid design for their landing page is Lemonade, a new online insurance provider that targets the millennial generation. I feel this company tried to include too many features on their web page and didn’t include enough contrast that I just lose interest when looking at it. Also, the graphics featured on the site are a bit cartoon-ish when I think they should’ve went for a more professional theme. One area of the grid design at is less than appealing was when the designer put four grids of content with three on top and one on the bottom. The issue I found with this was the content was separated and broken up when I was trying to read about the different insurance options. I think that if the designer made the grids smaller, it could’ve fit all four boxes on the same column.
Another issue that I have with the website is that it features customer testimonials in the form of a tweet highlight bar that plays as a slide show as the second most important piece of information on the landing page. From my perspective of a potential insured, I would want to know who Lemonade insurance is and then what kind of insurance they provide and at what cost rather than what people are tweeting about. I think sliding text bar would’ve been less distracting if it was featured lower on the page. Visit Lemonade insurance here.
Overall, on the web there are many examples of good and bad landing pages that utilize a basic or more complex grid layout. I think in the future we will continue to see more video based landing pages as technology advances. I think companies will also use the landing page to show more so what their brand or company believes in and focus more on how their mission statement is displayed.