Tag-Archive for » ICM502 assignment «

Final Project – Website Design

For my final project, I had the task of adhering to design standards, but also trying to create something unique and different. My project was to create web comps on a portfolio of graphic design work I have done and before starting, I researched several different portfolio designs. I have been taught this for a number of years and it still rings true that it is important to sketch out your designs before running to the computer. This especially is helpful when designing multiple pages. My initial homepage draft was created a few weeks ago, but I definitely had to improve on it. Tom Hanson (in the blog Seeking the truth) was the classmate who critiqued my initial drafts and was partial to my second draft, because there were less visuals. I initially agreed, but after sketching out all of my website comps, I wanted a unifying theme…

Homepage

Homepage

First, my edits to the homepage were to have less text. I replaced my first two projects and their rather lengthy text explanations with four buttons (that also have a torn photograph look, falling in line with the rest of the design) with images of the latest projects and a short two lines on my latest work with only two lines of what the project is. After viewing websites (nationally and internationally), the less is more look is definitely more eye-catching (as my peers have pointed out as well). I did not create this site with an international audience in mind (unless this becomes a real, profitable venture…which is a dream at this point), so I did not want to overload a potential customer with too much text for a site intended to be mainly visual in tone.

The General Layout

I decided to stick with a modified version of the first draft. While the website background maybe seem a bit cluttered, that was a decision purposely made. I wanted an organized cluttered feel to it. The reason being is that I like to stay diverse in the designs I make and I want a viewer to know this right off the bat. You only get one chance to make an impression (so the expression says), so I thought why not show off (in a way) all of my work in a montage sort of way. To contrast this theme, I kept each page relatively simple in terms of text as to not overload the viewer. I choose the banner (with my name and the title of each page) to be a bright color to contrast with the black and white montage created on the background. I went with the “Hello my name is” name badge design simply because it is a clear and simple way of “introducing” yourself on the homepage.

For the rest of the pages, I kept this look for continuity purposes, but also chose each color of the tabs to change with the banner. I did this for aesthetic purposes, but to also “brand” each page so there is no doubt in the viewer’s mind which page they are on and make each page unique.

Portfolio

Portfolio Page

On the portfolio page, the first thing I did (on my instructor’s advice), was change the color of the tab layout from white to purple. I initially wanted all of the colors to be primary and then secondary, but settled on the page being purple because it is my favorite color and the most important page (that I would want to draw attention to). This is also the only page I gave a different look to. I had the black background that all of the other pages have, replaced with a corkboard look. I did this because, I personally use it (the one used is actually my board) to tack on quick post-it notes of ideas, sketches, etc. I used the board to showcase various projects on the board. The basic idea is to keep the page clean and simple. When you click (or possibly highlight if it were a Flash design) one of the six squares on the left, that would reflect in the image on the right. For instance, the Voices of Hope graphic (second from the top) is highlighted (as designated by the Outer Glow blending mode). On the right side, the highlighted item would appear with a brief synopsis of what the project is about. I did this because I didn’t want to redirect to user to yet another page to see the work and wanted to keep things simple from a functionality standpoint.

About Us

About Us Page

For this page, I gave a quick blurb about who I am and why I design. I also took a screen shot from a YouTube video I shot for 501 and pasted it in the page as I think it would be great for the viewers to be able to hear and see who I am and what I do in video format. Lastly, I included a post-it note with a link to a pdf format my professional resume.

Services

Services Page

This page is fairly straight forward with a listing of services I would provide a potential customer. While this is fairly simple in terms of content, I don’t want people to really have to dig to find out what services we provide or have it buried in an About Us section. I would have the links of the services be clickable to specific projects in the portfolio for folks to see examples of the specific services. The montage banners are also to serve as small snapshots of work done in branding, print and web areas.

Blog

Blog Page

I think a lot of websites today have this function as it humanizes the website and helps create a personal tone for the site. I used a real blog I wrote on being in a “rut” in terms of creativity and fortunately, I do have a good amount of blogs I have written on the subject of design, so this would be a function regularly utilized on the website. I would also have the latest blogs scroll down from newest to older on the page with a link to archives. I find that I don’t read people’s blogs as much when I only get the first few lines and a click more, so I would post an entire entry. On the left side of the screen, I included menus to the latest blog archives, popular search categories and a link to the RSS feed. The picture of me down below is the same as the homepage button, which is basically used for continuity purposes.

Contact

Contact Page

This page was fairly simple. I had the page consistent of a physical address and email as well as social media icons as other ways to contact and connect with the site. I think it is important for websites to embrace these forms of media and I tend to trust websites that utilize these progressive forms of communication.

