by Sarah L. Hansen

Photos courtesy Sarah Luttrell (top features Alex Kingston, bottom features Preethi Somasundaram presenting to Kayla Lemons)

The 30^th Annual Graduate Association of Biological Sciences Symposium was held in UMBC’s University Center ballroom on Friday, March 14.  The event featured posters by twenty-six graduate students in the department, four student talks, and Nate Morehouse, the remarkably engaging keynote speaker from University of Pittsburgh.  Organized by GABS officers Lucas Horn (president), Sarah Luttrell (secretary), Sharlene Brown (vice president), and Rob Nunn (treasurer), and staffed by volunteers, the event drew 90 registered attendees, including a mix of students, faculty, and staff.

The symposium affords students the opportunity to share their research with Biological Sciences colleagues. Graduate student Karan Odom, PhD candidate in the Omland lab, commented that GABS is a great way for molecular and ecological folks to learn about each other’s work.  No matter your field, the GABS symposium is about “spreading the joy of conducting research,” said Chong Zhang, a PhD candidate in the Lu lab.

Poster Prowess

Every poster was attended by a student obviously invested in their work and knowledgeable about their project.  Alexandra Kingston, a PhD candidate in the Cronin lab, studies squid chromatophores, the pigment sacs that create the octopus relative’s camouflage.  But get this – squid can’t see color!  Kingston discovered visual pigments located all over their skin and in other organs, though, and she wonders whether squid can “see” with them.  So far it’s been difficult to test that hypothesis.  Kingston’s collaborators at the Marine Biological Laboratory in Woods Hole, MA work on cuttlefish, which are closely related to squid.  They tried to incapacitate cuttlefish eyes by placing opaque contacts over them, but it turns out the highly intelligent creatures will rip out the contacts, often injuring themselves severely. 

Ryan McDonald, a PhD student in the Schreier lab at IMET, studies a wood-eating catfish, one of only two wood-eating fish species in the world.Because plant material provides minimal nitrogen, which all animals need to build protein, these fish have symbiotic nitrogen-fixing bacteria in their guts.McDonald is trying to characterize this bacterial community, or “microbiome.” One of his methods involved dissecting the fish in a glovebox-size oxygen-free chamber, because some of the bacterial enzymes are deactivated in the presence of oxygen. 

Applied Molecular Biology (AMB) students also presented posters.  AMB is an accelerated masters program emphasizing intensive lab work.  Some students, like Brandy Kaschenbach, had never conducted research before this year.  “It’s amazing how much I’ve learned already,” she said.  Her work in the Bieberich lab is helping create a rat model of prostate cancer that represents the disease in humans more accurately than previous models.

Other posters described genes in plants that control defense and circadian rhythms (Chong Zhang, Lu lab), optimization of a molecular complex used in dental care products (Candice Craig and Isleen Wilde, AMB), the accuracy of protein production in human cells (Ling Cao, Farabaugh lab), the characterization of the yeast gene SET4 (Pushya Pradeep, AMB), and much more.          

Enticing Talks

Four students presented twenty-minute talks about their research.  Amanda Monahan, PhD candidate in the Starz-Gaiano lab, discussed stem cell maintenance in fruit flies.  The genes involved are very similar “from flies to man,” she said, so her work is relevant to humans.   Having too many stem cells can lead to tumor formation and cancer, and too few can result in slow wound healing or premature aging.  The STAT gene is required to maintain appropriate stem cell populations, and Monahan’s work helps elucidate how STAT is regulated.  It turns out the “apontic” gene plays an important role in controlling STAT activity, and therefore, stem cell numbers.  This could be the key to the next generation of cancer treatments, as cancer stem cells often remain after chemotherapy.

