Nick Fabbri

Artist Statement

My name is Nick Fabbri. I am a Graphic and Web Designer, my work is spread across several different mediums due to the fact that for me; it doesn’t matter what tools are available, I am constantly geared to create. For a project or piece of work to considered finished, I have to feel a certain way about it. It may take me hours of playing with different variables before I get that feeling but I appreciate and welcome the struggle.

I constantly see advertisements, packaging, and many other design examples in the modern day that I just shake my head at. I honestly don’t even stop to look and digest what’s wrong with the work, I just know because I don’t feel that feeling that its finished. It is started but unfinished. I have to finish or I can’t live with myself. It’s just the way I am wired.

Design is my calling, I tried mowing lawns and becoming a doctor but it wasn’t for me. I know I have one purpose in this world, to make art.

CSS Archaeology : Background-Image

Background image is an attribute used to add background image(s) to an element of a page. All background-images are set at the top-left corner and repeat vertically and horizontally based on the size of the image. The background takes up the whole size of the element its placed in, including the padding and border of that element.

Background Image & Fall back Color

Background images can be linked to local files or a URL of the file on a public site. It is always a proper technique to set a background-color attribute as a backup because there may be times when not all browsers or devices can load up or support the background image or gradient backgrounds. When a background color is set, it effects all the other colors in the scheme. That background color sets the tone to work off of while building the rest of the site. I like to set the background color and image first and then every section, text, photos, etc is derived from that while keeping the text and sections functional.

Background Image Gradients

Making gradients with the CSS background-color property is much better for command and performance rather than just using a background image of a gradient. CSS gives a user the control all aspects of there colors, patterns and directions of the gradient. There are three kinds of gradients that can be made in CSS: Linear, Radial & Conic. Each of the three has a distinct shape but all three types allow for the user to change the shape as they wish. There will never be a repeat on a background with gradients, they cover the entire page or section. Linear is the most common of the three and the colors change in one direction, top to bottom or left to right. Radial gradients start from a center point and spreads outward like a circle. The designer can choose which side or corner of the shape the gradient ends on. Designers often times will use radial gradients to try and simulate a source of light. Conic gradients are like radial gradients but conic gradients spread around the circle rather than from it. They are more cone shaped. The gradient is evenly divided among the colors starting at 0 degrees and ending at 360 degrees creating a hard stop at the top where the opposite colors bump. A way to avoid this is to add a third color to smoothen the top. (example below). There are websites like CSS3 that show how detailed one can get with the gradient property.

 

Multiple Background Images

 

Multiple images can be used for a background as well as a mixture of images and gradients. When a designer uses multiple background images, their is a stacking order for which will show up in front of the other. Under the background attribute in CSS, the image that is desired to be on top should be first in the list. There are different variables that can be put into the CSS after the image link to change where each is positioned on the page. Many times like in my Code Pen example below, the top image is most likely a logo of some sort as a .png image so the background won’t show over the real background image. Most all modern browsers support both multiple background and gradient background sites

My three property examples in order on Code Pen:

 

 

 

SUCCESFUL GRID DESIGN

A successful grid-based design that I liked was this Taste Spotting website. The website was made over the idea that we eat with our eyes so it’s a large collection of user submitted images and recipes. It’s not a super elaborate design but I feel with what I’ve learned so far about grid design is that using the grid can be a very effective way to properly organize and present a large amount of content. The colors are all whites, greys, and black. This is to highlight and draw attention to the photos which are very colorful and of high resolution. The images can be sorted by date, category, or popularity. When you click on an image of a dish you may be interested in, it opens a new page with that image much larger and under is a detailed list of ingredients, directions, preparations and shopping tips for finding the specific ingredients. So overall, the design of the site is basic like I said but it does accomplish what it’s intended to do. It is very organized and I had no problem navigating around and understanding content. I have some family members who are huge foodies and I sent them links of this website, there’s is thousands and thousands of different food and drink recopies on this site, its pretty fun to noodle around with.

TasteSpotting

 

OUTSIDE THE BOX SUCESSFUL GRID DESIGN

