abarso2

Anthony Barsotti – Assignment 13

Over the next week I have to finish a 3D digital art project in Maya with which I may have bitten off more than I can chew. In addition to that I have to finish printing and mounting photos for my film class and add the finishing touches to my portfolio site, including a php contact form. I’m also going through my projects for this class still and tweaking them for the final, some a little bit, some entirely (I’m looking at you HTML email). It’s going to be a mildly stressful week for sure.

Bacon

Gridster

Anthony Barsotti – Assignment 12

Classwork

Slider

The first of the four talent placement agency sites I found is located here. I think the overall design is clean but the color palette could use a few spots of vibrance instead of being completely subdued and muddy. There are also a few legibility problems on the site, mostly with their image slider where headlines have a harsh and distracting text shadow applied to them. The second site I am comparing is here. This site is more successful than the previous in that it has a more exciting, vibrant color palette but its logo is fairly plain and lackluster and I’m not crazy about the shade of green that they chose. Some of the images that are displayed below the fold (mainly the social media icons and the “We Made the List” image) are low resolution and I think custom social media icons that enforce their color palette would help to really tie the site together. The third site is found here and I think it is marginally more successful than the previous. It has a nice clean design with a nice color palette and a consistent design throughout. The site is very text-heavy though and could use more images to add interest to its pages. Finally, this gem is the first result for a Google search consisting of “talent placement agency.” I think it speaks for itself but the jumping (falling?) construction worker is a nice touch.

Anthony Barsotti – Assignment 11

isotopeblogtheme  Idea for a personal blog that utilizes Isotope.

Isotope

Critique Of Brandon Peters’ Assignment 4:

I think Brandon has done a very successful job with the layout of his Vdara re-design. I think that the proportion of the slider to the sidebar next to it is handled very well and suggests the Golden ratio somewhat, creating a very aesthetically pleasing division of space. I would change the size of the navigation bar and the size of font size of the navigation links because right now the navigation bar is competing with the banner. I think he could also create a “ribbon” effect on the navigation bar by adding darker triangles to the bottom left and right corners of the navigation bar (this will give the illusion that it is wrapping around the page itself). I also think that for the arrival date and departure date boxes he should utilize the color scheme of the calendar icons to the right of the boxes. This will provide the user with a more legible, higher contrast solution. I would use the same scheme for the social module’s background. As it stands, the mid-grey background doesn’t offer enough contrast and the text is somewhat lost and the Twitter Icon begins to vibrate a bit. Overall though the design has been handled very well and I think with a little bit of tweaking, it could be a very strong piece.

 

Anthony Barsotti – Assignment 10

Sadie Nash Scrollorama

Blog Post

The Tuts+ Network of websites include two sites that I really love: Webdesign Tuts+ and Net Tuts+. I have learned an immense amount from their in-depth tutorials, both written and video. I think that anyone who is interested in web design or development should follow them closely because their tutorials cover such a diverse range of subjects. Recent posts on Net Tuts+ have included tutorials on Ruby on Rails, PHP frameworks like Laravel, and an especially interesting tutorial series where they go step by step on how to build a Twitter clone called Ribbit, starting from the design portion (where they utilize the stylesheet pre-processor LESS to make CSS more efficient) and then creating the actual application in Ruby on Rails (what Twitter actually uses), PHP, and a Python framework called Django. They go through the process of creating custom MVC frameworks with each of the languages from scratch which I found very useful.

Webdesign Tuts+ includes posts that deal more with design skills and best practices with a few HTML, CSS and Javascript tutorials thrown in to help readers to actually create the real, working version of what they have designed. Their posts cover everything from web typography to introductions on how to use stylesheet pre-processors like Sass. Their site also includes tutorials on how to create interactive elements on your sites utilizing Javascript or JQuery.

Overall, the entire Tuts+ network is extremely useful and I recommend them to anyone who works in a digital medium. Their network is constantly expanding and currently includes sites that cover After Effects, audio production, computer craphics, app development, and even crafts. All of their sites can be accessed via any Tuts+ website at any time by clicking the dropdown arrow next to the logo in the upper left-hand corner.