Design Techniques

The smart guides and gridlines were a lifesaver for me on this project. This is something that works much better in CS4 and saved me much time rather than just measuring out with ruler guides as I had done in the past. I also tried to tie in many of the design techniques we had used during the course of the semester. One constant theme is depth. The main banner for each page has the torn effect, which is intended to be placed under the black and white layers. Even smaller elements, like the social media icon post-it on the front page or thumb tacks on the portfolio elements use this concept.  In terms of color, I wanted to keep the look simple, yet prominent. I think the banners gave a great sense of contrast to the busy black and white montage in the background. Another big help when creating graphics, rather than creating them in separate files, I would convert a shape to a smart object and then edit its contents. This saved me a ton of time and was able to make edits within the document, rather than having several windows open.

To me the project was a fun experience that I think may have a possibility of actually creating. It was a great trip looking at old designs I had not looked at in quite some time and designs I thought were awesome even a year ago, just did not hold up, so I had to be very picky with this project. While some of my better work was created working for national brands that I could not really showcase, it is rewarding to know that everything on the page (sans the social media icons) were elements that I created. It may sound kind of self-serving to create a project based on things I have already done in the past, but I wanted to create something that has personal meaning to me and I can be passionate about.

Culturally Speaking

This week, I brushed up on international website design. I never really considered designing for an international audience because, selfishly, I know what I like or at least, what we are conditioned to here in the states. So after viewing many websites on the group exercise and doing some investigating on my own, the international websites look a bit more cluttered than what I am used to, but they are also more information based. I am so used to international trends especially in technology being ahead of us, this surprises me. But why is this? In How Fluent is Your Interface? Designing for International Users, the authors go on to say,

According to Taylor, “properly Iodized software applications, just like properly localized automobiles, toasters, beverages, and magazines, reflect the values, ethics, morals and language (or languages) of the nation in question.”

This was particularly prevalent when comparing the North American versions of automobile websites and the international ones. BMW, by and large were the same internationally, just with more tabs and information. Mitsubishi (when comparing the North American and China sites) were vastly different.

North American Version

Chinese Version

The North American version features a sleek Flash design showcasing the latest products as well as having a menu on the left hand side along with large graphics with little to no text at all. To me, the trend of design has been going the way of less is more here in the US. Whereas, Mitsubishi China’s version looks like the websites here in the states looked 10 years ago. Animation limited to the main banner and a lot of text (as well as a gradient background). In some sites today, you might see a simplistic graphical button (usually 3-4) with a very little text, but in this site there are 9 buttons. The unifying theme is that the sites remain the same in color.

After looking at many international site designs, I might scoff at the layout of these sites (like Mitsubishi China) and the alignment of the layout or the overuse of text, but I realized it is not necessarily just layout differences, but cultural differences. I am so used to the “less is more” mentality, it is easy to forget that other countries may want the information that we tend to skim in our websites. Given that our culture is lives in a “time is short,” DVR, overstimulated way here, it is easy to forget that other cultures design works best for them, because it is the most functional.

Reference:

  • Russo, P., & Boor, S. (1993). How fluent is your interface? Designing for international users. Proceedings INTERCHI ‘93 Conference on Human Factors in Computing Systems: INTERACT ‘93 and CHI’93. Amsterdam, 24-29 April (pp. 342-347). ACM Press.

An Abstract Take Deconstructed

For this post, I used the version of Wassily Kandinsky’s On White II abstract painting I created a while back and give it some animation. For this, I used frame based animation and manually moved around layers of the piece. When I tweened the layers the way liked, I copied and pasted them again, then reversed it. I wanted to give the animation of a look of being deconstructed and then reconstructed so the animation starts and ends with the full painting.

Not So Re-Animator

I have always been weary of animated GIF files. They remind of a late 90s, Web 1.0 style that you might see a website overdose on in a site potentially on Websites That Suck. For my website, I decided to keep animations basic (in Photoshop you don’t really have a choice). I took an original draft of the site background (before I added the tearing motions, which luckily I saved in advance) and had the tearing motion appear on screen. Try as I might, I guess having the paper actually have that tearing animation is probably an advanced Flash animation. To give this a sense of depth, I had the Hello my name is appear from under the torn paper layer and my name appear from the bottom of the torn paper layer in the same fashion. Lastly, I had the “Find Us” post-it note appear from beneath one of the “Latest News” square articles. I would have liked to have the animation have a slight half-circle rotation to it, but when I tried to transform the layer in one frame, the transformation carried over to the next frame.