Michael Martin (Mendelson lab) focused on the divergence of sexual signals among species of darters (freshwater fish).  Sexual signals are “traits used in the mating process to either woo females or ward off potential rivals,” he said.Martin examined eight pairs of allopatric darter species (meaning they do not occur in the same geographic area).  For each species pair, he put five males and five females of each species (20 fish total) in an artificial stream environment and observed and recorded their aggression and courting behavior.  Each observation lasted two days, and he did three trials for each species pair.   With eight pairs that’s 48 days of fish observations!  Martin found that male coloration correlated more strongly with male aggression than with female choice.  When a male spots a similar male, “they’ll show off their fins, they’ll fight each other, they’ll chase each other,” Martin said.  The more similar the two males’ coloration patterns, the more aggressive they are toward each other.  That means that males’ colors may be more of a “contest signal” to other males rather than an “attraction signal” to females.  This counters the traditional theory that divergence in male traits occurs primarily in response to female behaviors.     

Bioinformatician Tom Peterson (Kann Lab) gave a talk on protein domains in cancer cells.  Protein domains are “evolutionarily conserved, they’re the structural and functional units of proteins, and they often mediate interactions between proteins,” Peterson said.  “Protein domains are kind of like Legos.  If they’re arranged in different formations they can form different structures and serve different functions.”  Peterson’s goal is to use computer programming to “identify domain mutational patterns that can distinguish between different cancer types or tumor progression states.”  He’s already applied his new method to three data sets obtained from The Cancer Genome Atlas for colon, breast, and lung cancer.  The method allows researchers to zoom in on which mutations cause different types of cancer, regardless of what gene or even chromosome the mutated domains call home in individual patients.  His work will increase our understanding of the genetic causes of cancer and pave the way for more effective diagnosis and treatment.     

 Finally, Safae Hamdoun (Lu lab) discussed her research on innate immunity in plants.  She discussed three different mechanisms by which Arabidopsis thaliana defends itself against pathogens.  Pathogen-Triggered Immunity (PTI) is the weakest form of defense, where molecular patterns on the surface of pathogens trigger the plant’s immune response.  However, pathogens have evolved “effector” molecules to block PTI.  This state is called “Effector-Triggered Susceptibility” (ETS).  In response to this, plants evolved Effector-Triggered Immunity (ETI), which is the strongest form of defense.  Plants and pathogens are in a constant arms race. “Think of it as an invader trying to go inside a castle,” said Hamdoun. “Depending on how the troops inside the castle move, we can determine the end result of the battle.”  Plants undergoing PTI, ETS, and ETI have quantitative differences in their gene expression that are dependent on the pathogen dosage applied, she found. When a plant is under attack, one interesting observation is the appearance of enlarged cells that do not undergo mitosis and instead create tumor-like growths on the underside of leaves.  Hamdoun is investigating how and when these growths are generated, depending on the plant’s immune responses (PTI, ETS, or ETI).  Understanding plant immunity is critical for breeding or creating pathogen-resistant crop plants.  

Colorful Keynote         

Nate Morehouse, Assistant Professor of Biological Sciences at University of Pittsburgh, delivered the keynote address on biological links between pre- and post-copulatory sexual selection in butterflies, specifically the sexual exploits of cabbage white butterflies.  Although the small insects appear white to human eyes, Morehouse used modeling techniques and knowledge of the cabbage white’s six photoreceptors to “put on butterfly goggles” and demonstrate that male cabbage whites are both brighter and more colorful than females.  He also showed that brighter, more colorful males get to mate more often than less colorful ones.   

Males are “honest salesmen,” said Morehouse, because a male’s colorfulness accurately represents the amount of nitrogen in his body.  Why does that matter?  Because the male’s ejaculate is packed with nitrogen, which is crucial for both the female’s longevity and her fecundity.  Cabbage white caterpillars feed on nitrogen-poor plants, and as adults they don’t obtain any new nitrogen – except females, via a male’s “nuptial gift” of sperm and nutrients.  Nitrogen is important for building proteins, of which most body structures are built.  So it’s critical for a female to make sure she gets the best “gift” possible.  As Morehouse put it, “Not all males give a 2 carat diamond – some give a .5 carat cubic zirconia.”

