DJ's Sports Cards redesign... (so far)

Ok so I am doing a site redesign for the website http://www.djssportscards.com/. They seem like a pretty cool business, but the web design needs help. It's out dated and frankly a bit generic.

As you can see, I've changed the color scheme substantially. We've simplified the navigation, added in a slider and several ad boxes up top to accommodate the updates he needs to post to display the const flow of new inventory (thus eliminating the infinite scroll of the old page) and lastly we added the option to buy select featured cards directly from the homepage.

The nav is just a simple pop out window that is both easy to understand and easy to find what you are looking for.

The biggest changes here include increasing the size of the card nearly 500% of what it was previously. Also I've left aligned all of the features in the checkout process so the buyer won't have to scan for the info they are looking for. The new design also includes the ability to add cards to a wishlist for later and the ability to see cards or merchandise you may be into to encourage further sales.

The beginning of the Ecommerce redesign

For this redesign I will be tackling the oh so noble cause that is http://djssportscards.com/ . The site suffers from a lot of the same faults that seem to plague the collectible card industry. The main flaws being, redundant graphics (the stars and generic sports figure silhouettes make my soul sad) an endless scrolling page and a list of navigation that is a mile long. Also, the site could use far much larger images of the cards you are trying to buy, especially after you click on the thumbnails. Lastly, DJ's is using the same simple blue and white color scheme as a large portion of his competitors.

What I was after in this moodboard was a few things. First I like the dark bg color scheme that both Under Armour and Nike use for the images. It has a nice way of really classing up and give a refined edge to sports equipment and memorabilia that white simply can't come close to. At this point my color scheme is far from concrete, I just know I want to use something that is a decent contrast to the dark grey I will be using throughout the site and yet not something that will look like it came from the 90's. Gone are the stars and generic athletes. As far as textures, both the jerseys and equipment (balls, bats etc.) have such recognizable textures that if I were going to use a texture in my design, those are the obvious source.

Here is the lo-fi I came up with. The dark color scheme is present and I decided to go with an orange to play off of the preconceived influence that Nike has on our culture and that, this color scheme has become synonymous with athletes. In order to address the infinite scrolling of images we've added a slider as well as several thumbnail locations to feature products that just came in as well as any sales or promotions. The section below labeled "featured products" is a space on the homepage where he can display the bigger ticket or hot items in his shop and the user will be able to add them to his/her cart right then or there.  The search bar will feature a slide out menu in order to condense things some.

Project statement for Portfolio Site

Background

  This portfolio site design will actually be the second orientation I have tried out. My current portfolio site was a minimalistic, streamlined approached that really served as nothing but a home for a slider that showed off my portfolio images. A secondary page would also show you a thumbnail view of the pieces, but there was nothing to separate the site from say, a simple wordpress template. On this go around I really wanted to drum up the concept as well as appeal to the viewer with a fresh, interesting take on the portfolio site.

            Target Audience

 

I know off of the bat that I will lose a section of the possible design clientele based on my sites design. If you were looking for cartoony, or a very simple approach to design, mine may not be the design that portrays that.  However I do think the site will speak very strongly for the 45 and under crowd and appeal to both designers and “the normal folk” alike.

            Objectives

   The thought going into this is, I want this site to stand out as much as possible in a way that showcases both creativity and an ability to execute on an idea. I want them to leave the site thinking, “that was different” or “that was a cool idea”, anything that will get me to stick in their minds. There is certainly nothing wrong with a clean slick designed site, but in all honesty, that makes up the majority of graphic design sites. I can’t see how this site won’t at least cause a hesitation in the barrage of clicks from the potential client.

            Obstacles

   The biggest obstacle I can see comes with the sites strength, and that’s the themed approach. There will be some that hate it, and wish I went with a much simpler, streamlined approach. Also, there are camps out there that are sick and tired of seeing aged/antiqued design… they probably aren’t going to dig my site. Lastly, I am capable of doing clean design, in fact several pieces in my portfolio were used for a children’s apparel company, and the fear is, the two design themes will compete against one another.

            Key Benefit

  As I mentioned earlier, the key benefit is that the site will standout, I have little doubt about that.

            Tone

  The tone of the site is a blend of both mature design techniques mixed with a fun and imaginative application of the theme.

Rough Draft of Homepage Layout

  After having a little bit to step away from the rough there are a few changes I know I need to make. First, I really don't care for the fight tagline of "The Brawl to Land 'Em all." I didn't really care for it in the first place and just used it as filler until I could think of something better, but now that I actually see it on the site, it is the GLARING change that needs to be made. Also down below the marquee, I need to move the "contact for more info" font over to the left to allow room for social media icons that I forgot to include when I made the rough. 

  I'm also going to explore the idea of taking photos of myself to use in place of the boxer. Not sure if I want the personal route on that one, or if it is a better approach to use the images of two classic boxers...

  Lastly I do have my own personal logo that needs to find a home on the homepage, especially since it will serve as the "go home" button on the secondary pages of the site. Not sure where to put that just yet. I am thinking about subbing out where I currently have "Ryan Fisher Design" with something else and then using my logo above the "presents." Again it will take a bit of finessing but it will be there for the final.

Sketches and site map for portfolio site

"Don't make me think" Chapters 1 & 2 thoughts

   The problem with trying to summarize the first few chapters of a book is that, by the time you are finished with the second chapter, the ball really just got started rolling. That being said there is are a few key notions that Steve really tried to drill home. The first being, that no matter how eloquent you try and be, how many astonishingly brilliant participles your sprinkle throughout your work, people just ain't gonna read it. The truth of it is, like it or not, we are now a population that will quickly skim text. We look for the pieces of info we were after, or whatever key word we may find interesting, and ignore just about everything else. 

  Now I was aware that in general people just skim through sites, after all, I know I do; but what I didn't realize was the REAL reason why we need to make our sites as UI friendly as possible. Somewhere over the last few years I was taught that the reason you want your site as tight as possible is because you user is always just one click away from going to your competition. Steve acknowledges that yes, this is true, however much like a person who waited 10 minutes for a bus, you're willing to wait just a bit more to get the end result. The real reason why we need our UI to be as simple as possible is because every time the user has to pause and give conscience thought how to find whatever he/she may be after, you  may lose a little credibility. The thought makes sense after you here it, after all, if I am looking for a person to design something for my company and it appears like they can't even design a few links for their own site, I'm not as likely to hire that person.

Here's a checklist that should help a designer avoid this:

http://ucommunications.colorado.edu/services/style-guide/web-style

Mood Board Portfolio Site

There are a few things in particular that I know I would like to pull from this mood board into my portfolio site. One is the bold font choices and the play with hierarchy throughout the site. This can easily been seen is the size relations ships with the word "Drink" in the first poster, the year "1964" in the second, "is" in the third and all throughout the final poster along the bottom of the mood board.

I also really enjoy playing with negative space and the "clipping mask" look of design. In fact it is something I tend to play with a great deal in my own work and I feel it should be present in the design of my site. The women's silhouette being used to cut out a section of London is an example of this, however, I'm not entirely sure how I will try and incorporate this type of approach into my final design.

Lastly I really enjoy the color scheme of blue, brown and grey. It's present on my business card and I believe it is a color scheme I will use for my personal branding.

The final thing I may try and incorporate is the slight aging a lot of these pieces have to them, without distressing or distorting the image at all.