JILA NIST-CU website redesign/overhaul to Drupal

[FRONT Page Design template]

[ARTICLE Page Design Template]

When I first arrived at JILA in 2007, I wanted to immediately redesign and restructure the JILA website. However I did not not have the extra project time due to other demanding and pressing projects. It wasn't until the summer of 2009, that I finally decided that I needed shift my project load to make room for a JILA web redesign project (FINALLY). JILA is know for its renown research successes, and JILA's website should also reflect a sophisticated and highly accessible web interface to its demanding internet/intranet audiences. JILA needed to utilize nature of a Content Management System (CMS) and get away from the old early 1997-2000 web design which was just cobbled together system of HTML, CSS, and CGI files (see image below for a look of original JILA web site of the past). It was a great time for this new push since open source softwares like Drupal, Wordpress, and Joomla were getting to be really stable and standardized on the web.

During the summer of 2009, I decided that I would need a small team to effectively redesign and overhaul a huge website that would eventually lead to overhauling all the micro sites (JILA-AMO and the Fellows websites) and intranets at JILA. So I talked to Mike Paige from the Computing team at JILA about helping me with this project. Essentially we worked collaboratively with each other where I was leading with the front end development while Mike would emphasize the back end and hardware of website. It worked out pretty well since we both had to continue with our regular work projects and basically teach other about our discoveries along the way. Julie Phillips also helped with copy editing and writing of the new content for the website while Lynn was helping us transfer the preexisting content and giving us invaluable user experience feedback.

Mike and I spent the summer researching CMS(s) like Drupal, Wordpress, and Joomla and preparing our design/development proposal for the JILA Fellow Committee Meeting. We ended up choosing Drupal because it gave us the most flexibility, control, and security that we would need to for level of traffic and audiences we wanted the JILA website to target (plus it was a good sign when the whitehouse.gov launched their website using Drupal). We put our design/development proposal together explaining why JILA needed to utilize CMS platform to run its websites without hiring additional webmasters (Mike and I at that time) and make more content accessible to the global audiences and web search engines. The JILA websites were proving to be an ever-growing tool for grad/post doc recruitment and public outreach, so we needed a core system that could grow with the demanding needs of creating, editing, and managing content (includes text, high/lo resolution images, video, animations, podcast, data files, etc ). We also wanted the content to accessible with RSS feeds so as to have content easily organized and expand the viewing range to include newer mobile devices (blackberries, iphones, ipads, tablets etc). The Fellows and faculty were very receptive to our design and development proposal that Mike and I presented at the committee meeting, and we got full approval to pursue the web redesign project.

Mike and I developed the project in multiple stages since we had to do some experimenting/learning with the Drupal core. Plus we had to continue our other projects at the same time and couldn't hire any additional help due to hiring freezes by CU. We planned for the first stage of the website to take about a year (with just us two working on it with hectic schedules) to have a product to do a soft launch for the summer of 2010.

The web project is still under development with only two people solving the bugs, but progress continues.

About the Design:

I thought intensely about the web interface that JILA would possible need and how it would grow "organically" with the interface design. My design made interface flexible and expandable (i.e. new menu items/systems, RSS feed controls) with the idea that there will space for various features content items as they get developed and tested. I also wanted the interface to be more intuitive and constant and consistent than the previous design. You can check out the original JILA website to compare to:
[Original JILA website design in early 2000]

I designed the top 20% of interface with menu navigation system to be always be the same on all pages (original JILA website lacked these controls). I also colored the menu and various buttons to have a prominent blocking and intuitive function while keeping the background other blocking interfacing to be clean and not as intrusive (whites, simple backgrounds, washed out grays and shadowing) to give more emphasis to the menu functions. This also allowed the colors from the content images attract attention to the content. My goal was to make the interface clear and transparent so the user would explore the content more freely BUT also never feel lost with navigation and search features. I wanted the search function to be useful, quick, and well placed in this top 20% of the interface at all times. Mike really made the search function pretty robust and reliable (I believe he used Apache Solr search) and we spent a lot of time playing and testing it. I really really liked this website search tool compared to original JILA search tool which didn't work half the time.