Leucopterin, the pigment males load into their wings to make them colorful, is the most nitrogen-rich pigment ever identified in the animal kingdom.  If a male has enough nitrogen to stock his wings with leucopterin, a female can safely bet he has plenty to give to her.  Males can give as much as 13% of their body weight to a female in the form of protein-stocked ejaculate.   

The problem for males is that she can mate again, and “the last in is the first out,” said Morehouse.  The male’s gift will be wasted (from his point of view) if she mates with another male.  His nutrients will be used to nourish another male’s offspring.  As you might expect, males have evolved to prevent this.

A female can’t fit another nuptial gift in her body until she digests the first one, so males have evolved to make digesting the gift difficult.  “He packages this thing in a hard outer shell.  If he could put a rock in her, he would,” Morehouse said.  But of course, females have evolved in response.Morehouse described a structure called the signum inside the female’s bursa copulatrix, or “mating purse.”  “It’s a hinged, toothed chewing structure that acts like a jaw and chews its way past this hard outer shell.” 

The bursa is also from 2-10 times as capable of breaking down proteins (like those in the shell of the male’s gift) as the entire digestive tract of a cabbage white larva.  But now evidence is emerging that the males can exert chemical forces on the female to reduce that enzymatic activity.  This butterfly battle of the sexes is “a battleground that we’re just beginning to explore,” said Morehouse.

(Photo by Andrés Nieto Porras/Flickr)

Treehouse students will often ask me which mockup tool I use to prototype websites, and my response is almost always the same: pencil and paper.

I feel like when I give this answer, there’s a small sigh of disappointment. I think it’s because people are hoping for a better way to simplify the complexities of creative problem-solving.

Even though my answer might not be very flashy, building a website with a prototype is often much faster than skipping the prototype phase. Even for a very simple website, a five-minute sketch could save hours of trial and error in the late stages. The cheaper the prototype the better because prototypes involve more iterations and refinement that can be costly.

Free trial on Treehouse: Are you interested in learning the best methods for designing and prototyping websites? Click here to start a free 14-day trial at Treehouse.

Start with a Pencil and Paper

It’s tempting to open Photoshop or begin coding right away because these digital tools put a cap on the level of naivety and ignorance we can display. Taking this example to the extreme, it’s arguably more intimidating to draw a house with a pencil and paper than it is to build it with LEGO blocks. However, there are several advantages to drawing websites before jumping into more concrete tools.

In this image, I’ve used a pen to draw some small thumbnail sketches of a todo list app.

First, I think it’s important to mock up sites starting with the cheapest tool and moving toward more expensive time investments, and there’s nothing cheaper than drawing.

When I say “cheap,” I’m describing the level of time and emotional investment — not necessarily monetary expenses. Dozens of quick thumbnail sketches can be scratched out in a few minutes. The less time I spend on an idea, the less attached I’ll be; this is good in the early phases because I don’t want to settle too soon. Now is the time to explore all the possibilities.

Second, drawing allows for maximum flexibility. Some might argue that a more robust digital mockup tool can serve the same purpose, but I disagree. Drawings are great because the level of abstraction can change wildly in a matter of seconds. One moment I might be blocking out the major columns, and the next I might be deciding on the order of navigation elements.

Intentionally or not, digital mockups tend to lock in a specific level of detail fairly early on. Paper drawings should be loose without any attention given to fonts, colors, small interface elements, and so on. At this point, I’m just marking down the big ideas.

I should note here that any drawing tool will work fine, such as a whiteboard drawing or a drawing app for a tablet device. Just as long as it allows for quick sketches, it should serve the need.

Then Move onto a Digital Mockup

Once I have a paper mockup I’m happy with, only then will I use a digital mockup tool to wireframe my ideas. I like to use Balsamiq Mockups, but another popular choice is OmniGraffle. I like Balsamiq in particular because it has some commonly used web widgets, such as video players and embedded maps. I also like that the lines aren’t perfect because it helps others understand that the lines do not represent a final result.