Anthony Barsotti – Assignment 9

Kuler

The site I chose is Adobe’s Kuler. It is an interactive color picker that allows you to create color schemes quickly based on various types of schemes like “Shades” and “Complementary.” Kuler is a very powerful tool and it outputs hexadecimal code underneath each swatch so that you can quickly copy the code to any Adobe application that supports hexadecimal codes.

Flash Animation

Anthony Barsotti – Assignment 7

pitchforkscreenshot

My favorite site is Pitchfork because it allows me to access reviews of artists that I like as well as listen to new tracks once they are released and stream full albums before they are released. What makes Pitchfork unique for me over sites like Spin or Gorilla Vs. Bear that serve similar content is that Pitchfork employs very creative and interactive design throughout their site. Their new feature “Advance” allows users to stream entire albums before they are officially released while you are able to scroll through multiple different images that help to compliment the listening experience. Their “Cover Story” features are especially interesting to read because they utilize a parallax scrolling effect that allows text and images to change, appear, disappear, and more to give an animated effect. Overall, I find myself visiting Pitchfork numerous times each day, not only to stay informed on the latest music news and reviews, but also to see what new interactive pieces they’ve employed.

Here is my Facebook layout for Stay:

stayfacebook

Anthony Barsotti – Assignment 6

Sequence.js

Tutorial #1 (Blur Background)

Tutorial #2 (CSS Typography)

GameSalad

Anthony Barsotti – Assignment 5

Jquery Alert

HTML Email:

htmlemail

 

Landing Page:

landingpage

 

Parallax Page

Anthony Barsotti – Assignment 4

In regards to the article, I completely agree with the idea of designers knowing how to code. When someone who doesn’t know how to code attempts to design a website in their program of choice (be it Photoshop, Fireworks, Gimp, etc) I feel that there is a lack of understanding of what they can actually do when it comes to developing the real site. Knowing the boundaries of what can and can’t be done with code is extremely beneficial during the design process because it allows you to design in a plausible way that can actually be created instead of something that looks great in Photoshop but is either impossible or will require a ton of Javascript or CSS3 that won’t be compatible cross-browser. Designing with what can be done with code in mind also makes the design to code process much simpler because if you design with things like padding and margins in mind, your design will not differ much from what the final result will be most likely so long as you know how to actually code what you’ve designed.

wynnrevised Here is a jpeg of my revised layout.

Assignment 4 PSD

Coded Layout

Anthony Barsotti – Assignment 3

To me, Las Vegas thrives on the idea of cheap thrills. There’s cheap, all-you-can-eat buffets all over the strip, magicians, and bright lights across every square foot. However, there’s another side to Vegas that is extremely elegant and quite a few hotels on the strip possess this quality. The hotel that I was assigned, The Wynn, is one of these hotels, displaying gorgeous architecture and various upscale attractions including a golf course. I was surprised to find, though, that their current website lacks this elegance and comes off as a bit “cheap” for lack of a better word. When you first visit the site, there is audio that automatically plays (which is really a really obnoxious feature on any website, in my opinion), a flash animation that is semi-realistic but still has an awkward animated quality to it, and the page lacks a footer — something that I find really ties a layout together while adding an immense amount of navigation links, contact information and social media icons. For my re-design I replaced the flash animation with a still image that would actually be a Javascript slider in the final, coded layout. I also added a footer including the features I mentioned earlier and replaced the concierge widget with one that has a black background containing all of the features and is now shifted to the right. The reason for shifting it to the right is so that on inner pages that have a secondary navigation bar on the left side, the concierge widget doesn’t interfere with the navigation. I kept the color scheme that they currently use for the most part, with black background wrappers and white/light-grey text. I also changed the text throughout the pages from all-caps to a more legible system that uses a capital for the first letter and the rest lowercase (as you would normally write).

Here is a gallery of screenshots from their current site:

Here is a gallery of my redesigns:

Here is a download link to the original PSD’s including all of my layers:

Assignment 3

Anthony Barsotti – Assignment 2

Assignment 2

Anthony Barsotti, Assignment 1

Assignment 1