*For those wondering I choose to have the animation run 3 times, it’s in case you missed it the first time, so you don’t have to refresh the page (NOT something I would do in the actual site).

Overall, I tried to keep the animation creative, but not gaudy. If anything, working with the GIF animation format has really sparked my interest in doing some more complex animations in the future.

A Walk on the Beach and The Moment of Power

For this post, I will be reviewing potential website layouts.

First we have Legacy of the Iron Dragon as designed by the blogger at Now is the Moment of Power. The website is dedicated to Mixed Martial Arts enthusiasts and connecting these individuals together. The underlining theme is to also serve as a tribute to Martial Arts legend Richard Bustillo. So this is a tribute site that also serves a functional purpose to the user, which is a great concept (plus the association with Richard Bustillo adds more authenticity to it).

Iron Dragon - Version 1

Iron Dragon - Version 2

Most of my critique will focus one Version 1, as Version 2 (based on the order they were on the blog) appears to be an early draft with some of the elements that would go into the first version on the post. Right off the bat, I noticed the font for Iron Dragon. Nice bold choice of blending modes that capture the word “Iron” to me. I like the color choices. At first, the word “Dragon” might convey green (of a dragon) or red/orange in terms of fire, but given the MMA theme and qualities the blogger mentioned, it works perfectly. This is also captured really well in the background. Another dominant feature for me is the dragon on the left hand side. Not sure how it was created (pen tool?), but it’s very detailed and a great graphic. I might consider adding a light drop shadow or outer glow (or experiment with some blending) on the dragon to have it pop more. I am not so crazy about the fire graphic coming out of the dragon, though. In fact, I know this blogger can create a really visual “fire” graphic (as seen here), so I don’t really need to give any pointers there. I like the images on the sides, but I might consider using a transparent gradient around the square to help them blend in a little more. Really cool smoke graphic used towards the bottom right. Maybe that is something that can be used on the other pages as well. Lastly, I would maybe use a different color or blending mode for Richard Bustillo’s name to stand out more (also watch the spelling on “to”). If others are contributing to the site, I would also include the “Login” option from Version 2 to the first one.

Overall, I believe some really great graphics were created (especially the background), so I think a very good groundwork was laid out for the rest of the site pages. I also think the rest of the site should flow pretty naturally, given the blogger’s passion for MMA. Great job.

Life's A Beach - First Edition

The next website is from the blogger at Seeking the truth with the design for Life’s A Beach, a site which serves as a travel guide to the beaches of Southwest Florida. First off, I appreciate that the blogger went with two different, contrasting looks and used what photos he had effectively. To be honest, they each have qualities I like separately, but I’ll start with the first one. I think the background on the first edition is a really great shot. The overall imagery is very good, but the text is kind of distracting. It is diverse in color and also font style. The Life’s A Beach font is relaxed in tone, while the destinations on the right and menu options on the bottom seem a bit more rigid. I would experiment with that font to keep a consistent feel.

Life's A Beach - Second Edition

I have to agree with the blogger, the second edition of the draft is more aesthetically pleasing. Given the fact that the audience are beach-goers and vacationers, I would say this is the way to go. First off, writing Life’s A Beach in the sand on the bottom is a fantastic touch. It’s simple but extremely effective. I might consider centering it and scaling it larger for greater emphasis. I love the pictures of the beaches spread out as they are. To me the site has an overall, postcard within a postcard look to it and I think this is absolutely perfect for the audience. If you have the pictures, I might consider having each one be clickable with the title of the destination, this way maybe you can eliminate the destinations on the top of the page and have them somewhere in the picture. By doing this, you could free up some room and make the Ratings – Contact Us text enlarged, but just a suggestion. As I said earlier, I think the pictures are very good, but if the weather doesn’t cooperate, Lynda does provide some great examples of how to lighten up and fix the brightness of a photo, which was a help to me.

Overall, the concept of the website is very good and lends itself to being colorful and visual which the designer has created here. Like the first website, I think this is also some good groundwork for the rest of the site and should reflect in the forthcoming pages. Nice work.

First Impressions

As stated in the previous post, I am creating a homepage for a website that will serve as an online portfolio for my graphic design work. One of the first roadblocks I came across was images to use. A very big bulk of design work I have done was for a nationally recognized non-profit organization. The issue here was if I could use some of the work I had done there in the design (I didn’t want to take the risk), so I just used work from clients that were okay with this along with some projects I have done in school to fill in the gaps.

Draft 1

