The Eat Me Nots Project is an educational interactive website for school aged children. Children are able to learn through a series of problem solving games, and reading short stories with moral values.
To ensure proper navigation for children learning to read; characters and buttons have sound labels on hover. I used HTML and JavaScript to put a sound file in a mouseover event.
To cross platform website games, I directly hard coded the games into the webpage. I used a mix of Jquery and JavaScript in order to acheive this feature.
I chose to develop an addition game impleting the mathRandom function and an onclick answer check. I deveopled the addition game using strict JavaScript.
To engage children in the website, I deveopled the characters to be interactive guides around the website. I hand sketched the characters then traced over in Illustrator.
I created the Eat Me nots logo to be a single symbol that gives the brand identity in a playful way, appealing to the target audience. Using Illustrator and Animate I created a static and an animated vision of the logo.
Serene Beings was a project where the client desired a logo, business cards, and website to be designed in order to market massage services and build new clientele. Also required was an appointment booking form where a holding fee could be directly paid through the website.
To communicate the purpose of the website visually, I designed a slide show from stock photos of people enjoying massages. Using JavaScript I created a seamless slideshow of an array swapping images.
The client required an appiontment form with a specific availability. I customized a datepicker and timepicker to block out the unwanted times and days. I used JQuery to add the timpicker and datepicker and JavaScript to specify appiontment times.
Once appointment form is submitted, the client wanted a booking fee collected. I connected the client's paypal account through a paypal button. Once php validated the appiontment form and sends an email, it directs the user to the paypal button.
Serene Beings requested a logo to communicate is essence to potential clients. I designed the logo to simulate the yin and yang sign with massaging hands. The color scheme also aides in communicating the feeling of serene to the target audience.
Blue Rock Dove Adornments was a group project for brand identity and ecommerce for a client. My role in the design team was as the Art Director, where I was solely responsible for the style guide, logo design, wire-framing, and digital mock-ups.
The client requested turquose blue to be used in the logo design. I designed the logo to be timeless, and elegant. Using negative space, I illustrated the dove and cresent moon on the turquose to acheive the blue rock dove logo.
Creating wireframes gave the client insight into the layout of the website. I deveopled the desktop and mobile wireframes before mocking up the website. After presenting the wireframes to the client, the client was confident in moving forward.
Digital mockups were a great way to get feed back from team members on the direct of the design. Once the team approved the mockups, I hand all files over to the Web Lead. The Web Lead and I conversed several times during the coding stages to stragegize how to achieve the desired layout.
The homepage was developed using flexboxes in HTML with CSS attribute selectors. Using bootstrap as a framework, we implemented a bootstrap carousel. I helped trouble shoot any HTML and CSS problems the Web Lead was experincing.
If you are familiar with www.csszengarden.com it is a challenge for website designers to redesign the website strictly through CSS. My redesign theme was “Aura of Waterfall”.
I wanted to simulate a flowing waterfall for a my background image. In photoshop I created an animated gif using the timeline with keyframes. To get the desired effect, I utilized the liquify tool. Dragging the tool across the neon streams in the image.
After creating the animated gif, I placed it the website as a background image In order to place the image, I called the background-image property. Within CSS, an image should be pointed as a URL.
I explored different styles for the H1 of Zen Garden. To turn the H1 vertical through CSS, I assigned the word-wrap the property of break-word. Lastly, I styled the H1 text with a text shadow of red and then offset the text shadow.
CSS can allow content to be added to any webpage. Using :before and :after selectors in CSS. I caused written text to appear before and after a selected element.
The Movie Trivia Game Project was a creative collabration. Each member of the group was responsible for developing one game level. I developed level two, 90s Movie Trivia.
Here is the main page for the movie trivia game. Each level must be completed in order to move to the next level. With JavaScript the group used onclick events to achieve the advancement upon level completeion.
For level 2 I created a drag and drop game. The movie quote which is the draggable, must be matched up to its movie title image which is the droppable. I used JQuery draggables with droppables that have the option of accept to the draggable.
After the level is complete it sends the user back to the main page to pick the next level. Using JavaScript a counter function was created to ensure the cards are placed correctly. Once the counter function is completed an alert box is launched. Then when the ok button on the alert box is click, the onclick sends the user back to the home page.
The T-THA branding project was a brand identity project, where the client required a logo to be used across all media assets such as; album art, music videos intros, and performance flyers.
Local hip hop artist requested a logo design to represent him as an artist. I designed the T-THA logo to fresh and youthful with an urban style. The logo will mostly be used on album art, business, cards, and in music video intros.
The client requested album art for music single on SoundCloud. I created the album art text using Photoshop. To get the dripping blood effect, I used the liquify tool.
This album art was created for music single mood swings on Soundcloud. Using Photoshop, I layered three images over each other and changed the opacity to convey movement. Lastly, I applied the posertization effect in order to create an animated effect.
This album are was created for a feature in local hip hop blog Bay Area Compass. In Photoshop I used the mask layer tool to cut out the image of the arist. After which I was able to feather the edges in order to have a smooth clean cut out.
