20 Website Designs: NMSU Research IT

  • Web Design for 20 NMSU Research Sites
  • Over the course of one year working at NMSU Research IT as the Digital Media Designer, I helped design 20 research dept. websites plus a web application. I used the custom NMSU Drupal template created by Research IT.

    The aims were to:
    - Match the main NMSU website and follow NMSU brand standards.
    - Create a unified look for all the sites (matching navigation, similar content organization, and properly aimed at the target audience).
  • I worked with the corresponding department staff to achieve the customization they wanted and helped them edit, organize and upkeep their sites. I also created and icon library and an image library (of NMSU photography I took) which all the websites utilized.
  • This graphic illustrates how all the research departments connect. It's displayed on the Research Events website allowing visitors looking at the calendar of events to see how the hosting departments connect. Since it's hard to remember acronym definitions, I included the spelled out department names on the graphic, however, to prevent it from being text-heavy I integrated them into the design of the background.
  • NMSU Drupal Template
    Left: out-of-the-box  |  Right: customized
  • - The homepage slideshows include photography I took around campus, in the research labs, or photo graphics I created.
    - The sidebar displays a feed of upcoming events pulled from the Research Events website. I was responsible for creating the images for each event and managing the events calendar.
    - I helped organize the content and interjected design elements to break up the text and provide some information visually vs. all textually.
  • NMSU Research
    After a couple years of using the above template, in early 2013 we proposed several refreshed designs for the NMSU Drupal template. Below is the design leadership chose. 
  • The below screenshots are a sampling of the sites I worked on from 2012-2013
  • PSL: Physical Science Laboratory
  • AVPR: Associate Vice President of Research
    Homepage
  • The two images in the sidebar link to 1) the annual research magazine and 2) the monthly research news publication.
  • Interior Page

  • Homepage on Tablet
  • RCR: Responsible Conduct of Research
  • ORC: Office of Research Compliance
  • COI: Conflict of Interest
  • The average website visitor will only read 5-10 lines of text before skipping the rest. I added design elements to break up the text and visually reinforce the content. Walls of text subconsciously intimidate readers, but if the text is broken into sections readers are more likely to start skimming and then reading.
  • CURRL: Core University Research Resources Laboratory
  • CURRL consists of three departments: MICS, MMAS, and Genome Sequencing. The CURRL website acts as the navigation hub to direct visitors to the other three sites. This was visually shown by making the links to the other sites as puzzle piece icons. I also worked with the department heads to organize, edit and upkeep the content.
  • Genome Sequencing
  • MICS: Microscopic Imaging Core Suite
  • I took photos of the research labs for the home page slideshow. I also created an image catalog of their various microscopes for the Lab Equipment page.
  • MMAS: Molb Molecular Analysis Services
    (molb = molecular biology)
  • MOLB: Molecular Biology
  • Research Events
  • This site shows the upcoming research events, houses the icon library, and explains copyright rules (pertinent to webmasters customizing their NMSU Drupal template).
  • When a visitor clicks an event thumbnail (in the RSS feed in the left sidebar of every research website) it takes them to this site with the event description.
  • The icon library I created has over 150 icons, designed with the NMSU color pallet, and is available for all the research departments to use on their sites.
  • Lastly, I wrote a page about everything concerning copyright. 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.
  • MAESTRO: Web Application
    Online Review System for Research Applications
    Design for: logo, website, application UI, process infographics, and support material
  • The application logo uses two of the secondary colors from the NMSU branding color pallet; this allows the application to tie to the NMSU brand style but is somewhat independent and conveys a southwestern feel. I created the logo to represent the meaning of the word Maestro (with the conductor) and to reflect the function of the application by incorporating squares to represent stylized documents being conducted by the system (Maestro).
  • MAESTRO Help Site
  • This site provides support content for the application and is the portal to the open the application.
  • Variations for the home page graphic; designed to reflect the Maestro brand, the nature of the application, its functions, and the target audience.
  • Photography
    I was also the photographer for the research websites. The photos were used on the home page slideshows, interior pages to break up the text, and as page title banners.
  • Page Banner Photography