Tag-Archive for » website ideas «

Web Design For The Non-Web Designer

I have posted a lot about graphic design on this blog. You have read my words and perhaps heard my voice (on this video), but you have not really seen a lot of my work. I have alluded to some of the projects I have worked on, but trying to showcase them all is not easy, especially since I am not a web designer. However, as a graphic designer, I am very specific in how I want to show my work. For a while now, I have been looking into a customizable, online portfolio to show my work. Without knowledge of coding, HTML or CSS, finding reputable (and free) options are limited.

Wix

Wix.com allows for some Flash animations and is customizable. The widgets and apps have features that allow you to connect with Google Maps, PayPal and RSS feeds. The downside is that it takes too long to edit and you are often limited to what templates are available. Also there did not seem to be a way for me to link up a widget on this blog, thus not as much connectivity between online platforms. From a website with potential to…

Web.com

I signed up for web.com last winter. Big mistake. It is free for 30 days, but they still have your credit card information on file and will charge you when the trial runs out. Since it is a publicly traded company with 275,000 subscribers, I assumed the site would be legit. I called just to make sure the site was customizable for my needs and the operator assured me they were. They answered my questions a little too swiftly, making me suspicious from the start. The available templates were laughable and something you would find on Websites That Suck. I later found out that there was very little customization on the user end and if I wanted any of the advanced features, I would have to pay for them (NOT what the operator told me). Even the cancellation process was a hassle. When you do a Google search on web.com one of the auto results is “web.com scam.”

Lesson learned. I just wanted to have a level of independence to showcase my own work and be taken seriously.

Coroflot

I was initially hesitant to use coroflot.com. It seemed very bare bones without a lot of customization. The more I thought about things, I realized that while web design is a goal for the future, I want to show my work now. I remember choosing Facebook years ago over Myspace. I did not want to deal with all of the add-ons and features that Myspace had. I wanted a clean and (at the time) simple interface that Facebook provided. With Coroflot, I didn’t have to be ashamed about my lack of coding skills to create my own personal and professional portfolio. The layout puts everyone in the same boat, while making your work speak for itself. While not overly flashy, Coroflot also allows you the option of placing a badge (similar to embedding a YouTube video or Facebook Fan Badge) to your own website (as seen below).


view my portfolio:
coroflot.com/faccento

It is not the end all of what I want to do. The goal (as I move forward in my graduate program and career) is learning the ins and outs of web design. In today’s job market, the lines between a graphic designer and web designer are blurred. A lot of jobs expect both out of one person. I always had dreams of launching a website to show all of my work and branding. Someday that will happen, but in the for now, its important to show the work you do have. In the meantime, my portfolio will have to do, at least until this website idea takes off.

Stepping In the Social Media Squared Circle

I have always been interested in sports and entertainment. With my nephew recently discovering the live action soap opera that is professional wrestling (marketed as sports entertainment), I thought it was the perfect time to revisit what I watched as a child (World Wrestling Entertainment) and review their social media presence.

I stopped watching the then-WWF as a teenager for a time because I felt they were always slow to adapt to change. To my surprise, their social media presence is apparent right on the front page. There are links and logos for Facebook, YouTube and Twitter prominently featured on the front page. The Twitter page gives links to all of the wrestlers’ official Twitter accounts. I would be very curious to see if the performers are required tweet in character or not. I actually think it is a great opportunity for a newer performer to connect with fans. Characters live and die with fan support, so this could be a great way for a performer who may not get a lot of television exposure to stay in eye of the fans. While their website offers their own video player, I think it is also important to utilize YouTube. I think having a personalized YouTube page for WWE’s brand offers fans the opportunities to potentially embed videos to their own blogs.

I chose review the WWE’s social media presence because I feel it was always an industry slow to adapt to change. While they never really outright inform fans each broadcast, it was long been accepted that the events are staged and results are predetermined. It goes to show the importance of social media. Even a traditionally “sheltered (in terms of other working with other media)” company like the WWE realizes that there are more ways to connect with fans rather than just using their website. It provides a new way for both fans and performers to interact with fans, in ways that “real” sports does not officially adopt.

What About Design?

Web designers are always on top of the latest trends. When I do a search on social media and graphic design, I see that a lot of great work is being done in terms of designing logo, templates and favicons. However, I don’t see an abundance of interaction within social media. Blogs whose feeds I subscribe to include You The Designer, 2expertsdesign and Logo Design Love. All they really have are infrequently updated tweets on their Twitter accounts. What can I learn from this?

My Own Social Media Squared Circle

Like the WWE’s undercard of talent looking for a break or fan reaction, I think it’s important to stay on the forefront of social media, even if I’m not a publicly traded sports entertainment company. How to do this?

