Here are some before and after pics of the logo and website.

Here is what the previous website looked like:

Here is what the new thedebutgroup.com looks like now:

Let us know what you think of the redesign in the comments below!

TEST

With a nickname like the “Filipino Wrecking Machine”, imagery was pretty much spoken for. Take a look below for the wrecking crew, wrecking ball, MMA cage mashup.

The poster will be available soon from Mark’s website.

Special thanks to Foot-Candles for the pic!

You might also want to check out:

• PORTFOLIO: Mark Munoz Website
• PORTFOLIO: Reign Training Center Website

The calm before the storm.

Mark Munoz, Urijah Faber & Joseph Benavidez signing autographs.

An up-close look at one of the sponsor booths-- an MMA board game

Kids obstacle course

DJ kept the fists pumpin' (not flyin').

Marvin (with his sweet new TEAM MUNOZ shirt) was showing Mark what his next face-off move should be.

Mark Munoz & Jake Ellenberger putting on a wrestling clinic.

Sweet T-Shirts!

Mark with Todd Norman from Cutting Edge about to show everyone how to train like a wrecking machine with Nike SPAQ Training.

Getting some last second training tips from Fabricio Verdum.

Training like a wrecking machine.

Mark did the SPARQ Training demo with a 25 pund restricting jacket.

From left to right: Jake Ellenberger, Brett Cooper, Mark Munoz, Joseph Benavidez (front), Joe "Leonidas" Henle (back), Urijah Faber (front), Jay Silva (back).

Poker tournament with pro fighters like former WEC Champ Urijah Faber as the dealers. Winner gets two tickets to a UFC Event in Las Vegas.

UFC Fight Night viewing after the poker tournament.

The event was a huge success and be sure to check out www.train2reign.com for more pics!

You might also want to check out:

• PORTFOLIO: Mark Munoz Website
• PORTFOLIO: Reign Training Center Website

Creating our first MMA-themed logo was a challenge since we had just run out of skulls, chains, and batwings. What we did have however, is a fighter who already had a strong following and one of the more memorable nicknames around. It was apparent that we had to incorporate a number of items to help represent Mark’s Filipino heritage and the warrior spirit that embodies most of today’s MMA fighters.

Incorporating the sun was a no-brainer. Adding the coat of arms tied in two things–the fighting spirit and Mark’s heritage.

Working in the letter “M” proved to be a little bit more difficult until we started playing around with the sharpness of the angle the middle point creates. Once we formed the “M” out of the coat of arms shape, the logo really started to come together. Check out the studies below, overlaid with the final logo.

Here is the final “glossy” version along with a two-tone version with type and a couple of digital mock-ups for t-shirt designs.

All in all, I think we were able to successfully design a logo that was aggressive but not screaming in your face and just has enough edge to ground and pound you to submission.

You might also want to check out:

• Anatomy Of A Website Homepage: Goapele.com
• PORTFOLIO: Mark Munoz Website
• PORTFOLIO: Reign Training Center Website

Though each project is unique and bring about their own set of challenges, there are a set of guidelines that most designers follow to help solve the design problem (you can read more about our condensed process here). For this post, we wanted to concentrate on making the jump from rough sketches, to refined compositions and the choices made that led to the finished project.

Discovery/Rough Sketch

After initial research and speaking with Goapele and her team, we made a list of features that essential to the website. Once we all agreed on the features, we had to place them in order of importance and help direct the user when they first visit the website. We all decided that a big, catchy slider would be used. It gave the home page a flexible tool to showcase, promote and generally just grab people’s attention when they first each the website. Goapele also needed to be able to capture emails so a dedicated space in the front needed to stand out. A quick bio for those who have just recently discovered her music, a place to view her latest video and listen to the latest music and of course a place to list her upcoming shows. Goapele is also very social media friendly and wanted to make sure it was easy for her fans to be able to connect with her. Check out the rough sketch below.

Refined Sketch

From that initial sketch, you can already see the website taking place. We were all pretty happy with the general direction of the project and decided to move to a refined sketch. This stage is very helpful in that it helps flush out your ideas even more. Check out the refined sketch below. We used a an online wire-framing tool to transfer our sketches. There are plenty of choices out there for wire-framing design tools, or you can always stick with the old one-two of Illustrator and Photoshop.

Refined Photoshop Mock-up

Once the refined wireframe was approved, we moved on to Photoshop. We had established some of the palette and overall design feel from some previous smaller projects with Goapele which helped us get a color palette quickly. Getting a detailed wireframe is one the most important steps (after initial consultation and discovery) because it sets the stage perfectly for the fun stuff. I liken the process to the moving from pencils to ink & color for a comic book artist or an underpainting in fine art techniques. Take a look below for the first draft of the refined Photoshop mock-up.

As you can see we did not drift very far from the rough draft/wireframe.  Check outside-by-side comparison below to see the how the jump was made from a rough sketch to a refined mock-up.

Refinements

Although pre-planning, research and wireframes all help facilitate the design process quickly– changes, yes even this late in the stage are almost always inevitable. After taking a look at the refined mock-ups, we realized that a bigger focus needed to be placed on the email newsletter sign-up and the ticket info area. Also, the media slider needed to be placed higher in the hierarchy since a lot of users will be expecting to hear/see the latest media from the source itself.

After some deliberating, the decision was made to make the ticket info a much larger section which freed up extra space for the newsletter to expand for more real estate. The result was a longer span- which meant we now wanted to break up the monotony by designing for the pagefold. For those not familiar, “the fold” is, it is basically the part of a web page you can see before having to scroll– it was mythical line that web designers feared and respected and one who’s time has passed with the proliferation of single-page websites, higher resolution screens and swipe-and scroll-happy mobile users.

Check out the image below for the refined and eventual final version of the homepage.

Hope we were able to shed a little light on how our process works. We definitely had a blast re-designing Goapele’s website. Check out the real thing at Goapele.com.

Evolution of Giographix.com

Let’s take a trip down memory lane and see how we got here. The first incarnation of the website was in late 2005. It was a Flash-based site with a cool little XML-powered gallery. You can still view it here. The next variation (v.2) was basically a placeholder as we worked behind the scenes in designing a new site.

That temporary placeholder ended up being there a little too long so we decided to update the placeholder with v.3. We wanted something up quickly but client projects come first (as they should always do!) so we started working on new comps again.

The next 2 versions (see thumbs to the left) were exploratory but we liked portions of them enough that we eventually used elements from all the different versions to finally come to this final design.

Let us know what you think- we’d love to hear some feedback and don’t forget to follow us on Twitter (@giographix) for the latest in design and development news.