Naomi Bastian Design

Portfolio

Scroll to View Portfolio

CSS Zen Garden

See the Pen CSS Zen Garden by Naomi (@nsbast42) on CodePen.

Tools Used: HTML, CSS, SCSS, Adobe Illustrator

The CSS Zen Garden is a demonstration of what can be accomplished through CSS-based design. On the website, you can select any style sheet from the list to load it into the page. Our final project for my Advanced CSS class was to create a stylesheet for the CSS Zen Garden, with a responsive layout, themed design, transitions, and animations. We were challenged to create a CSS stylesheet without the use of our own classes or ids, instead using selectors creatively to accomplish our goal. Since we couldn’t edit any of the HTML, this proved to be a significant challenge!

I wanted to create a themed stylesheet inspired by some of my other projects, such as the Cosmic Pinball Gig Poster. We imported background images using CSS, meaning that as long as we hosted the images on another site, we could include them. I created the images in the background as well as the actual background image in Adobe Illustrator, and then included them as background images. The sidebar and header use animations and transitions to add visual interest, and the entire layout is responsive and looks great in any window or screen size.

View the Full Codepen Here

Screenprint Poster

Tools Used: Screenprinting Materials, Adobe Illustrator

For the final project in my Intro to Graphic Design class, we were assigned to create a series of posters for a specific Shakespeare play performance. I was assigned to create posters for Twelfth Night, which is luckily one of my favorites! We had to create a poster using self-generated (i.e. not in the computer) images, another using only typographic elements, and the final inspired by an assigned artist.

For my self-generated poster, I participated in an in-class screenprinting activity to create prints of both hearts and a symbol for gender fluidity, a constant theme throughout the play. I used masks and layers to blend the self-generated images with the cleaner, exact look of vector graphics, and finally ended up with a color combination and layout I loved.

View the Behance Post Here

Typography Poster

Tools Used: Adobe Illustrator

For the final project in my Intro to Graphic Design class, we were assigned to create a series of posters for a specific Shakespeare play performance. I was assigned to create posters for Twelfth Night, which is luckily one of my favorites! We had to create a poster using self-generated (i.e. not in the computer) images, another using only typographic elements, and the final inspired by an assigned artist.

This typography poster went through quite a few iterations before I hit upon my final idea. I wanted to create a clock using glyphs, but most of the fonts I tried to use did not deliver the results I needed. I ended up using a combination of two fonts in the poster, using Neue Haas Grotesk for the clock itself, and Oswald for the rest of the poster. It’s my favorite of the series because it’s so eyecatching and iconic!

View the Behance Post Here

Artist Inspired Poster

Tools Used: Adobe Illustrator

For the final project in my Intro to Graphic Design class, we were assigned to create a series of posters for a specific Shakespeare play performance. I was assigned to create posters for Twelfth Night, which is luckily one of my favorites! We had to create a poster using self-generated (i.e. not in the computer) images, another using only typographic elements, and the final inspired by an assigned artist.

My assigned artist for the third poster was Massimo Vignelli, a highly prolific Italian designer with a distinct style and an impressive design resume including the New York City subway system. Fans of Massimo Vignelli should hopefully recognize his trademark in the colors, the size variations, and the clean, crisp, minimalistic look. Playing with colors and symbols was my favorite part of this, because I was trying to achieve a minimalistic feel while still communicating some idea of the nature of the play.

View the Behance Post Here

Font Advertisement Poster

Tools Used: Adobe Illustrator

For this assignment, we were challenged to create a poster to sell a font to a designer. The project gave us an opportunity to work with typographic hierarchy in a poster format, much like the Twelfth Night poster series from my previous semester. But while the Twelfth Night posters were meant to appeal to a general audience, these posters in particular are meant to appeal to designers! This assignment was a challenge, as we were meant to advertise to the designers we aspire to be! But as aspiring designers, we know how susceptible designers are to beautiful layouts, clever designs, and lovely packaging.

Neue Haas Grotesk has an illustrious history in its roots as Helvetica, and I wanted to carry out that legacy by echoing Swiss design in my type poster. Designers will immediately recognize the history in the design, and the font I’m advertising will allow them to capture the same look!

View the Behance Post Here

Ursa Books Logo

Tools Used: Adobe Illustrator

The second project for Intro to Graphic Design was both familiar and unfamiliar. We were challenged to create a logo for a fictional company that we would create. We were expected to create name of this fictional company by selecting one category (exhibit or museum, book store, food store, or sporting goods store) and selecting one theme (plants, weather, constellations, animals, countries, or cultures). Given this limited pool for choosing a company name, I decided I wanted to create a logo for a bookstore, based on the Ursa Major and Minor constellations.

Bears are my favorite animals (aside from birds), and I wanted to draw some downright adorable and cuddly bears. I wanted them fat, I wanted them fluffy, and I wanted them snuggly. My initial sketches were very Disney-esque in their first iterations, which is a good choice for animation but not for a logo. Logos are meant to be iconic, and to communicate an idea without excess colors or shapes. You should be able to hit a balance between simplistic and communicative, which was mainly what I struggled with in this project.

View the Blog Post Here

Glyphs Compositions

Tools Used: Adobe Illustrator

For this Typography project, we were assigned to create two typographic compositions using assigned specifications and the principles of design. The finished compositions should feel complete and harmonious where the whole is greater than the sum of its parts. Like the Shapes Composition project, we were limited by strict specifications. We had to create both a sans-serif and a serif glyph composition, using either Neue Haas Grotesk Bold or Stempel Garamond Roman. Each composition had to contain five to eight different glyphs, as well as include at least five unique glyphs. Each composition had to contain at least 5 different elements of typographic anatomy, including a stem, counter space, spine, bowl, and ascender, descender, loop, arm, and/or cross bar. Each glyph had to be all black or all white , and at least 2 glyphs should be black, and 2 glyphs should be white. We needed to showcase the personality of the font itself, by using a variety of glyphs in different sizes and positions.