Twitter
I find that the more I tweet, the more followers and blog reads I receive. I recently blogged about the relevance of the OBEY Giant artwork. I personally found the topic interesting (did I mention that I watched wrestling as a child), so I posted an offbeat tweet about it. To my surprise, I received a fair amount of feedback. However, I don’t always check Twitter as religiously as others, so when I go weeks without a tweet, I notice I’ve lost a few followers. Clearly, the advantages (especially for an upstart professional) outweigh the disadvantages. I’ve learned to tweet items relevant to your blog and not post with a course agenda to them. Unless sending a direct message, I want my tweets to sound authentic. I tend to never read a tweet from a peer that posts “Assignment 5: Post 1.” We all have writing requirements, but its important to continue to attract outside followers with similar interests. Now the key, is to hold their interests.

Facebook
I do not consider Facebook (at this juncture) to be a viable means to reach my audience. As someone with a personal account, I don’t feel comfortable promoting my brand to friends and family at this stage. To gain notoriety and success is the dream of any graduate student and should (or optimistically when) this occurs, I would feel it is appropriate to create a Fan Page.

LinkedIn
I find that LinkedIn is sometimes in the shadow of the other social media giants, but is also important. While not as informal in tone as my blog posts, I think it is important to show the client where I have been in my career and also read recommendations on my work.

YouTube
YouTube is the next realm of social media that I want to take more seriously moving forward. I have already posted a link to my DesignSource project and YouTube will be a platform to not only post tutorials, but perhaps a video slideshow of my portfolio. Perhaps not necessarily YouTube, designer Dave Werner utilizes video to describe his work in an extremely effective manner.

I think most of us (even you wonderful baby boomers) have come to accept social media as the norm and not a fad. For an upstart trying to make a name for myself, it would be foolish for me not to try. Of course, I can go on about this…now to make it happen!

Pitches and Proposals (Module 8)

Proposal 1: Design Source

Sentence

Ideas are almost never conceived perfectly. Design Source can take your idea to the next level, develop an eye-catching design and find the job right for you.

Elevator Pitch

Nobody ever said brainstorming was easy. Many organizations that have a marketing team simply cannot afford a graphic designer with all of today’s cutbacks in the business. Trying to find a designer with fair rates is not as easy as finding a repairman in a phone book. Design Source takes design and crowd-sourcing (outsourcing tasks) to the next level. It gives designers the opportunity and platform to showcase their portfolio and website, but also serve as a way for companies and agencies to hire, recruit and discover designers. Designsource.com connects the client with the designer, all in one source.

Promotional

Are you a client looking for the right design? Are you a designer looking to showcase your talents? Let Designsource.com be your bridge to creative networking. Many websites offer online communities to showcase portfolios, but tie in a product you have to use and edit. With Design Source, there are no gimmicks. For designers, just link to your website or embed your pictures and videos. For organizations, agencies and recruiters, post your job listings. It is a way for designers and clients to create, explore and connect. Its taking the work or potential work you have and sharing it with a community dedicated to making the client/designer relationship as smooth as possible, all in one place.

Find creativity. Share creativity. Design Source.

Proposal 2: Barbara Healy Associates

Editor’s Note: Pitches and proposals are a big part design process. In my short time as a freelancer, most of my dealings with clients have been informal. For the purposes of this proposal (and growth in my business/professional etiquette), I will be referring to an actual client that I am still continuing to work with to develop her brand, both aesthetically and marketing-wise .

Sentence

Barbara Healy Associates is a consulting practice focused on developing people, organizations and creating solutions. We believe that people are the key to the success of any organization.

Elevator Pitch

In a time of economic downturn, many people don’t know where to turn or what their next step will be. Our mission is to develop people and create solutions for their professional needs. Are you trying to develop leadership within your organization? Are you an individual looking to facilitate the “next step” or transition in your career? Barbara Healy Associates helps you with these difficult decisions in an increasingly complex professional landscape.

Promotional/Proposal

In terms of promotions, I am laying out an overview, goals, objectives and solutions on what pieces need to be in place for a successful design.

Overview

Barbara Healy Associates is a consulting firm dedicated to helping people with their career goals and is looking for a full branding effort, both web and print.

Goals and Objectives
Barbara Healy Associates is in need of a corporate identity to showcase its offerings in the business consulting industry. The company is in need of a corporate logo, business card design, company letterhead, website graphics and brochure. These marketing materials will help set the tone for the brand and business. The tone for the graphics will be light, cool colors that convey a sense of femininity as well professionalism.

Solution

The development of an original, corporate identity and marketing package.

This package will include:

  • A corporate logo
  • Business card design
  • Company letterhead
  • Billboard design
  • Merchandise brochure