This mockup was creating using Balsamiq Mockups. Digital mockups should focus on getting spacing and the flow of screens right.

Digital mockups are helpful because they can be shared easily. They’re also more comprehensible than quick paper sketches. Stakeholders (which might include team members, customers, clients, managers, and so on) can be sent a digital mockup for review, which is key to the prototyping process. If they want to see some small changes, it’s easy to make them. If they don’t like the idea at all and want a completely new direction, then it’s easy to do a few more paper mockups and then convert them to another digital mockup.

Each level of rapid prototyping should escalate the level of detail. At this phase, I pay attention to proportions, spacing, and alignment because it can be hard to get these elements right on paper. Often, a paper mockup will not translate well to a web framework because the proportions in your mind’s eye don’t always line up with reality. That said, I’m still not concerned with fonts and colors right now. The aesthetic here should just be a simple wireframe without any coloration or shading.

Skip Photoshop (If You Can)

When I say “skip Photoshop” I mean Photoshop, Illustrator, GIMP, Pixelmator, and similar high-fidelity tools. These digital tools sit at a different tier of abstraction typically intended to provide maximum detail. This is usually bad because the pixels will almost never line up the same way in a web browser, especially when it comes to responsive design and cross-browser inconsistencies. Also, I personally feel like I’m more efficient using a web framework than I am with these heavy digital tools.

High-fidelity mockups can be powerful but time-consuming. Avoid them if you can.

These are just guidelines though, and often, I’ll still find myself in Illustrator creating more detailed imagery. However, some website designs demand to be free from the bounds of conventional text, images, and columns. They also allow for key points of collaboration on medium and large teams. A detailed mockup might take a designer some time to put together, but it could also save massive amounts of development time.

For example, at Treehouse we have about 70 employees, and we use Illustrator mockups to help us design new features before spending more resources on the code. We’ll often even use a tool like InVision to create interactive mockups to get a feel for the flow of interaction. When interaction is added, a static “mockup” makes the leap into being a “prototype” because it’s more representative of the final product.

Pushing pixels without limits has an undeniable allure of power, but it should be used responsibly. Before just opening up an image-editing program, really think about whether or not you need it. Skip Photoshop, if you can.

Use a Framework to Prototype

The last step in my rapid prototyping process is the most expensive (but usually cheaper than Photoshop). After a digital mockup, I’ll use a framework like Bootstrap or Foundation to create an interactive prototype that works in a web browser. Beyond creating paper mockups, this is the most important step because a browser is the environment that the website will be viewed in.

When using a framework, I start with placeholder elements. Foundation has several examples of what these types of prototypes might look like before adding in things like images, videos, fonts, and colors. At this point, I spend more time refining the spacing and proportions that were started in the previous digital mockup phases.

Once I’m happy with these elements, I’ll then add in as much real data as I can. This is a key step and it’s best to add data as soon as possible. (In fact, I will often add real data in the wireframing step.)

Adding in real data (and language) rather than using placeholder “lorem ipsum” text could inform design decisions. Titles that are longer than expected or paragraphs that are too short could spark some necessary iteration.

Finish Up

The wonderful thing about prototyping with a framework is that the prototype often just becomes the real site because the structure and styling are already in place. There’s no need to recreate the site from scratch if it’s going to use the same framework. It’s a good idea to discuss technology decisions with collaborators before entering this step because it would be a tremendous waste of time to mock up a site in Foundation if it’s actually Bootstrap the team wants to use.

I’ve talked about mockups in the past, but I’m so often asked this question that I thought it merited some additional explanation. This is just the process that I like to use, but if there’s a technique that makes you more efficient than most, I’d love to hear from you in the comments.

The post How I Rapidly Prototype Websites appeared first on Treehouse Blog.