I placed new content types such as JILA calender, News, and Research Highlights all to be RSS feeds, so that front page will be automatically populated with new content (or managed in any manner). I also wanted only important content types on the front page and reduce text copy and paragraph descriptions next to nothing. I wanted "keyword" text, menus, and graphic visuals to lead the user's experience AND NOT put lengthy literal text descriptions/explanations everywhere (this was a hard battle and compromises were made). The idea was to make the content "king" and have the interface and text be streamlined to emphasize the pure content. I also wanted to use intuitive menu labels and text identifiers that were more universally accepted by international web audiences.

The design for the article pages (or secondary pages) made a lot more room for text and have interactive features and functions located towards upper (flushed) right and bottom of the article page. This allows a user to focus on the text content of the research at their own discretion and then see what avaliable content functions might be accessible for that article. By placing a full column space on the right side of the article for content functions allows for future growth of the JILA website (i.e. podcasts, video embedding/streaming, etc).

The design for JILA webpage went through several design phases because I wanted to get feedback from a wide range of people ( JILAFellows, grads, post docs, writers, editors, admin staff, regular web users, outside designers, even my own parents) about my designs. Overall I am pretty content with my the final version of the web design, and I wish Mike and rest of the web team at JILA the best of luck with continuing the project through all its development stages. I strongly believe that JILA is on a good track with its website presence's and utilizing Drupal's CMS as a tool for both outside and internal communications.

  • Clients: JILA NIST-CU

  • Related Links: Drupal
  • 10/8/10

    NIST - Annual Report (2008-2009)

    Tom Perkins asked me to collect various images from my body of work at JILA and NIST from 2008-2009 to be used for the NIST Annual Report (view the PDF here). I submitted a whole library of my illustrations, figures, renderings, and photography for Tom to select from. Most of my work is in the Quantum Physics Division (Figures 1-8 pg 45-50). It is great honor to have a good amount of my work selected to be used for the Annual Review of Quantum Physics Division! The layout and design for previous years of the NIST Annual Report (Physics Laboratory) were pretty amateurishly designed, and I offered to assist with this year's design. Fortunately the people over at NIST hired another designer team to work solely on the print layout of the NIST Annual Report. The design is pretty safe and clean AND not terrible like previous years. I liked the colors they chose for cover which resemble my color schemes for lot of my body of work.
    pg 46-47 Figures 3-4

    pg 48-49 Figures 5-7

    pg 50 Figure 8

  • Clients: NIST,Tom Perkins, Jun Ye, Debbie Jin, John Bohn, Ana Maria Rey, David Nesbitt, and Steven Cundiff

  • Related Links: NIST - Annual Report (2008-2009) [as a PDF]
  • 5/21/10

    Ultracold 'Polar' Molecules - Redux

    So...... I decided to make new rendering of the Ultracold Polar Molecules. Nobody asked me to do it, but it has been something I wanted to do for a long a while. I made my first version rendering of the Ultracold Polar Molecules a while a back and it has since been used for a cover of "Science News" (check out my older posting) and NSF has adopted the image and made the image accessible to everyone (see posting). So the original image got a lot of attention, but I was never really really satisfied with the rendering. When I made the first version, I only had a day to do it. I originally wanted to do a multi-pass rendering using Maya and Mental Ray.

    Then my chance came along and I secretly decided to redo this image the way I originally intended. Jun Ye, Debbie Jin, and John Bohn were continuing to make headway with their Ultracold Polar Molecules research and the JILA Light & Matter Spring 2010 did a major feature article of their current progress on this research. The image made it to the cover of the JILA Light & Matter issue (which will be my last issued that I will be designing and producing). Its a good issue with a lot of good content and articles, and I encourage you to check it out.

  • Clients: Jun Ye, Debbie Jin, and John Bohn

  • Related Links: JILA Research Highlight article, JILA Light & Matter Spring 2010 issue
  • Ultrafast Demagnetization Dynamics of Magnetic Elements

    I worked with Chan La-o-vorakiate and Stefan Mathias from the Kapteyn-Murnane Group on this illustration. Chan originally made a version of this visual for PRL, and allowed me to redraw the visual for the JILA Light & Matter Spring 2010 issue. Chan and I discussed a few different variations of his original illustrator file, and we eventually decided that a isometric perspective rendering and a few different technical details would be the best way to structure the information in this visual. I used Illustrator to redraw this image

  • Clients: Henry Kapteyn, Margaret Murnane, Chan La-o-vorakiat, and Stefan Mathias

  • Related Links: JILA Research Highlight article
  • 5/20/10

    Cindy Regal photo shoots

    I was asked to take several photos of JILA Fellow Cindy Regal and her group. Cindy Regal recently became a JILA Fellow in January 2010, and she has been quickly been setting up your lab and group to begin research a.s.a.p. The photos were used for the latest JILA Light & Matter Spring 2010 issue where there was an article introducing Cindy Regal and a photo essay docuementing the JILA staff's redesigning of her new lab space. Cindy was pretty busy and I was pretty busy, but I broke up the photo shoot into two different quick sessions. Essentially they were lightening round photo shoots where I would setup my lights and explore the newly built lab. I believe the pictures came out pretty well despite my lightening shooting style and I was able to get some great expressions from her. Check out the JILA Light & Matter articles about her and her group! Sadly this will probably be my last JILA Fellow portrait shoot : ( Setting and shooting pictures of the JILA and NIST Fellows always proved to be an intriguing task. I guess now I have to have find new subjects to shoot in NYC. I can't wait to hang out with my photography friends once again to absorb some new techniques and maybe get back into the groove of doing some fine art photography once again (I haven't done much personal photography while I have been in Colorado).

  • Client: Cindy Regal

  • Related Links: JILA Light & Matter Spring 2010 articles (pdf)
  • 4/28/10

    Cavity-Enhanced Direct Frequency Comb Spectroscopy

    I worked close with Florian Adler from the Jun Ye Group. Florian requested a schematic of their experiment setup to help explain the process how the Jun Ye group performs tomography on a supersonic expansion. Florian explained he need the visual for Annual Review of Analytical Chemistry which will be officially printing their article "Cavity-Enhanced Direct Frequency Comb Spectroscopy: Technology and Applications" (early online review release available now) on June 15, 2010 as part of 2010 Vol 3.

    I worked on this visual over the summer 2009. Florian explained to me what he wanted for the visual and he brought me physical pieces of hardware from his experimental apparatus that I could use to model from. I started with an old-fashion sketch up the scene that Florian and I discussed. After that I decided this was going to be an extensive Maya project since I could use previous models I already built and texture/rendering scripts that I made for other projects. I essentially modeled the whole scene from my sketch layout and used the physical pieces Florian gave me. I used Illustrator and Photoshop to incorporate the labels and composite the overall layout. I think it came out pretty well and everybody seemed pretty happy with the end results.

    If you are interested in learning more about research that Jun Ye Group and other JILA groups a doing in this area, I would recommend you checking out the JILA Research Section; Molecular Fingerprinting and Control.

  • Clients: Jun Ye and Florian Adler

  • Related Links: Annual Review of Analytical Chemistry Article (early online review release)- Cavity-Enhanced Direct Frequency Comb Spectroscopy: Technology and Applications, JILA Research Section; Molecular Fingerprinting and Control
  • 4/4/10

    Visuals for "Life from an RNA World: The Ancestor Within"

    Michael Yarus (aka Mike) came to me about helping him create all the insert visuals for his new book "Life from an RNA World: The Ancestor Within". The book is published by Harvard University Press and is now available on their website and on Amazon. Harvard University Press produced the cover visual (Ill find out who did that image once I get a copy of the book). The visual inserts that I rendered are below and I provided the B&W and colored versions together. The inserts for the book were printed in B&W.

    Production notes:
    After several meetings with Mike discussing the data and concepts for the visuals that to be included in the book as inserts, I had to do a bit of research finding the data and which visual scientific software I was going to use in my production workflow. I used PDB data file "2gis.pdb" for the model data which can be downloaded from the Protein Data Bank website. I was familiar with VMD (Visual Molecular Dynamics) software in past projects at JILA. I typically use VMD in coordination with Maya where I would use VMD to produce the models and then use Maya for its rendering environment. I like VMD, but I found its interface and functions to be difficult to use (it is an older piece of software). I heard about PyMol which is an open source molecular visualization system. I thought it might be a good software to use for this particular project because it has pretty sweet openGL rendering environment that I could use on Mac and PC computers. PyMol had better support and controls that I could use to create different visual representations of the data! I also discovered that it could render out some beautiful renderings without necessary having to port data model to Maya which help save me a lot of time in my work-flow (when compared to my work-flow with VMD and Maya). I still wanted to export the model data from PyMol and incorporate Maya, and PyMol made this much easier than VMD. I essentially export model data in PyMol by exporting it as VRML format (.wrl files) which I could then open in Maya. The hardest part about this project was learning how to use PyMol in a few days. I used Illustrator and Photoshop for layout and vector line work.

    After completing the inserts and preparing them for print, there was some question about making a visual for the cover of the book. The editors at Harvard University Press had some plans already about creating the cover for the book and they did not really tell me about what they wanted to do for the cover. I am not sure who created the cover image or how the visual was created. I think it is an artist's conception of RNA. (ill find out which studio rendered that image eventually and update this posting) Regardless I wanted to attempt making a visual for the cover based on the data that was used for the inserts. I thought the possibility of using the data and visual that was already used for the inserts would help tie the book design together. The image below is my attempt. It is a multiple rendering of 2gis.pdb data file where you can see stick figure representation combined with the space filling representation. The rendering below was not published with the book, so it is for sale to anybody who wants to use it as a cover or visual for something. Just contact me. I still like this image and it has my art/design style. It is my interpretation of book title "Life from an RNA World: The Ancestor Within" as rendered from data. I think the editors at Harvard University Press probably thought the visual was too scientific or technically complex to be used as a cover visual. They wanted a more main stream visual that would probably sell more books. I thought cover image they used was pretty eye catching and will probably help promote their book sales.This was a fun project and I wanted to thank Mike Yarus for letting me work with him on the visuals. I also want to give special thanks to Julie Fiore from JILA for her help with giving me a quick crash course with PyMol!

  • Clients: Dr. Michael Yarus

  • Related Links: Buy the book at Amazon OR buy it from Harvard University Press
  • 4/1/10

    Journal of Physical Chemistry A - front cover

    My work is on the cover of "Journal of Physical Chemistry A" (April 1, 2010 Vol 114, Iss 12 Pgs 4017-4470) ! The featured article is "Vibrational Autodetachment−Intramolecular Vibrational Relaxation Translated into Electronic Motion" which starts on pg 4017–4030. I worked closely with JILA Fellow Mathias Weber with the data for the cover image. This is my first offical Journal of Physical Chemistry A cover.

    Cover Description: "Vibrational excitation of CH stretches in nitromethane anions leads to vibrational autodetachment. The photoelectron spectra of autodetachment processes encode the underlying dynamics"

    Mathias came to me August to talk to me about his research and potential cover for JPC-A. I wasn't familar with his current research, so I read his research paper to poured over his scientific poster that his group put together. Mathias explained his research findings and showed me his MOLDEN simulations. Once I understood his research and data visuals that I had access to, I had to figure out how visualize his research on JPC-A cover which essentially a perfect square area in the middle. Mathias and I chose visualize the research in 3 part story panel. This led me to format the layout in the square with 2 vertical columns (column 1 shows the molecule structure and column 2 show details enacted on the molecule structure) and sequence the story with 3 horizontal rows. Row 1 shows the molecule getting hit with hv(IR) laser that causes vibrational excitation. Row 2 details the vibrational excitation and the specific areas of the molecule that vibrate. Row 3 details the end result of vibrational autodetachment and how it compares to direct detachment (the 2D spectroscopy data). I was pretty happy with this design layout and I think it describes Mathias group's research pretty clearly and effectively.

    Production Notes:
    I started this project opening the data in a program called MOLDEN. MOLDEN allowed me to view the simulations/animations that Mathias had collected. Unfortunately MOLDEN's rendering environment was a bit dated and the quality I desired was going to be difficult with MOLDEN. So I switched to gOpenMole for modeling and rendering the data. I performed multilple layer renderings with gOpenMole of the molecule structure to allow me the most visual control. I then used Illustrator and Indesign for the layout. Mathis introduced me to a new piece of software called Image-J which has some really interesting functions (like the Interactive 3D surface plot). I am hoping to incorporate this imaging tool for various future projects. I am probably going to play around with this tool for some various creative experimental applications.

  • Clients: Mathias Weber

  • Related Links: The Journal of Physical Chemistry A - (April 1, 2010 Vol 114, Iss 12 Pgs 4017-4470), JILA Research Highlight article
  • 3/2/10

    Physics Today - front cover

    My work is on the cover of "Physics Today" (March 2010 Vol 63, Iss 3, pp.8-80)! The featured article is " Universal insights from few-body land" which starts on pg 40 (check it out!). I worked closely with JILA Fellow Chris Greene with the data for the cover image and I used Seth Rittenhouse's POV-Ray data files. This is my first Physics Today cover.

    cover caption: "The four cobralike forms here represent one view of a wavefunction for a collision between two weakly bound dimers composed of fermionic atoms. The calculations underlying the figure are at the forefront of theoretical work that explores universal properties in few-body systems—that is, features that are independent of the details of particle interactions. Chris Greene’s article, beginning on page 40, surveys universal physics in few-body systems, from a startling prediction offered in 1970 to recent theoretical and experimental advances."

    Chris Greene came to me in October to talk to me about helping him make the cover image for submission to Physics Today. We discussed several ideas and processes, but there were some factors that I had work around. The main one was that I was already working several other projects for some other Fellows, the deadline for PT submission was soon, and Chris's project involved a lot of 3D work (which are never quick projects to do). Even though these factors were daunting at the beginning of the project, I was super excited about it. I never work with his 3D data before and I thought Chris's and Seth's original models were interesting representations of their research. The idea was just weird enough that I had to do it. It has Cobras!!? naturally im into it and I couldn't pass up this opportunity. (shout out to my GDC crew!!!)

    The project started with Chris giving me the POV-Ray files and showing me what he was doing with them. You can check out the older renderings of the cobras here. The POV-Ray model data files were Seth Rittenhouse's. Seth was graduate student at JILA, but I didn't realize he finished his thesis and was now at Cambridge, MA when I emailed him about doing some data re-renderings. He mentioned that files I was working with took 1.5 weeks to process (pure continuous processing on a pretty fast computer cluster at JILA (i think)). So doing some re-processing of the given models wasn't going to work with the time frame that I was working in.

    Production Notes:
    I work with a lot different 3D environments and softwares, but I typically avoided using POV-Ray. POV-Ray (Persistence of Vision Raytracer) is a great open source command line driven render, but I would rather work in more robust 3D package like Maya that have some great standard renders and mentalRay (i typically like to render with MentalRay if i can). Don't get me wrong, you can definitely render some beautiful things with POV-Ray, but it takes a veteran 3D coder (the recent versions of POV-Ray have been really impressive since the last time I checked out POV-Ray in 2004.) Also POV-Ray is primarily a render and lacks other functions that a lot of other 3D software come standard with (part of the beauty and downfalls of POV-Ray). The work flow of POV-Ray immediate brought back memories of me coding/modeling with OpenGL environment back in 2004. At the beginning I was working with POV-Ray's script files and I was getting some good results (I was running it on both the PC and Mac environments), but the work flow was really tedious and not efficient use of time to master POV-Ray's rendering commands and work flow process. I needed a better work flow that could use POV-Ray files and that could make some great renderings with a lot of easy to change controls. So I decided I need to incorporate Maya in this work flow which meant I needed to export/convert the model data. So I spent a lot of time reading forums about other people trying this and it appears that its not the easiest thing to do (or that common with the Maya and POV-ray communities). There weren't a lot of scripts or programs that would do this well (and cheap as in free). I was checking this software called Moray (which is kinda of GUI interface for POV-Ray), but it didn't really have what I needed. Then I found this program called 3DWin. At first 3DWin didn't look that promising or if it did do it, it was going to make the model come out looking like garbage. But I was surprised and super excited that it converted the model data pretty well (i still had do some operations to it). Now I was able to work in Maya's 3D environment. Unfortunately it took a while to convert the files and a lot of the rendering techniques and processes I was planning on working on for this project was going to take too long. So the final rendering that PT selected is hybrid of mutliple renderings using POV-Ray and Maya. I am glad I was able to work pretty closely with POV-Ray and actually incorporate it my work flow process of making a pretty good rendering.

    I want to thank for Seth and Chris for the original files and for letting me work on this project. The project deadlines originally took place in October, and after a few months of not hearing back from PT, I was little worried we wouldn't get our submission selected for the cover. Physics Today has a pretty wide circulation and some pretty amazing past cover imagery. Physics Today's covers are pretty competitive to get and I am really happy that Chris and Seth's research was selected as the cover feature.

  • Clients: Chris Greene and Seth Rittenhouse

  • Related Links: Physics Today - March 2010, JILA Research Highlight article
  • 2/3/10

    Carl Lineberger's cover - Journal of Physical Chemistry A

    Lineberger Research Laboratories in JILA Basement, 2001. Watercolor by visiting fellow Zdeněk Herman.

    The Journal of Physical Chemistry A did a special cover and preface issue where they did a tribute W. Carl Lineberger (January 28, 2010,Vol 114, Iss , Pg 1225-1602). Check it out!

    Carl asked me about scanning JILA visiting Fellow Zdeněk Herman's watercolor painting, and preparing it for print for JPC-A. He told me about the idea of using Herman's watercolor painting, and I thought it was a fantastic idea for cover layout. Scanning it was bit difficult due to the size of the piece but I was pretty careful when I was dismantling the frame and handling the art. I made sure the colors were mastered correctly and maintain high fidelity scans.

    If you ever been to JILA before, you may have noticed visiting Fellow Zdeněk Herman's art work hanging in the JILA tower and in various Fellow's offices. It was one of the first things I notice when I first went to the top floor of the JILA tower. I expressed my admiration for the Herman's illustrations and Carl loaned me his personal reprint of Zdeněk Herman's sketch book that I could check out. It was pretty funny seeing the history of JILA through Herman's sketch book. When I get extra time, I am hoping to scan it to make digital version of Herman's sketch book and make it avaliable to the staff and faculty at JILA (and maybe for JILA's website).

  • People: Carl Lineberger

  • Related Links: The Journal of Physical Chemistry A : Tribute to W. Carl Lineberger
  • 1/27/10

    Ana Maria Rey & Jun Ye - NIST Annual Report

    This was a photo shoot with Ana Maria Rey and Jun Ye for the NIST Annual Report (2008-2009) which is slated to be published and available in mid 2010.

  • Client: Jun Ye Group and Ana Maria Rey

  • Related Links: NIST Annual Report (2008-2009) [pdf]
  • 1/10/10

    Measuring red blood cells elasticity

    This was a project where I was 3D modeling (using Maya) a microfluidics device that was being used to measure the elasticity of red blood cells. This was for JILA Fellow Ralph Jimenez's group. I did version of this a few years ago (see posting titled "Mircofluidics Device"), so it was interesting to follow the updates/changes to this particular experimental apparatus and the applications it is being used for.

  • Client: Ralph Jimenez

  • Related Links: JILA Research Highlight article
  • 1/5/10

    PNAS: Phase-matched (coherent) addition of the high harmonic X-ray fields

    I worked with Fellow Margaret Murnane and Dr. Tenio Popmintchev from the Kepteyn-Murnane Group on this figure for PNAS. The paper was titled "Phase matching of high harmonic generation in the soft and hard X-ray regions of the spectrum". It was published June 2009, but I just recently found the article was finally published.

    Caption: "Fig. 1. Extreme nonlinear upconversion of a femtosecond laser light to
    shorter wavelengths. Phase-matched (coherent) addition of the high harmonic
    X-ray fields emitted by many atoms in the medium is shown."