This project was mounted as a Student Example in the Spori building third-floor gallery.

View the Behance Post Here

Shapes Composition

Tools Used: Adobe Illustrator

The description for the project was to “Create a composition using basic shapes and the principles of design.”. Sounds easy, right? Wrong. We had to start by drawing and inking 48 individual compositions, all different from each other. My creativity gave out around the 5th square, and I had to push myself to finish. From there, we had to progress and create 48 more compositions, either basing them on our original compositions or creating entirely new ones.

The finished project turned out better than I had hoped as a digital product. In actual practice, however, the final project was less than satisfactory. On the morning I had hoped to print out my final project and mount it, every single printer at BYU-Idaho went down, and the issue was not fixed until halfway through class. I had to run back and forth within my breaks in-class to get it printed, and ended up gluing it and mounting it directly after class finished. The lesson learned? Print and mount your projects a few days before! If all the printers decide to give out, you don’t want to be an unwitting victim.

This project was mounted as a Student Example in the Spori building third-floor gallery.

View the Blog Post Here

Editorial Illustration

Tools Used: Adobe Illustrator

An editorial illustration is meant to accompany an article and give the ideas in that article a visual. For this project, I used a Business Insider article titled 7 Science-Backed Reasons You Should Make Art, and focused on the ideas that art is a means of coping, or of comfort. I knew I wanted to incorporate the ideas of mental aid and comfort into this illustration, so I played with that idea. I had to attempt to create characters for this illustration, because I wanted to personify the idea of a drawing, of a creation.

I wanted a fanciful, fantastic illustration that would capture how art feels to me, how art can affect us. The article is all about the benefits of art, and I wanted to visualize that. Creating this piece allowed me to experience some of the benefits listed in the article, and I hope that it will inspire others to create as well!

This project was featured as a Student Example on my professor’s course Pinterest board.

View the Blog Post Here

Gig Poster

Tools Used: Adobe Illustrator

A gig poster is a means for advertising a concert or show in one specific location. The poster is supposed to reflect the feel and sound of the music in a visual format, and gig posters are as vast and diverse as music itself is. For this project, I was inspired by the music of Anamanaguchi, Approaching Nirvana, and Kill Paris. After coming up with some ideas for what I wanted, it was time to turn to the drawing board. I chose the band name “Cosmic Pinball” after deciding that it was an excellent name for a chiptune-based electronic music group.

This poster perfectly reflects how I think the music of Cosmic Pinball would feel. It would feel celestial, psychedelic, a little sultry, but ultimately it should make you think of stars, galaxies, and extraterrestrials. This poster is attention-grabbing and gorgeous. The glowing effect is reminiscent of Vegas neon lights, and the galactic background adds to the dreamlike surroundings. If you listen to specific tracks by Kill Paris and Anamanaguchi, this poster should make perfect sense to you. When I listen to that kind of music, this is what I see. I hope that this poster enables you to see it too!

View the Blog Post Here

Shirt Design

Tools Used: Adobe Illustrator

This was a project I was extremely excited for. The challenge to create my own design and have it printed was something I had been waiting for since the start of the semester, and I intended to give it my best shot!

This shirt echoes some of the most iconic moments and phrases in the movie Mad Max: Fury Road. The character featured on the front is Nux, holding his steering wheel aloft in praise of the sadistic overlord Immortan Joe, the villain of the movie. I used Agency FB Bold, the same font that was used on official posters for the movie, to recreate the battle-cry on the front of the shirt. The emblem on the back of the shirt is typically branded on the necks of his lackeys in the movie, but in the context of this shirt, it’s a subtle piece of iconography that pays tribute to the movie without having to call it out specifically. This shirt only includes four specific colors, five if you include the black color of the shirt. I look forward to wearing this shirt and I plan to sell it online if I can. Even though I hit the artistic wall many times while creating the design for this shirt, and made many mistakes along the way, I am immensely proud of the final product and I love wearing it!

View the Blog Post Here

Digital Imaging Photobook

Tools Used: Adobe InDesign, Adobe Photoshop, Canon T3i camera kit

This project was one of the most arduous undertakings I had ever been assigned to complete in all of the Communications classes that I have taken, here or otherwise. At the beginning of the semester, I thought it would be downright impossible to fill an entire photobook with the images that I had taken during this semester. At the time, I had little to no faith in my photography ability. And although my skills are still a little shaky, I look forward to sharing the fruits of my labors with you. Most of the photos were taken at BYU-Idaho or in Bannack, Montana. Several pages feature friends and family members. Altogether, this photobook encapsulates a semester filled with struggles, but it’s also a beautiful, visual way to capture the memories that I made here.

For this book, I used the fonts Patua One and Oswald from Google Fonts. The photo of me on my Professional page was taken by Rachel Bergman of Gatsby Nouvel Photography. All other photos were taken by me. I created the designs and spreads in Adobe InDesign, and printed the book itself using MyPublisher.

Even though I thought it would be impossible to fill an entire photobook, the process of choosing which photos to include was harder than I thought. As it would turn out, I had so many other pictures that I was proud of and wanted to display than I thought I would have. This photobook is basically a portfolio of my work throughout Spring Semester 2016, and I wanted to see how far I had come. Hopefully, when you look at my photobook, you’ll be able to see the progress that I've made.

View the Photobook Here
View the Blog Post Here