Creating a Webpage with Google Sites

    I took a detour this week from my previous journey regarding creating desktop application. I was asked by the biology lab to attempt to create a webpage for the ongoings of the class. I was given the general idea of the site. The site was to provide information on the research being conducted in the lab, publications, posters, students (past and present). The chosen color palette was to be the classic GCC colors (red, black, and white). Further constraints of the project indicated that the site must be created using Google Sites. 

    I have never worked with Google Sites to create a website, so I completed some research prior to getting started in order to find out what were its capabilities as a web developer tool and possible limitations. From my research I found that Google Sites first emerged in 2008 and introduced a way for user to create a website that did not require the use or knowledge of CSS or HTML The web development tool offers an easy to use drag-drop method to create a web page full of content blocks, headers, table of contents and more. You can best liken this product to something like Wix, but a much more simplified version of it. Even though the features are simplistic, you are still able to create a professional looking site. 

    As I began to start the new site, I had the option of choosing a predefined theme for my project. There were options for photo portfolios, projects, events, and even one for weddings. I went with the template for a class. The original layout was basic enough to allow for creative input. I then had to choose a theme, which would define my site colors, fonts, and basic design features. Wanting more control over the design aspects of the site, I decided to create a custom theme. I first named my custom theme, and had options to add a logo and a banner image. I held off on the logo as I had not created one yet, but I added a banner image by selecting a Google image from a search. Adding an image in such a way was quite efficient, given that the "Select" image opened an in-window pop-up where I could both search and select an image from the web. After picking a banner image I had to specify theme colors, either from preset options or custom colors. I choose to create a custom color palette to match GCC colors (red, black, and white). The last choice I had to make in the "Create a theme" window was to select a font style, to which I choose Verdana. I chose this style because it scores highly in readability in general, but this is especially true on mobile devices. 

    With the theme completed, I moved on to creating a logo. I used Adobe Express to make the logo. I wanted the logo to represent science and biology, and to be simple enough to be a favicon. I landed on choosing a microscope, which I layered twice to create a shadow effect, and a shape of a bacteria in a petri dish. I also decided on adding some text next to the microscope to add more depth. The favicon was essentially the same, it just excludes the text.

    In order finish up the header I ended up creating another image in Adobe Express because I could not get the look I was after using the text options in Google Sites. The image basically became the header title. I used the GCC colors, and made sure to font shadows to make the title more readable and stand out. The image was going to be transparent, so the shadows were crucial. 

    With the header finished, I moved on to making the navigation menu by creating pages. Finally, I could start on the footer. The footer still needs to be tweaked, but it has space for contact information, repeats the pages (with links to them), and in the center is the logo.

     The basics were done, so I then created a home page. The home page is divided into three sections. The welcome section gives a greeting and displays a blip about what the class is about, followed by generic photos. The blip uses filler text, or lorem ipsum, that will be incorporated once I am given the content for this area. The next section displays photos and links to two other pages on the site (projects and media). There is brief description of where the links lead to, but this needs to be tweaked and written better. The last section on the home page is just a photo and filler text. This section is more of a placeholder in case something else is to be added.

    My next task was to make an "About Us" page. The header for this page was more stright forward than the homepage. I selected a background image as previous, and this time I just added a title using the Text Box insert. After making the heading, I used predefined content blocks to create the sections for each potential faculty and staff member that may be added to the site. I used more filler text and stock images to create placeholders for future bio blips and profile pictures. 

    Using Google Sites is a different experience, I still do prefer the customization abilities of WordPress, but I can see the appeal of creating a more simplified version of a site. I normal take a lot longer to create a home page, but this is because of how much control I have over the final look. But with Google Sites, the lack of options makes this process a lot faster, and yet still delivers a clean look. Next week I move on to creating the project page that will house past and current projects. With time permitting, I will also create a students page that will show past and current students. Until next week!