Building a Site Pt. 2: Adding more pages...

    This week I worked on two more pages for the biotechnology website. I tackled the "Projects" page first. This particular page will incorporate two subpages, one will be for past projects, and the other for current projects. Originally I thought to add current and past projects to the same page. I experimented with utilizing collapsible groups in this regard, but the result looked clunky and would not allow for both media and text to be displayed. I created the landing page for "Projects" using container boxes that had room for media and text. There are two main containers on this page, one mentions current and the other past projects. Both have the same format and layout, however, to create a more dramatic effect I placed the image of each container on opposite sides of each other. The two sections on this page contain buttons that link to the subpages, and the nav bar also contains reference to them. With "Project" landing page done I moved onto the subpages for it. The two subpages have a very similar layout, the exception being the color scheme. Both alternate between red and black sections in the attempt to further distinguish each container. In addition, each container for the projects on both subpages contain an image carousel and a section to name the project members involved. The image carousels had settings to further customize the feature. I choose settings that would auto-start the transition of the images, set the speed to very slow, and would show captions and dots. With those tweaks the "Project" page and its subpages were complete. 

 

    The next page I worked on was the "Publications" page. I decided to use one section that I then divided into 3 containers. The two outside containers house details for the "Published Works" subpage and the "Posters" subpage. Both these containers have a button that navigates to these pages once clicked. In between these two containers is an image, which I used purposely to create a divide between the two other containers and to make the page more interesting. "Published Research" is a subpage of "Publications" and is meant to house research projects that have been published. I took a different approach with this page then others because I knew that it would contain a lot of text. Not wanting to overwhelm the user with a mountain of text, I made the details of each potential publication only accessible by clicking on a drop-down arrow. To add vibrancy, each publication has a photo that can show a graph/image/figure pertinent to the publication. It is meant to be used like a "featured photo." Another subpage of "Publications" is named "Posters." When developing this page I had to search the GCC library site for posters that the lab had created. I used 4 posters on this subpage that are divided into their own sections. Each section holds a picture of the poster and filler text meant to be the title of the poster. The images of the poster are small, and once more posters are added to this area, they will become smaller. In fact, depending on the final amount of posters to be added into the site, the heading hold the poster's title will more than likely be removed and placed into the caption of the poster image. Posters contain A LOT of information and with the image on the site being small there is no way for a user to read the information on the poster. To solve this problem I made both the poster image and title links that, once clicked, will open a separate window and display the full PDF version of the poster. Currently the links connect to a location connected with the GCC library site, this is definitely something that will have to be changed later on. If GCC changes the location of these files each link will produce a "404" warning. Ideally the links need to lead to a web address and/or location that does not change to avoid this type of issue.

  


    I made some small changes to the footer and nav menu this week as well. I moved the location of the logo from the center of the footer to the far left and made it smaller. I made this change after seeing how the site looked on a mobile device. Having the logo in the center made it look like the page ended and made getting to the shortcut links beneath it difficult. I also made the nav menu transparent and, when the page is scrolled, the background will be white. Also, i added a side bar that would appear next to the corresponding subpage a user is on. This was to improve user readability and navigation.
  


    Next week I will work on updating footer links to match the navigation menu. This will require new text links and a re-formatting of the existing container. I will also head back to the "Past" projects page to set the image carousel to a slower transition rate. This way it will match the same speed found on the "Current" project page. I will also recount the meeting I had with members of the lab to get feedback on the site thus far, adjustments that need to be made, and any other additions they might want on the site.

Comments

Post a Comment

Popular posts from this blog

Building a Site Pt. 3: Team feedback and tweaks

Image
       I presented my site to the team this week to get feedback on the site. We went over some general details, such as color scheme, layout, and site name, then moved onto discussing what features should be included on the site, additional pages to add, aim of the site, and items that still need work. The meeting was helpful in that we were able to define what the purpose of the site should be, which of course will effect what needs to be on the site (versus what we want on the site). I was also able to gain insight on the design details they liked and the details they did not. I enjoyed the critiques and suggestions because it mimics what I will face building sites for clients in the future. It highlighted the important balance between producing a site that a client is happy with, and, on my end, creating a site that serves the overarching goal of the site.       At the conclusion of the meeting I was able to make a list of the items I needed t...
Read more

Building a Site, Part 4: Adjusting the site

Image
       This week I shifted my focus back to the website. When I had a meeting with the some of the lab team there was discussion of creating a new logo and also modifying the site to better suit the lab's wants and needs. Having taken a stab on creating a logo last week and submitting my results, I can now move back to to the site. During the previous meeting with the lab team I was able to get a deeper understanding of what the site's purpose is. From my understanding the site is to be a sort-of biotechnology hub for GCC. Students can visit the site to learn more about what the biotechnology program at GCC can offer, what they can expect from the program, the curriculum for a degree in biotechnology and description of classes, and it will also allow students to see the projects their fellow peers are working on. The latter focus (i.e. student research projects) will serve a few purposes. For one it will let potential students see that biotechnology is not as far rea...
Read more

Creating a Webpage with Google Sites

Image
     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 e...
Read more