CASE STUDY / SETI INSTITUTE
SETI astronomy website
SETI Institute website to introduce astronomy and astrobiology to middle schoolers.
Company: SETI Institute
Role: Web designer, front-end developer, illustrator
Disciplines: Creative Direction, Web Design, Illustration, Front-End Development, UX
The SETI Institute conducts scientific research into the origins and nature of life in the universe. Working with one of its scientists, I designed and developed a 30-page educational website to introduce middle-school students to astronomy and planetary science.
Working with existing content, I was responsible for translating it into an engaging website, from initial wireframes and visual design to custom illustrations and front-end development.
01
Designing for a pre-teen audience
Middle school is an interesting age range to design for. An 11-year-old and a 13-year-old may only be two years apart, but their interests and expectations can be quite different. Something that appeals to a sixth grader might feel childish to an eighth grader.
I decided to aim the design toward the older students. My thinking was that younger kids would be more willing to explore a website that looked a little more grown-up than older kids would be to use one that felt too juvenile.
That meant avoiding the bright colors, cartoon characters, and oversized interface elements often associated with educational websites for children. Instead, I wanted the site to feel more like a general astronomy resource, with a visual style that wouldn't seem out of place for an older audience and with clickable icons, badges and tabs that would allow for further exploration in small chunks.
01
Designing for a pre-teen audience
Middle school is an interesting age range to design for. An 11-year-old and a 13-year-old may only be two years apart, but their interests and expectations can be quite different. Something that appeals to a sixth grader might feel childish to an eighth grader.
I decided to aim the design toward the older students. My thinking was that younger kids would be more willing to explore a website that looked a little more grown-up than older kids would be to use one that felt too juvenile.
That meant avoiding the bright colors, cartoon characters, and oversized interface elements often associated with educational websites for children. Instead, I wanted the site to feel more like a general astronomy resource, with a visual style that wouldn't seem out of place for an older audience and with clickable icons, badges and tabs that would allow for further exploration in small chunks.
01
Designing for a pre-teen audience
Middle school is an interesting age range to design for. An 11-year-old and a 13-year-old may only be two years apart, but their interests and expectations can be quite different. Something that appeals to a sixth grader might feel childish to an eighth grader.
I decided to aim the design toward the older students. My thinking was that younger kids would be more willing to explore a website that looked a little more grown-up than older kids would be to use one that felt too juvenile.
That meant avoiding the bright colors, cartoon characters, and oversized interface elements often associated with educational websites for children. Instead, I wanted the site to feel more like a general astronomy resource, with a visual style that wouldn't seem out of place for an older audience and with clickable icons, badges and tabs that would allow for further exploration in small chunks.
02
Photography and illustration
Growing up in a home filled with books, I was fascinated by coffee table tomes filled with photographs of planets and galaxies. I'd often pick one up for the photos and illustrations and end up diving in.
I used those books as a reference for the website's visual direction. Astronomy has the advantage of being an unusually photogenic subject, so I made the photographs a prominent part of the layouts rather than treating them as supporting decoration.
Not everything could be explained with photography, though, so I created approximately 50 original illustrations and charts to accompany the written material. These included diagrams of a lunar eclipse, or a simplified Hertzsprung-Russell star luminosity diagram, or cutaways of the interiors of planets, done in 3DS Max. The cutaways were used as the central point for all eight Solar System planets (sorry, Pluto, you got demoted) and used planet surface photography from various missions, such as the Mercury Messenger mission.
02
Photography and illustration
Growing up in a home filled with books, I was fascinated by coffee table tomes filled with photographs of planets and galaxies. I'd often pick one up for the photos and illustrations and end up diving in.
I used those books as a reference for the website's visual direction. Astronomy has the advantage of being an unusually photogenic subject, so I made the photographs a prominent part of the layouts rather than treating them as supporting decoration.
Not everything could be explained with photography, though, so I created approximately 50 original illustrations and charts to accompany the written material. These included diagrams of a lunar eclipse, or a simplified Hertzsprung-Russell star luminosity diagram, or cutaways of the interiors of planets, done in 3DS Max. The cutaways were used as the central point for all eight Solar System planets (sorry, Pluto, you got demoted) and used planet surface photography from various missions, such as the Mercury Messenger mission.
02
Photography and illustration
Growing up in a home filled with books, I was fascinated by coffee table tomes filled with photographs of planets and galaxies. I'd often pick one up for the photos and illustrations and end up diving in.
I used those books as a reference for the website's visual direction. Astronomy has the advantage of being an unusually photogenic subject, so I made the photographs a prominent part of the layouts rather than treating them as supporting decoration.
Not everything could be explained with photography, though, so I created approximately 50 original illustrations and charts to accompany the written material. These included diagrams of a lunar eclipse, or a simplified Hertzsprung-Russell star luminosity diagram, or cutaways of the interiors of planets, done in 3DS Max. The cutaways were used as the central point for all eight Solar System planets (sorry, Pluto, you got demoted) and used planet surface photography from various missions, such as the Mercury Messenger mission.
03
Designing and building the website
I designed and hand-coded the 30-page website using HTML, CSS, and jQuery, taking the project from initial wireframes, to design, through front-end development.
The pages covered a wide range of astronomy topics, each with different combinations of text, photography, illustrations, and charts. I designed the layouts to accommodate these differences while keeping the navigation and overall appearance consistent.
The content also included a lot of scientific terminology that might be unfamiliar to middle-school students. Rather than send readers to a separate glossary, I added more than 300 pop-up definitions throughout the website. Students could look up a term as they encountered it and continue reading without leaving the page.
03
Designing and building the website
I designed and hand-coded the 30-page website using HTML, CSS, and jQuery, taking the project from initial wireframes, to design, through front-end development.
The pages covered a wide range of astronomy topics, each with different combinations of text, photography, illustrations, and charts. I designed the layouts to accommodate these differences while keeping the navigation and overall appearance consistent.
The content also included a lot of scientific terminology that might be unfamiliar to middle-school students. Rather than send readers to a separate glossary, I added more than 300 pop-up definitions throughout the website. Students could look up a term as they encountered it and continue reading without leaving the page.
03
Designing and building the website
I designed and hand-coded the 30-page website using HTML, CSS, and jQuery, taking the project from initial wireframes, to design, through front-end development.
The pages covered a wide range of astronomy topics, each with different combinations of text, photography, illustrations, and charts. I designed the layouts to accommodate these differences while keeping the navigation and overall appearance consistent.
The content also included a lot of scientific terminology that might be unfamiliar to middle-school students. Rather than send readers to a separate glossary, I added more than 300 pop-up definitions throughout the website. Students could look up a term as they encountered it and continue reading without leaving the page.
04
End result
The finished website consisted of 30 pages, more than 100 photographs, 50 original illustrations and charts, and over 300 pop-up definitions.
Working directly with the astrobiologist who wrote the content as well as having access to the rest of the SETI science staff was particularly helpful when developing the illustrations. I could discuss the science with them and make sure the diagrams were accurate while keeping them understandable for younger readers.
I also wrote an article about the project, "Web Site to Reach the Next Generation," for the 2012 issue of SETI Institute Explorer, and illustrated the cover of the same issue.
04
End result
The finished website consisted of 30 pages, more than 100 photographs, 50 original illustrations and charts, and over 300 pop-up definitions.
Working directly with the astrobiologist who wrote the content as well as having access to the rest of the SETI science staff was particularly helpful when developing the illustrations. I could discuss the science with them and make sure the diagrams were accurate while keeping them understandable for younger readers.
I also wrote an article about the project, "Web Site to Reach the Next Generation," for the 2012 issue of SETI Institute Explorer, and illustrated the cover of the same issue.
04
End result
The finished website consisted of 30 pages, more than 100 photographs, 50 original illustrations and charts, and over 300 pop-up definitions.
Working directly with the astrobiologist who wrote the content as well as having access to the rest of the SETI science staff was particularly helpful when developing the illustrations. I could discuss the science with them and make sure the diagrams were accurate while keeping them understandable for younger readers.
I also wrote an article about the project, "Web Site to Reach the Next Generation," for the 2012 issue of SETI Institute Explorer, and illustrated the cover of the same issue.
Mekanismo
© 2026 Gabriel Alvarado-Marín