Anabel Damstrom
Google Sites Project.
The Beauty of Sussex Gallery page (desktop)
The Beauty of Sussex Homepage and Gallery page (mobile)
Design Process
Defining Project Requirements
After defining my project requirements and handing in my proposal for the website design project, I learned from Professor Ronkowitz that my design idea would not work visually and would not be a good idea to move forward with it. Therefore, I reflected and thought about how I could still display my minimalist/modernist approach to design and bring in some visually appealing to the audience.
After much thought, I decided on creating a website that displayed the beauty of the County I live in. What I found about this topic to be interesting was that it could grow into a visual diary that could capture the County as I discovered and learned more about it.
Doing Background Research & Solutions
The topic
I started off by going through, choosing, and collecting existing photographs that I had take throughout the short time that I have been living in Sussex County.
After, I decided to do a quick background research on Sussex County; at which time I learned that the town I live in, Vernon, is the largest both in population and area. The county is relatively rural and forested, which is why I find so much beauty in it.
More so, I learned that Sussex County consists of 24 major towns and I have only discovered 3 within 1 year of living here. This fact alone, allowed for me to determine that it would be a long-term project/hobby that I would like to undertake.
The website
I have never used Google Sites. Because of this, I determined that I needed to learn more about the site and how to use it.
I quickly learned that there was a cap on the number of images I would be able to upload to the site (see Figure 1).
Figure 1: Upload Image Error
This presented a potential problem being that the site would consist of many images. To solve the problem, I decided to upload all my images to my Facebook account and upload them to my Google Sites through the URL upload. This was a quick and easy fix to the problem.
Design, Development and Implementation
Name & Logo Development of site
I decided to create a website that would help capture my perspective in simplicity and beauty. This project became more than just an assignment. It became a way to display my personal design style and a vehicle to escape all the demands of life. I knew I wanted to illustrate a minimalist/modernist style so I began by creating a minimalist logo. After some research on how to best capture this, I created a logo using Adobe Illustrator. I created the logo in three different sizes (see figure 2-4) and tested each size on the website and chose the one that best fit the site.
Figure 2: Beauty of Sussex Logo 200 x 200
Figure 3: Beauty of Sussex Logo 150 x 150
Figure 4: Beauty of Sussex Logo 100 x 100
I chose to design a black and white logo with a sans-serif “movie letters” font (see figure 5). I felt this font gave the logo the modern simplistic look I was trying to capture.
Figure 5: "Movie Letters" Typography
Website development
To begin the Google website design and development, I used lucidchart.com to create wireframes for the design. The first design of the “homepage,” (see figure 6) I found not to work for the website because I also wanted to create a “Gallery” page making the elements repetitive between the pages.
Figure 6: First Wireframe Design for Homepage
Therefore, I redesigned the wireframes to repurpose the homepage. At the same time, I changed the overall layout of the homepage (see figure 7).
Figure 7: Wireframe Design for Homepage
Having a wireframe allowed me to remain focused and work through any problems that I might encounter. It pushed me to learn how to manipulate the site to do what I wanted it to do. I was able to take advantage of all that Google site has to offer its clients to create a functional and well-designed site (see figure 8).
Figure 8: The Beauty of Sussex homepage
Once I designed the wireframes, l was able to begin to implement the design onto the Google sites website. I began by choosing a blank template with a simple theme (see figure 9).
Figure 9: Implementing template and theme for site
Tools used
-
Lucidchart.com to create the website wireframes
-
Google sites to create the website
-
Adobe Illustrator to create website logo
-
iPhone 5 camera to take pictures for the website
-
Facebook to upload pictures to Google sites
Elements, Principles and Requirements of the form
When considering the elements, principles and requirements for this project not only did I focus on the functionality of the site, but I also took careful consideration of the modernist/minimalist design style principles and requirements.
Color palette:
A black, white and grey color palette was used to help create a modern/minimalist classic feel to the site. At the same time this color palette choice allows the audience to focus on the visual content of the website without distraction.
Typography:
Open Sans
I chose to use the sans-serif typeface “Open Sans,” which was developed by Steve Matteson and is used by Google. It is a friendly open font that is used for legibility across print, web and mobile interfaces. It is a popular font used in modern designs (see figure 10). (Wikipedia Contributors)
Figure 10: Open Sans Typography
Verdana
Verdana was used for the text next to the website logo for emphasis. Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Thomas Rickner, then at Monotype. Verdana was designed to be readable at small sizes on a computer screen. (see figure 11) (Wikipedia Contributors)
Figure 11: Verdana Typography
Movie Letters
Was used for the website logo. Movie Letters was designed by Bou Fonts (see figure 5).
Shapes & Lines:
Shapes and lines are used throughout the website to define the elements within the page, define division between elements and facilitate eye direction.
Space/Hierarchy
Space and hierarchy were used to help reduce noise, increase readability and action. A good example of this Principle is seen in the contact page. The use of space helps direct the user through the different elements within the page and drives them to take action (see figure 12).
Figure 12: Beauty of Sussex County Space and Hierarchy example
Hierarchy/Dominance
Hierarchy and Dominance were used throughout the site to emphasize different elements, including, navigation and page introduction/title/image.
References:
Wikipedia contributors. "Open Sans." Wikipedia, The Free Encyclopedia. Wikipedia, The Free Encyclopedia, 8 Jan. 2015. Web. 18 Jan. 2015.
Wikipedia contributors. "Verdana." Wikipedia, The Free Encyclopedia. Wikipedia, The Free Encyclopedia, 26 Aug. 2014. Web. 18 Jan. 2015.