Embed Size (px)
Citation preview
the creative portfolio ofchristian natis
If you like my work, connect with me on LinkedIn | I also post recent work on my blog and online portfolio at www.natisdesign.com
scroll down to view my portfolio
.co
mNatis DesignWeb Technology Services
www.natisdesign.com
Table of Contents
WEBBRANDING FLASH MOBILE
www.natisdesign.com
[email protected] scrolling to view my portfolio
Project: Review a Brew
MacBook Pro
The Project:
The Review a Brew project started as a concept for a web application enabling users to review, and read reviews for, the vast number of beers available to today’s consumers. It had to be as ac-cessible as possible. This required a responsive design paradigm. Review a Brew was built using HTML 5, CSS3, jQuery, Twitter Bootstrap, PHP and MySQL. The web application allows users to sign up, submit reviews and read reviews posted by others. Administrators can edit and remove re-views easily with a built-in admin panel.
Applications:
Adobe Illustrator, Adobe Photoshop, Adobe Dream-weaver, jQuery, MySQL and PHP.
Ai Ps Dw
View ProjectView Projectwww.natisdesign.com
[email protected] down for more details
Review a Brew - Branding
Design:
Review a Brew branding uses crimson reds, golds and black to create a classy look and feel. Rich co-lours give the website a pub-like feel. The amber and gold colours complement the rich ones, creat-ing a connection to the colour of beer.
R: 130G: 5B: 31
#82051F
R: 209G: 5B: 31
#D10829
R: 0G: 0B: 0
#000000
Web-safe Colours
C: 29 M: 100Y: 88K: 36
C: 11 M: 100Y: 95K: 3
C: 0 M: 0Y: 0K: 100
www.natisdesign.com
[email protected] scrolling for more detailsView ProjectView Project
Review a Brew - Desktop
MacBook Pro
Design:
Review a Brew structure uses a fluid layout that adapts to the user’s screen size and resolution. The site is also Retina display-enabled for users with HD screens. The fixed navigation givers users quick navigational access when needed.
Code:
Using HTML 5, CSS3, and jQuery makes Review a Brew compatible with current and future web standards. This project uses MySQL and PHP, al-lowing users to submit new content and display it for others to read. This database-driven applica-tion design allows new users to register, create a profile, and add and manage their reviews. The PHP code driving Review a Brew has been highly opti-mized. This enables fast load times for a better user experience. In addition, GZIP compression mini-mizes file sizes for users with browsers accepting GZIP.
www.natisdesign.com
[email protected] scrolling for more detailsView ProjectView Project
Review a Brew - Mobile
Responsive:
The fluid layout provides optimal viewing of the web application across all devices and screen sizes. A single column displays information to users, allowing for easy viewing on any mobile device.
Navigation:
Review a Brew utilizes Twitter Bootstrap, which enables the navigation to shrink down to a ham-burger icon. Users can access the navigation only when they need to. This makes the screen less cluttered, allowing for a better user experience.
www.natisdesign.com
[email protected] down for more projectsView ProjectView Project
Project: Pac-Man ad campaign
MacBook Pro
The Project:
The goal was to create an advertisement for a product released before the advent of the World Wide Web. The Pac-Man ad campaign was designed and built using a variety of media and technologies, to fully utilize the single-page scroll paradigm. This project was built using HTML 5, CSS3, jQuery, Flash, PHP and MySQL. The ad campaign goal was to get users to sign up for a newsletter featuring upcoming product news and event information.
Applications:
Adobe Illustrator, Adobe Photoshop, Adobe Dream-weaver, Adobe Flash Professional, jQuery, MySQL and PHP.
Ai Ps Dw Fl
www.natisdesign.com
[email protected] down for more detailsView ProjectView Project
Pac-Man ad campaign - Flash
MacBook Pro
The Goal:
The goal was to use Adobe Flash to create an in-teractive advertisement showing users the basic concepts of Pac-Man. Flash was chosen because of its animation and interactive abilities. Although Flash is limited to desktop users, it was the best medium to communicate our goals to users. Com-bining Flash with javascript and jQuery automati-cally starts the Flash trailer when the user scrolls down to it. The Pac-Man ad campaign was de-signed to be a one-page scroller giving users an easier flow to the call to action.
www.natisdesign.com
[email protected] down for more projectsView ProjectView Project
Project: AskinImages Photography
MacBook Pro
The Project:
The project goal was to create a portfolio and e-commerce website for a local photographer. The portfolio portion of the project is focused on dis-playing the photographer’s work and showing the services he provides to the local community. The e-commerce portion allows users to license photos from the photographer for print or web use without the hassle of having to meet in person to complete the sale.
Applications:
Adobe Illustrator, Adobe Photoshop, Adobe Dream-weaver, jQuery, MySQL and PHP.
Ai Ps Dw
www.natisdesign.com
[email protected] down for more detailsView ProjectView Project
Ai Ps Dw
AskinImages Photography - Mobile
Responsive:
AskinImages Photography uses a fluid layout to ac-comodate users on all devices. It displays informa-tion in a single column. This allows users to easily browse and navigate the content with instinc-tive finger movements.
Navigation:
This project uses CSS media queries to display al-ternative styles of the same html optimized for smaller screens. The navigation displays vertically on mobile devices, allowing users easier access to the website.
www.natisdesign.com
[email protected] ProjectView Project scroll down for more projects
Project: Lights, Camer, Access!
MacBook Pro
The Project:
The project goal was to create a Wordpress theme for a local not for profit organization focusing on providing a network of services to advance the presence and participation of persons with disabil-ities in the entertainment and digital media indus-tries. Wordpress was utilized to allow the organi-zation to easily update and change the content of the site.
Applications:
Adobe Illustrator, Adobe Photoshop, Adobe Dream-weaver, Twitter Bootstrap, Wordpress, MySQL and PHP.
Ai Ps Dw
www.natisdesign.com
[email protected] down for more detailsView ProjectView Project
Ai Ps Dw
Lights. Camera. Access! - Mobile
Responsive:
The theme designed for Lights, Camera, Access! uses a fluid layout to accomodate users on all de-vices. For mobile devices It displays information in a single column. This allows users to easily browse and navigate the content with instinctive finger movements.
Navigation:
This project uses CSS media queries to display al-ternative styles of the same html optimized for smaller screens. The navigation utilizes Twitter Bootstrap to provide mobile users a responsive and interactive experience.
www.natisdesign.com
[email protected] ProjectView Project
