Constrained Redesign — Google Drive
Challenge: Redesign one page of Google Drive using only elements that can be affected by CSS (ie. size, color, position)
Process: The Breakdown
I began this design challenge by marking up the page I was given and sorting each element into groups.

From there, I identified a set of design decisions I wanted to address:
- Use Google brand colors to make the separation of sections easier to see
- Grouping like elements and outline blocks using Gestalt Principles
- Keeping the size of primary elements consistent
- Making the “NEW” action button larger and more prominent on the page since it’s a main tool
I then started sketching to get a sense of the layout:


As you can see, I started off a bit wild with adding features like a drag-and-drop bin before I went back to the brief and remind myself that I could only change the CSS styling elements.
Once I had a good sense of possible arrangements, I began looking at which CSS elements I could change.
I noticed that the “My Drive” content (highlighted in green on the breakdown page) was shown in three separate places. Since there was nothing to tell the user that they belonged together, I decided to put these elements together and off to the left. This can be done with simple column elements in CSS:

One of the largest design elements I wanted to address was the lack of color. Google’s design of white and light grey is very clean but it’s difficult to tell which elements belong to which section of the page. In addition to that, when the mouse hovers over an element, it turns yet another shade of grey! Google uses these shades to denote groupings by using white as a bounding box but only for the header, “Quick Access”, “My Drive” and “All File” elements while leaving all the others in the grey.
User navigation and location can also be improved in this design. For example, the “Activity” section under “My Drive” has blue text and a blue underline. It’s a subtle way to tell the user “Hey, you are here” but where is “here”??? If you look closely, it is under the information icon which is, yes, a light shade of grey!
I used Google’s primary color of blue (#4285F4) to show groupings of similar elements and to also help the user navigate the page so they never have to wonder where they are. To change the color of the column and text in CSS, I used the background-color and color elements:

To keep with the consistency of the Google brand, I followed the design guidelines posted on Behance, used the “General Sticker Sheet V.05”, along with icons made by Freepik and Google from www.flaticon.com.
Next, I wanted to address the prominence of the “Quick Access” folders. As someone who uses Google Drive regularly, I find this feature very helpful. I increased the size using the height and width elements in CSS:

Something else that needed more prominence was the “New” button. Because of how often this button is used, I made it larger and put it directly above the “Quick Access” section and inline with the search bar to save space. I also rounded the corners so that it would indicate to people that this was a button using border-radius:

With the color and main elements situated on the page, I increased the size of the text and contents beneath the “Quick Access” section and reduced the empty space between “Name”, “Owner”, “Last Modified”, and “File Size” that was seen in the original screen capture. This was done using the font-size and color elements. I then added a slight grey background (background-color: #f2f2f2;) around these elements to show that they are all part of the same group per the Gestalt Principle of common region.

Reflection
This challenge made me realize certain things about myself as a designer. The first is that I need to make sure I read the brief carefully. My first sketches show some wild ideas along with removing several elements I thought were cluttering the page. When I realized that I could only manipulate CSS styling elements, I had to start over but it was a lesson well learned! After I chunked up the existing elements on the page into groups and began to think about how I could organize and move them about the page, I felt like I had a more stable approach. This made the rest of the work very manageable as I quickly began to see which elements would benefit from increasing the size and which I could make more prominent with color. I used Adobe Illustrator as my tool of choice because of its simplicity with shapes and text. One thing I wanted to make sure of was that I followed the Google style guidelines so I pulled up documentation online and used that as a reference. After blocking out the main elements of the page, I experimented with moving blocks of content around the page to see what fit. I took pieces of my sketches and put together an outline that worked then added the details last.
