technology

When creating my website pages, I wanted to use the criticism from my classmates to make it a little less boring.  In my head, I wanted to create a clean website that was easy to navigate, because these are the types of websites that I like and that I feel most people find appealing.  So from my rough draft, I first made the boxes on top a little more lively by changing the font to something more unique.  I also added icons to find me on Facebook, Twitter, and also an RSS icon.  I also changed the font in my header to make it a little more “sporty,” and I think that this font worked a lot better.

Next on my homepage I wanted to get rid of the floating head, so I used the magic wand on the original picture to add more of my shoulders to the it, and enlarged it so that it looked 3D and like it was popping out form the banner.  The drop shadow also added to this effect.  I think having my face on the homepage is important, because it adds a human element to your website.  People will know what the person writing the article looks like, and I think this gives the website more credibility.  All the photos on the website were taken by me, so at times it was difficult to find pictures that matched what I was writing about.  All of the writing on the website is also my own.

I also changed some of the colors from my rough draft to make it more aesthetically appealing.  The arrow for the videos was also scaled down to make it look more realistic.  In my following pages, I used the same design and color scheme, but added a Twitter feed on the left.  I think that this is important, being a social media program, and added to the appeal of the website.  I also liked the balance of these pages.  For my pages, I added a Golf page, a College basketball page, a Videos page, and then a About me and Contact page.  I had to adjust the kerning of the letters in the banner so that they looked more aesthetically pleasing, and added a drop shadow to make the letters stand out more from the dark blue color.  I liked the balance of my pages and felt that everything lined up for the most part.  My goal was to make the website look clean, sporty, and unique, so I think I accomplished this.

In the Contact page, I used icons for Facebook, Twitter and my resume.  Users would be able to click on these icons and then they would be taken directly to those websites.  I also think that in the About Me section having another picture of the author is important, as it shows a human side to the website and gives you more credibility.  In all this was a difficult yet fun task, but I now can say that I am much better at Photoshop because of it.

This week’s reading and lecture dealt with design for international users. Having never been off this continent until I went to Europe last June, I quickly realized not everything is done like we do here in good old Connecticut. Language even in England, where the similarities aren’t even that different, have many differences in actuality. I quickly realized this when someone asked me if I was in the queue. I politely said “What?,” but little did I know that queue is the same thing as standing in line. I’m so uncultured. But this got me thinking about how important design is if you are looking to reach audiences across the globe. Different colors have different meanings in many countries, along with other things such as images and symbols. Also, some people don’t read a flow of text the same as we do in the States. So when designing a website that could reach beyond these boarders, you have to be careful of the context.

I think in the future we will still have to foster to each countries unique traits. Differences in cultures is what makes this world such a unique and interesting place, so I don’t see us becoming unified with everything we do in the near future. You should definitely take in consideration certain colors, such as red, that have meanings for happiness and caution in differing cultures. Also, images are important, so you have to be sure to use images that are universal, and not images that only you and your local population will understand. It can also effect your aesthetics of your website, making it very confusing to some people and thus killing its usability you tried so hard to create. So remember these things, and think outside your own bubble when creating a website design for a universal audience.

http://yourstofind.quicm.net/blog/wp-content/uploads/2010/04/hacku_animation2.gif

For this first animation, I wanted to have  little fun and make my picture from my homepage spin around.  I have the .jif scheduled to spin three times, so click the link to view the animation more than once..  Hopefully this animation will make my page seem a little more fun.

http://yourstofind.quicm.net/blog/wp-content/uploads/2010/04/hacku_animation21.gif

This second animation would be in the top left corner of the page, and hopefully liven up the boxes a little bit and make them more unique.

And here is my new homepage after some of the critiques I received (click to enlarge):

1.  EagleEyeDon

These two homepage designs for a music group in Connecticut are very unique.  I like how EagelEyeDon broke away from a typical website of boxes and made it more visually pleasing.  In the first design, the pictures are morphed in a cool way that it definitely gives the page some depth.  My favorite is the second design, however, because it seems a little more organized and clean.  I think the giant picture of the microphone is a nice use of a picture that instantly tells the viewer what the website is all about; music.  The links on the right are well placed on the page, but my only suggestion would be to play around with the different fonts for the word VINTAGE, because that font just seems a little too plain to me.  In all, very creative ideas and a good start to a homepage. I also like the colors and the use of the gradient tool in the second homepage, and it is pleasing to the eye.

2.  Hall’s Mark II

As always, a very creative piece form Hall’s Mark.  In the first design, I think the color scheme works great and is visually pleasing.  The links at the top seem to almost pop out of the page, giving it a cool 3-D effect.  My only critique would be to change the font for the main banner on the page, because the text seems a little grainy on the edges, so maybe try to smooth that out or change the font altogether.  In all, it is very well organized and balanced.  The second design is also great visually.  I like the font on the banner much more here.   You may want to take some of the images out of the background however, because there seems to be too much going on for the eye to focus on the main text.  Also, maybe it’s just me, but I like my text to be normal and not slanted on a website, because it makes it difficult to read sometimes.  Very creative though, and a great start to what looks like a very cool homepage.

1. This would be my first choice for a homepage (click to enlarge):

2.  My second creation (click to enlarge):

These are the two webpages I designed for Yourstofind.com, a domain that I purchased earlier this semester for a music blog I was messing around with.  My goal is to change the theme of the blog to sports in the near future, because my main focus is to become a sports journalist.  This blog would help to get my articles online for public viewing.  My favorite design for this project was the first one.  I have always been a fan of websites that have a clean, crisp look to them.  I think it screams class, which is definitely what I’m all about.  The Color Wizard was a major help for me and I think I was able to choose colors for the design that were very complimentary to one another.  For following pages, I plan on using similar color schemes, with an emphasis on a clean look and organized, fun content.