A website I found that I think is cool but also breaks the grid is this Abel Fragrances website. It is a stark contrast to the previous site I talked about. Right when I opened it and saw how the images changed position and overlapped as I scrolled, I could tell that the design of this site was more about making a statement than just organizing products to sell. For each fragrance, there is a nicely designed image of the fragrance in the middle and two images with similar colors or color schemes on either side. As I scrolled down the images on the sides would move closer to the center image and eventually overlap. It feels like a collage of whatever theme or essence each fragrance is trying to capture. In the photo with the cobalt amber fragrance, you can see both images with space in-between the center image. The next photo with the cyan nori fragrance, I’ve scrolled further down so they start to overlap. Definitely a successful site, it feels so smooth and the images are very emotive, I honesty was bummed when I scrolled through them all because all the images on either side of each fragrance go really well with each fragrance. This is definitely my favorite of the three examples I found.

Abel Fragrances

POOR EXECUTION GRID DESIGN

The site I found that is unsuccessful or not done well enough to fulfill its intentions is Arngren.net. They sell bikes, ATVs, and huge variety of smaller off-road type vehicles. The site uses a grid design but it is so cluttered and unorganized, I can’t imagine anyone looking to buy would get to this site and think it’s legit. None of the images are the same size and the text for each image isn’t always in the same spot. Sometimes it is on either side or above and below the image. It is hard to decipher which text goes with what image. It is all in one font which is the only consistent thing about the whole site. The text is in all different colors and there isn’t some sort of guide or categorization for these colors, it’s just random. Another issue is that a lot of the text varies in size. I’m not really an outdoors or off-road type guy but if I was I would look elsewhere for my vehicles.

Arngren

 

 

 

AFFORDANCE

An affordance is the relationship between an object and a person. The relationship consists of how the properties of the object and the ability of the person. The properties of a specific object may appear to be the same for all humans but the affordance is different among different people based on their individual abilities. For example, a grown man wants to open a jar of jam or salsa and based on the properties on the jar, he thinks twist to open and it works out for him. Say a young child wants to do the same, he or she may try but if they don’t have the strength to get it open, they immediately look for a person older and stronger than them. The child may see a jar in the future and think “I’m in the mood for salsa but my parents aren’t home so I’ll just wait until later”. Another part of affordances that exist are anti-affordances. Where affordances are relationships that helps an interaction be successful, an anti-affordance is a relationship that makes the interaction problematic. Say a hockey players stick broke, he or she can’t continue to effectively handle and shoot the puck, the relationship just doesn’t work, they have to go to the bench and get a new twig.

SIGNIFER

An affordance helps determine what action are possible for the user where a signifier is the sign or communication that indicates which action is the most appropriate. When a person buys a new video game for instance, they are unfamiliar with the most effective way to play the game, they may dive in and try to find tips or maybe a tutorial on the basics to figure the purpose and the operation of the game. A signifier is any perceivable indicator that communicates the proper behavior to a person. A stop sign is one of the most obvious signifiers. Not only does it say stop (the direct behavior) but its red (a clue) and so are red lights so even without the word stop, it still is a signifier of coming to a stop. Another example of a signifiers are unintentional signifiers. A person could be headed into the woods when a group of squirrels and deer suddenly dart out of the woods. The person should also head out of the woods because their very well could be a coyote or wolf in there. When some one sees orange stripes, they think construction zone so slow down and be cautious.

MAPPING

Mapping is the relationship between the elements of two separate sets of things. A good mapping uses spatial correspondence between the layout of the controls and the devices being controlled in order to make it easy for the user to figure out how to use the controls. A person can’t have an intended outcome for the action of the correct control without a clear mapping. A good example is a video game controller (I’m staying with that theme), when the controls are understood properly, the user understands that R2 is shoot, L2 is throw a grenade, up on the joystick moves the character forward, and square is jump. Many mappings like my previous example are specific to a certain culture. Any person who’s ever played any shoot-em up type video game, knows the controls are very likely to be: back triggers to fire and the stick to move. Its similar with automobiles because of course everyone is different but any common folk with a driver’s license knows how to stop, go and steer.

FEEDBACK

Feedback is the communication of the results of an action back to the user. A user needs the feedback to know if the control or system is processing their request. Feedback needs to be immediate. A good example is something I learned in one of my previous classes but I heard for every tenth of second that a website takes to load, more and more people will just say forget it and go onto to another site. There can be poor feedback which kind of overdoes it. One I can think of is key sounds on phones, if I type a letter and see that letter on the screen, I am fine with that, I don’t need the annoying beeping each time. I guess maybe for someone with a visual impairment, it would help out a lot but if I can see one feedback, I’m fine with it. When I step an a guitar pedal of some sort I can obviously hear a change in tone or some sort of parameter in my sound but I need that red or blue light to go on for that feedback.

Welcome to Sites At Penn State. This is your first post. Edit or delete it, then start blogging!