The marketing pieces will work together to continuity among the materials to showcase the new company as a highly regarded career and business consultant.


Midterm: A Blogetery Proposal

Have you ever visited a graphic design blog? The first hits on a Google search will land you on the pages that give you tutorials and examples of logos or typography. These sites, while being helpful, have always left me wanting more.

“Graphic design is the paradise of individuality, eccentricity, heresy, abnormality, hobbies and humors.”George Santayana

I couldn’t agree more. Beyond Photoshop, there has to be more to design. That is what I seek to uncover in this blog.

What Is Blogetery in Motion?

Blogetery in Motion is my (somewhat) witty take off the phrase “poetry in motion.” Where is the motion? Well even though this is a blog, I am always moving. Moving towards a graduate degree, becoming a better graphic designer and forging a successful career. So many blogs give “10 Ways To…,” it seems like a lot of people in the creative field have everything figured out, right? Graduating with a bachelor’s right in the midst of the recession, everybody talks about success, but few seem as though they talk about how they got where they are. Whether it is trying my hand at drawing as a small child or just trying to work with a client who happens to be a good friend, these are some of the stories that separates this blog from the rest.

Humanizing The Job

Don’t get me wrong, some blogs are informative and aesthetically pleasing to the eye. I appreciate a personal touch. Working in non-profit, if there was a donor that worked with me, I would leave a handwritten note. Just to show them I appreciate them.

Until they ran out of credible artists, VH-1 milked the show, Behind The Music. People enjoyed the journey of music artists both good and bad. Am I living the life of Motley Crue? No. Do I think my life and journey is constantly interesting enough to share? Not always, but it humanizes my job. The goal is to have the reader understand my point of view and to “pull the curtain back” of my job and give a fresh perspective. When I say pull back the curtain, I mean talking about design in ways other bloggers do not. I want to bring a level of authenticity from someone who is still maturing in the field.

Online Presence

A Voice – I have had experience writing for blogs that I never really had the intention of growing. It was a way to find my voice and create a tone. While I am still evolving, I do feel as though I have developed. I feel most “at home” sharing personal stories relevant to design, but now I am ready to also share my take on design concepts and trends.

Twitter - In the increasing interactive world we live in, it is important to have multiple platforms for your voice. Twitter, is used on a semi-regular basis (though not overkill for a follower) as a way to announce new blog posts, revelant links about design or just saying/retweeting a witty joke. I chose the name @JonBlogetery to create a sense of continuity between Twitter and Blogetery in Motion.

Other Avenues – I use LinkedIn as a way for clients to post recommendations (which I am currently building) and to link up to an online portfolio. As far as an online portfolio, I am currently creating a Flash version of one (via wix.com). The ultimate goal is to design my own page, but I am still in early stages of learning html and Drupal (which will be something to blog about). Also, I am looking into designing my own background to reflect the theme of the blog.

The Blog – This is where my online presence resides the most at this time. As of now, I do post and tweet under a pseudonym, but would change that when my professional portfolio/website is up. I am also going to put a description of the blog below the title, to make it clear what the blog is about.

Lessons Learned

“If Ernest Hemingway, James Mitchener, Neil Simon, Franck Lloyd Wright, and Pablo Picaso could not get it right the first time, what makes you think that you will?” – Paul Heckel

Get To The Point - In the past several weeks, I have posted well over 20 blog posts pertaining to design. The initial goal was to systematically start off with my history with design, then move into the field at large. Sometimes we get so involved in our own history, we fail to remember that not everything we post, resonates with the reader. I have always liked what I call the “slow build.” In a movie, the story is set, you have some background on the characters, and then the film hits the ground running. A future goal in the blog, would be to get the core of design. Recent blogs like Trading Ethics for a Design, Find Inspiration, Not Theft and Visual Metaphors have reflected this approach.

Never Be Content – The great work of other designers is what motivates me to get better. The same can be said of writing. I did go into my blogging experience thinking I had an edge, since writing was a passion in my youth. The ability to win over a reader that otherwise would have no interest in the subject is a big picture goal here. I want to be good, really good. Not just in my design, but in how I articulate that in my writings.

Goals

“Stop looking at yourself as a designer, and start looking at yourself as a deliverer of ideas.” – Stle Melvr

Whether it is finding your niche or just being stuck in a rut, I want people that, even if they avoid Photoshop, walk away thinking of a relatable experience, even if it doesn’t have anything to do with design. Blogetery in Motion is meant to entertain, but also inform. Why listen to me? I have a great passion for sports, comedy, music and movies, none of which I intend on pursuing for a career. I could write about those topics, but I feel I would be cheating the reader and myself. With design, the creative well never runs dry and it’s a big part of what I want to do.

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.

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.