In my blog, there will be a variety of multimedia tools to help make the site an experience for my users.  There will be polls to gain user input, self-produced video and weblogs, a weekly podcast of the latest sports news, and my own photos from events and games that I attend.  Also, there will be my articles that I write on all of the hottest new sports topics.  This website will be a destination for all sports fans, and it will also have a humorous twist and make the fans come rushing back for more.  All of the photos I’ve used in these designs were my own, and I take pride in good photography and have developed a passion for it over the years.  I think photos can tell a major part of your story, and also help to make your pages beautiful and engaging.

1. Me, Myself, and Blog

Great use of the background image and turning the opacity down to give it a cool effect.  Also the gradient tool worked well to tone it down towards the bottom of the image, but also maintain the brightness.  I lived in Providence last year so I know exactly where that is.  Also, a great job with the titles and drop shadows, it really made ONE WISH stand out nicely.  The Star Wars-ish letters in the middle of the poster look great and give the poster depth.  The only think I would suggest would be playing around with the tracking or scale of the letters a little bit more to spread them out and make them more legible.  Other than that, this is a great poster, and the photos you selected worked exceptionally well in my opinion.

2. Eagleeyedon Says…

I think there was a great use of image placement here to create balance in the poster.  The boy on the right was clearly there to offset the text on the right, and I think that worked very well.  The title A MAN CALLED DON is done in a way that it gives the poster some great depth, as the text looks like it’s going off into the distance.  Good  job with the saturation and creating a good color balance on the poster.  The action photos were there to show a kind of sequence, and I think it works well for the most part.  I would suggest maybe using 4 images to show that sequence to create a better balance within the boxes.  Great job overall.

For my website design, I wanted something that was clean and aesthetically pleasing.  A website that has design resembling what I am trying to accomplish is Etsy Blog.  My blog is going to be geared towards sports, but I would still like to have this feel to my homepage when users log in.  First off, I think this blog is visually beautiful.  It promotes functionality and will bring people back to my website.  There are also a variety of pictures and videos added to the webpage that add to the experience when coming to the site.  The pictures have dominant colors and attract the readers attention, and are even able to tell part of the story.  The site also does a good job of playing around with illusions in the banner, and there are aspects such as the “hello” on the fingertips that create depth and a 3-D feel.

There is also evidence of things such as playing with the texture gradient or with the superposition, where closer objects cover more distant objects.  Vertical position can make objects further below the horizon feel closer, and shadowing can suggest depth.  There is a good use of gradient in the banner, as the color becomes lighter as it goes across.  The balance of the pictures and videos is also important, as shown in this blog. The homepage on the Etsy Blog also shows order with the use of lines.  There is also a great mix of cool and warm colors, which helps to translate a good balance.  There also seems to be use of tracking and kerning between the letters, helping to give them some more space and a better aesthetic feel.

For my movie poster, I fist wanted to create some test at the top of the poster.  For this I used the words “CUTE. LOVABLE. DEADLY.”  I changed the word deadly to a deep red to add some character.  I then clicked command and clicked the layer to select the words, and after rasterizing the layer I was able to create my wall of text by holding down shift/option/command and hitting “T” on my Mac.  I then took a less than ferocious picture of my dog and dragged it onto my poster.  I transformed the picture to make it fill the entire canvas.  I then made the text and image layers a clipping group to give it a cool effect.  I changed the fill and opacity settings to make it look better, and give the background a color that I felt worked with the rest of the poster.  I then went into the layer styles and activated a drop shadow.

I then included the title of the picture, “THE BEAST,” into the poster, but wanted to change the kerning so I adjusted that to make the letters a little tighter. I added another picture and of my dog and clipped the layers together, and added a drop shadow to the test to make it look as if it is hovering over.  I also added a stroke to the test to help it stand out.  I still wasn’t liking the legibility for the text, so I used the gradient tool to help THE BEAST stand out a little bit more.  I then added May 22 under the title, and added the tag line “This year, let sleeping dogs lie” at the top.  I added a stroke to that text as well so that it stood out from the white hat on the dog.

For my business card, I first took a picture of a baseball I had laying around in my garage.  I pasted it onto my canvas and enlarged it so that it filled up the canvas, and then dropped down the opacity to give it a cool effect.  Using the ellipse tool I drew a circle and then added text along the path with the word “BASEBALL.”  I then made a copy of the layer and added “CARDS” and dragged that to the bottom of the circle with the path selection tool.  I brought the word “CARDS” inside the circle, and then changed the kerning.  I added a stroke around the letters, and also added a custom shape of a crown to the middle to add to the design.  I merged the layers together and created a vector mask, and added a texture filter to give the design a little more aesthetic.  I then rotated it and moved it to the right side of the card.  I then created MIKE’s in a font I liked and added the same texturizer.  I also included my address underneath, and rotated it to make it match up with the logo. I then took a picture of grass in my yard and added it to the card, changing the opacity so that you could still see the stitching of the baseball.  I kept the text black because I felt the color went well with the color of the background aesthetically.

For Assignment 4B, I chose to depict the word “giraffe.”  First, I had to make a path with the pen tool that resembled the neck and head of a giraffe.  I then chose the text tool and chose a point on my path to begin typing.  I picked a font that I thought resembled something “wild.”  I had to increase the text size, and also stretched the text to make it look like a giraffe’s neck and the “e” resembled the head and the “f f” resembled the ears.  I then found a picture of a giraffe and used the eyedropper tool to pick out some of the colors on the animal.  I used the gradient tool to blend them in, and I think this gave it a cool effect.