For the above draft, I decide to make my “first impression” by showcasing my work subtly (or unsubtly depending on your thoughts) in the background set to grayscale. I then used the torn look I used for my fictional movie poster as a way to give the title focus. I choose the bright blue (you might see on a Hello, my name is…tag) to give the name of the company dominance but also contrast to the black and white montage. I chose the tabs up top to have different colors (primary and secondary) to create a balance of color, but also have each one of those colors represent the theme of their page (for instance, when clicking on the red About tab, the color of the Hello my name is would also change to red). To stay in line with the montage look of the site, I also included a post-it note of the social media icons (in a sketched design) to give the viewer other options on how to find us or bookmark us. The articles below the title (which would be aggregated from a blog) are snapshots of some of the most recent work, which I left at only 2, so the page has some balance to it. In the future, I think I would make the articles shorter on the front page.

Draft 2

For this draft, I decided to keep the “montage” theme, but simplify it. I wanted to take my design from draft 1 and turn it inside out in a way. Instead of having the montage as the main background, I changed it to the background of the article boxes, while leaving the Hello, my name is as the main background. I think it has more of a traditional website design to it. Initially, I liked my first design better (it certainly took a while to create), but draft 2 has a simpler look to it, while still keeping in line with my “cluttered montage” theme. While I am undecided on the bright blue background, I do think that it adds sense of contrast to the black and white article background.

I am still very undecided on which design I would move with moving forward (hopefully my peer reviews can help solve this), but at least this design has set up a blueprint to how the rest of the site can look. After all, our website homepages only have one shot to make a good first impression.

Looking For My Creative State

My original concept for a website (way back in the 501 class) was to create a “nightlife” version of a social media site. Creating the idea and pitch was fun, but when it came down to the nuts and bolts of designing that website, it just was not something I was totally passionate about. A hobby turned into a very small side job for me is freelance graphic designing. I have always wanted to create some type of online portfolio, but never really had the time, patience or skill. While I’m still working on that last part, I was checking out some designer’s portfolio and came across a really great site called Creative State. They are a web design company based in Tulsa, Oklahoma and naturally, the site is aesthetically pleasing, but also extremely user friendly.

creativestate.com frontpage (enlarged)

createstate.com (full view)

The design is clean and simple. While I am not a huge fan of the color brown for design, it works because of the contrast of the bright blue word “creative” in the logo. The banner up top is really the dominant portion of the site and words and sketches have a depth and texture to them. I like the projects showcased below the banner (2 per column) as they are straightforward and give the site a sense of visual balance. If I knew very little about design, what I wanted as a potential customer and/or was intimidated by the prospect of finding a company to work with, Create State would lessen these issues. For those with a short attention span, there is also a link up top that describes exactly what the company does in very simple, light-hearted terms. Even if you dislike the look of the site, you can even switch to a “sketch” mode, where it is the same site, just done over with a sketch filter look to it. The site also utilizes a lot of depth with some of the site having a “canvas” look to it, while other spots have what almost looks like wallpaper. I think this site has a visually appealing look and very easy to navigate, which is a great service to its customers.

Note: Within a day of initially researching this site, they have relaunched. The background and color schemes are largely still the same, but the banner has been replaced with rotating flash videos of their latest projects (they have some impressive clients!), but to me it is kind of visually distracting and the site lost some of its simplicity, although it is very impressive visually. I think this relaunch is a better customer experience in the end and showcases the company’s capabilities, so I understand the progression.

At The Movies

For following are posters for fictional movies.

A Man Called Don

This first poster is on Eagleyedon Says… post, Movie Poster for a film called A Man Called Don. First off, I really like the theme and the topic was well researched and thought-out with James Bond and A Man Called Hawk in mind. Good job with the asymmetrical balance with the title leading into the main character, this really give it a sense of dominance and depth. Excellent choice of colors for the background (the red gradient), it fits in perfectly with the character’s robe. In fact, I mistakenly confused the Iron Man robe with a red karate gi (or is it gee?) at first, so it really looks like he has some serious fighting skills, but it really works. I can also appreciation the rhythm in the photos chosen in the bottom sequence. In the future, I might try a transparent gradient to have the photos “flow” into each other more, but a very fun tone set nonetheless. Also for the main title, there is slight pixelation (like in the letters, “A” and “M”). Photoshop can be a pain when you transform letters sometimes, so I would recommend making the text graphic larger and in a high resolution, so when you transform the text layer, you won’t lose the sharpness of the graphic. That aside, I think this a really fun poster (a kid beating up the bad guy) and some really good elements that follow design principles. After all, who doesn’t love a good action flick?  Nice job!

