the creative portfolio of christian natis

Size: px

Start display at page:

Download "the creative portfolio of christian natis"

Juniper Norris
5 years ago
Views:

1 Natis Design.com Web Technology Services the creative portfolio of christian natis If you like my work, connect with me on LinkedIn I also post recent work on my blog and online portfolio at scroll down to view my portfolio

2 Table of Contents BRANDING WEB FLASH MOBILE keep scrolling to view my portfolio

3 Project: Review a Brew 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 accessible 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 reviews easily with a built-in admin panel. Applications: MacBook Pro Adobe Illustrator, Adobe Photoshop, Adobe Dreamweaver, jquery, MySQL and PHP. Ai Ps Dw scroll down for more details

4 Review a Brew - Branding Design: Review a Brew branding uses crimson reds, golds and black to create a classy look and feel. Rich colours give the website a pub-like feel. The amber and gold colours complement the rich ones, creating a connection to the colour of beer. Web-safe Colours R: 130 G: 5 B: 31 #82051F R: 209 G: 5 B: 31 #D10829 R: 0 G: 0 B: 0 # Print C: 29 M: 100 Y: 88 K: 36 C: 11 M: 100 Y: 95 K: 3 C: 0 M: 0 Y: 0 K: 100 keep scrolling for more details

5 Review a Brew - Desktop 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: MacBook Pro Using HTML 5, CSS3, and jquery makes Review a Brew compatible with current and future web standards. This project uses MySQL and PHP, allowing users to submit new content and display it for others to read. This database-driven application 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 optimized. This enables fast load times for a better user experience. In addition, GZIP compression minimizes file sizes for users with browsers accepting GZIP. keep scrolling for more details

6 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 hamburger icon. Users can access the navigation only when they need to. This makes the screen less cluttered, allowing for a better user experience. scroll down for more projects

7 Project: Pac-Man ad campaign 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 Dreamweaver, Adobe Flash Professional, jquery, MySQL and PHP. MacBook Pro Ai Ps Dw Fl scroll down for more details

Pac-Man ad campaign - Flash The Goal: The goal was to use Adobe Flash to create an interactive advertisement showing users the basic concepts of Pac-Man.

8 Pac-Man ad campaign - Flash The Goal: The goal was to use Adobe Flash to create an interactive 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. Combining Flash with javascript and jquery automatically starts the Flash trailer when the user scrolls down to it. The Pac-Man ad campaign was designed to be a one-page scroller giving users an easier flow to the call to action. MacBook Pro scroll down for more projects

9 Project: AskinImages Photography 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 displaying 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 Dreamweaver, jquery, MySQL and PHP. MacBook Pro Ai Ps Dw scroll down for more details

AskinImages Photography - Mobile Responsive: AskinImages Photography uses a fluid layout to accomodate users on all devices. It displays information in a single column.

10 AskinImages Photography - Mobile Responsive: AskinImages Photography uses a fluid layout to accomodate users on all 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 alternative styles of the same html optimized for smaller screens. The navigation displays vertically on mobile devices, allowing users easier access to the website. scroll down for more projects

services to advance the presence and participation of persons with disabilities in the entertainment and digital media industries.

11 Project: Lights, Camer, Access! 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 disabilities in the entertainment and digital media industries. Wordpress was utilized to allow the organization to easily update and change the content of the site. Applications: Adobe Illustrator, Adobe Photoshop, Adobe Dreamweaver, Twitter Bootstrap, Wordpress, MySQL and PHP. MacBook Pro Ai scroll down for more details Ps Dw

12 Lights. Camera. Access! - Mobile Responsive: The theme designed for Lights, Camera, Access! uses a fluid layout to accomodate users on all devices. 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 alternative styles of the same html optimized for smaller screens. The navigation utilizes Twitter Bootstrap to provide mobile users a responsive and interactive experience.

WIKISYS TECHNOLOGY INTERNSHIP PROGRAM

WIKISYS TECHNOLOGY INTERNSHIP PROGRAM WEB DESGINING Create layout Design Photoshop Html 5 CSS 3 Responsive Website Bootstrap GIF Animation Flash Dreamweaver Java Script JQuery FTP File Uploading Print