20 Website Designs: NMSU Research IT

Info
Statistics
Created: 01/17/13
Last Edited: 06/01/13
181
7
0
Description
20 websites in 1 year. NMSU Research IT.
  • Designs for 20 Different Websites for NMSU Research Departments
  • While working at NMSU Research IT as the Digital Media Designer, one of my responsibilities was to provide the design support for the websites that Research IT manages. In the course of 1 year I helped design 20 websites. I used Drupal and the custom NMSU template created by Research IT. The aim was to create a unified look that mirrored that of the main NMSU website. To the end that all the NMSU department sites not only followed the NMSU brand standards but also were cohesive and had matching navigation, content organization, and were aimed at the target audience. For all of these sites I worked with the corresponding department staff to achieve the customization they wanted and helped many of them edit, organize and upkeep the content while working with my department to make it happen on the technical end. I also created and Icon library and an Image Library that I used through the websites. I've included only a sampling of images of the sites here.
  • PSL: Physical Science Laboratory
  • AVPR: Associate Vice President of Research
  • Below is the website for the NMSU Associate Vice President of Research. I put together a slideshow of pictures on the homepage which included many pictures I took of the campus. I created the icons used under the slideshow and I created the sidebar of images. The sidebar was put into the Drupal template so it was across all the research websites. It has 2 images that link to 1) the annual research magazine and 2) the monthly research news publication (some of my print screens for the other sites were taken before these were added). Below that is a feed that pulls from the "Events" website that displays the next 3 research events that are coming up. I was responsible for creating the images for each event and managing the calendar on the Events website. I also helped organize the content and I interjected design elements where needed to help with the user experience and aesthetic unity.
  • I created image banners for the subpages to visually reiterate the subject of the content while preventing it from being an all-text page.
  • I was also the photographer for Research IT and all supported departments.
  • RCR: Responsible Conduct of Research
  • ORC: Office of Research Compliance
  • COI: Conflict of Interest
  • I added design elements to break up the text and visually reinforce what the text was saying.
    I created the overlapping circle graphic and broke up the content into sections with dividing lines and sub headers. The average reader will only ready 5-10 lines of text before they move on and skip the rest. Dividing the text in this way makes the content more manageable portions that the reader is not subconsciously intimidated by and is willing to start reading or skimming through.
     
  • I tried to get a photo that reflected the same subject matter of the content on that page, and if there wasn’t a fitting photo I used a photo of the NMSU campus.
  • Below are other image banner variations I created for COI. For most of them I used images that I took of the campus.
  • CURRL: Core University Research Resources Laboratory
  • CURRL is the big umbrella and under it are MICS, MMAS, and Genome Sequencing. The CURRL website acts as the navigation hub that directs visitors to the 3 other sites. This was visually shown by making the icon links for the 3 other sites be puzzle pieces that fit together (using the NMSU color pallet).I also worked with the department heads to organize, edit and upkeep the content.
  • Genome Sequencing
  • The Left is the redesign, the right is what it was before.
  • MICS: Microscopic Imaging Core Suite
  • I took photos of the research labs and used them for the homepage slideshow and I created an image catalogue of the different microscopes they had for the subpages that described the lab equipment.
  • More of my photography used to break up the almost all-text subpages. These are photos of the building where the labs are housed.
  • MMAS: Molb Molecular Analysis Services
    (molb = molecular biology)
    *I did not devise the acronyms.
  • MOLB: Molecular Biology
  • Research Events Page
  • This page shows all the upcoming research events, houses the icon library, and has a page of information about image copyright rules (pertinent to webmasters customizing their NMSU Drupal template).
  • I created this map to show how all the research departments connect. It is on the homepage of the events site so if visitors want to know how a certain department that is hosting an event is connected in the research web, here is their answer. It also gives the long names for all the acronyms but to prevent it from being text heavy they are integrated into the background design.
  • When a visitor clicks on the thumbnail of the event (in the RSS feed in the left sidebar of every research website) it will take them to the description of the event.
  • the calendar of events
  • The icon library I created with over 150 icons designed with the NMSU color pallet and available for NMSU Research Depts. to use on their websites.
  • A sampling of some of the icons.
  • Lastly, I wrote a page about everything concerning copyright. This way any employee customizing the NMSU Drupal Template will be aware that they cannot put copyrighted images, graphics, etc. on their site. I also provided a list of sites where copyright free images can be obtained.
  • The Custom NMSU Drupal Template
    Created by NMSU Research IT
  • This is what a website looks like to begin with. If a research dept. has their own webmaster or employee who is going to take care of the website, this is the template they get to start customizing and adding content to. As of yet there has not been a webmaster for any of the research departments we have created websites for, therefore myself and one of my coworkers were the main webmasters for all of them and were responsible for their upkeep.
  • Thanks for looking!

Discuss This Project: ( Comments)

You must to join the conversation.