Infant Solitude

My next review comes from Malicreates’ blog, As Individual as you want to be…, for the film, Infant Solitude. Right off the bat, I see a very well executed usage of a filter, in this case the artistic dry brush. I am usually timid to use a filter for an entire image, but I really think it works for setting the tone (the displacement of solitude) of the poster in this case. I really love the font chosen for the credits, it really makes the film look authentic. The child in the background with toy fading into the scenery was also very well done. I like the overall structure of the poster with the title towards the bottom and I also like the perspective choices made. The plot synopsis on the side gives me a greater understanding of the film, unfortunately some of the text clashes with the background making it slightly difficult to read in spots. I see there is a drop shadow around the letters, I might also consider adding a small stroke in the blending options as well to help enforce the ease of readability. I would also use the Character Option toolbar instead of the Free Transform tool for kerning and tracking needs. It had no effect on the design whatsoever, but it saves a TON of time when designing with text. Other than that, I must say that the usage of the filter tool was quite impressive and I think this poster also followed the design principles very nicely. I think the images used were very good and the overall concept is very original, I’d be lying if I wasn’t curious as to who wins? Great job.

Overall, I have reviewed each of these bloggers’ design work at different times and I must say considering that I believe that they have not had a ton of exposure in Photoshop, both have done a really great job in a very short period of time. Kudos to you both!

Back To School

For this piece, the goal here is to create a design using exclusively fonts. The concept here is very simple, a classroom, but bring restricted to only fonts made this difficult. I used KidTYPERuled as the font for the blackboard. I also gave the board a perspective with the transform tool. For the apple, coffee mug and coffee steam I used letters, rasterized them and used to warp tool to manipulate the shape. For the table, I used two letter “Ts” and made the tracking to bring them closer. Certainly not my best design, but an interesting challenge given the restrictions.

A Blogetery in Motion Picture

For this post, the goal is to create a fictional movie poster that has a sense of depth to it. The idea for the movie is that I am a guy that never knows when to keep his mouth shut and the consequences that happen as a result in hilarious fashion. I wanted to create an old school style mug shot line up for me to stand in front of (I just used the line tool here).  In the middle of the screen and to convey a sense of dominance is the title, Sit Down and Shut Up (loosely based on what a teacher told me when I was 13). The font used here is Abadi MT Condensed Extra Bold. I also lowered the tracking so the title has a sense of balance, but still stands out. For depth, I was really inspired by the poster for the film, Eternal Sunshine of the Spotless Mind.

Eternal Sunshine of the Spotless Mind, 2004

I liked the layers having the torn look to represent the many layers of the characters of the film, until they are torn down to a layer that hardly remembers anyone. While my poster may not have a deep-seeded meaning like that, I wanted the layers to tear down to the main message, in this case the title.

Sit Down And Shut Up

The torn edge look was certainly the most complex and challenging part of the design. I really wanted to give this piece a strong sense of depth and I even used other projects from my 502 class to do so. The bottom layer with the “newspaper look” is really just the About Blogetery section on this blog, but I cut in pasted it in a layer with Century Old Style font and added a destructed texture to it to give it the worn look. The blue torn layer is just the cereal box to Bloggies, but I thought the color gave the overall poster a great sense of contrast to the rest of the colors. I also used my abstract recreation as the top torn layer to help further the sense of color contrast. The torn look is a bit tricky to achieve, but I did find a great tutorial to help me achieve a rough understanding of what to do. For each layer I would use the Lasso tool to cut the picture in half. I would then do a “spotty” job of erasing the edges with a particular erase tool then go over that with a similar off-white brush tool to give the torn paper a sense of depth. I then took each of the torn layers and rotated them (to give it a busy feel) and added a drop shadow to each one for some depth. The process is long to explain, so for folks curious, I couldn’t find one on Lynda, but check out this great tutorial that goes more in depth.

Aside from the mug shot line-up, which one of my friends pointed out was in the film, The Usual Suspects (doh!), the last elements I used was the tag-line text up top (also in Abadi MT Condensed Extra Bold) with a small bevel to stand out. Also used was SF Movie Poster Condensed (a very popular old movie poster font) on my mug shot card, in this case used to feature the cast and crew like a traditional movie poster. For some more balance, I included the “Blogetery in Motion Picture” on the bottom left corner and “Coming Spring 2011″ on the bottom right.

Overall, this was a definite challenge, but I think I was really able to capture depth and almost 3D perspective pretty well. I can’t really think of another way to end this blog, so I’ll shut up now (pun intended).