Chris Schiotis

Illustration and Design Portfolio - Web Design Work

Tutt'a Post' Trattoria - Neapolitan for "It's All Good"

Tutt a Post home page
The Home Page
Tutt a Post about page
The About Page
Tutt a Post directions page
The Directions Page
Tutt a Post dinner menu page
The Dinner Menu Page

These are screen captures from four of the principle pages. The site was designed along side the owner of the restaurant. The owner is Daniele Morra (in the top-left corner of the About Page). We were operating under certain stringent limitations and we were quite happy with the results. The site is streamlined to perform well with limited signal strength. We anticipated that most site users would be accessing the site via a hand-held device, with the decided majority being smart phones.

Tutt a Post home page
The Contact Page
Daniele preferred to route communication via his Facebook page. He connects with his customers directly through that platform.
Tutt a Post home page
The drop-down menu

The drop-down menu for the Menus is a basic Bootstrap component. We modified the component to accommodate the different brand images of the 'app' driven independent delivery services Daniele does business with. The menu at Tutt'a Post' Trattoria is authentic Neopolitan and I'm sure you'll agree with me that the food is Fantastic!

Check them out at Tutt'a Post' Trattoria - Neapolitan for "It's All Good"

Mobile home page
Mobile about page
Mobile directions page
Mobile dinner menu page
These are screen captures from an Android device. The site loses no functionality at these reduced aspect ratios.

Brunello Trattoria

Brunello Trattoria Home Page
Brunello Trattoria About Page
This is an older fixed width site that bears mentioning for a number of reasons. First, it is still up and running. Second is the satisfaction of the owner. I had the pleasure of working directly with the him, (Bruno Morra) to establish a look that had the same 'feel' as the inside of the restaurant. Utilizing imagery from the inside was the first step in that direction. Our color palette was chosen from the same color palette that was used for the interior decor to help arrive at a solution that both unified and established harmony between the web presence and the brick and mortar restaurant.
Brunello Trattoria Dinner Menu Page
I did much of the photography for the site. I also designed all of the repeats on the menu pages. (This is something I really like to do)
Check out the site here: Brunello Trattoria - Tell Bruno that Chris sent you!

Chris Schiotis' Portfolio Site

This is a screen capture from the initial concept for this site. I spent some time developing it and mention/show it here to open the conversation about 'flexbox'. The new CSS3 display module (actually the first draft was published in 2009), makes page layouts like the one shown above possible without using any floats or percentages. I was eventually compelled to organize the different categories of work, but am still using Flexbox throughout the entire site. Almost all of the site navigation on all of the pages utilizes Flexbox.

The diagram shown above represents the basic html structure of the various 'project' pages. Diagrams such as this are the language of front-end development and are vital for collaboration and project sharing.

User Interaction Diagram

This image above shows the code structure for the home page navigation.

Below is a div tag diagram showing the same structure.

Here is an example of that interaction:

The 'fade' magic is of course associated with the css. There is a different :hover class on the <img> and <p> elements.

Interactivity should be interesting and compelling. It should draw the user in to explore the experience of the website where it is deployed. It is not just about selling things, although the 'internet of things' is wonderful for that... Interactivity is the experience that occurs as the site visitor uses the site. It should be very interesting!