The newly designed and launched May Arts Blog

We worked with the team at May Arts over the last month and a half to re-concept, re-design, re-develop and port the content from their old blog into WordPress. We designed and created a custom theme, befitting of their cause and industry, with careful attention to the things that matter to them. They’ve been successfully blogging over the last couple years which gave us good insight into what the new blog should highlight to their readers.

It was a joy of a project and we are happy to have successfully launched it last night. Check out May Arts Blog.

The Build Your Summer Tool on JKCP.com

“We want our website to be our sales tool” is one thing we hear from many of our clients. It should be, but how do you make it so?. The next question we always ask is “How do you currently sell your services?” Maybe we could bring that to life online.

Julian Krinsky Camps and Programs asked us to make a “site that sold” for them, so we role played. “Let’s say I were to say I was interested in coming to camp, what would you say?”, I said. They said, “Well, we’d ask you your age and what your interests are, then recommend a set of programs that matched that criteria”.  ”Let’s build a tool to do just that, then”, I said, and that was the start of something wonderful, their Build Your Summer tool…built from the ground up on WordPress.

The beautifully designed interactive homepage of JKCP.com

Think WordPress isn’t ready for primetime, management of relationships, custom post types and client specific scenarios? Think again. We built the JKCP.com WordPress Theme with relational custom post types to let them manage almost every aspect of the site, specifically the age, details and interests related to each of their programs. Oh, and this is for savvy kids, so don’t forget that we needed a killer design, with some serious moving parts that their audience would expect at this day and age on the web.

So, why all the sales pitching? See it for yourself. Meet Josh, the interactive sales agent on their Build Your Summer section, which lets parents or kids concept their own agenda for a summer schedule. Or, just check out their super-awesomely-designed homepage and other pages of the site to get more information on their camps and programs.

Photo courtesy of Techachi

Post after I post I read mentions how Steve Jobs brought us the iPod, iPad, iPhone, countless improvements to iOS and Mac computers. Many of them go on to say how much a visionary he was in the tech field that we live in, creating revolutionary products. But, there’s “one more thing” that people seem to be missing.

The reason so many people are mourning his loss is because they have lost a true leader. Personally, I write this on an Apple Macbook Pro, read my email this morning on my iPhone and constantly marvel at the simplicity of these devices that drives my 20 month old daughters to instinctively know how to use them. I too use these devices because they are inherently simple, reliable and enjoyable to use. But, I buy these devices because the company that makes them shares the same beliefs that I do.

Apple didn’t just strive to create simple devices. The simple devices were/are a by-product of their core belief. They – Steve Jobs – believed, as Simon Sinek put it in his TED speech (below and linked here), in “challenging the status quo, in thinking differently”. Because of that wonderful yet challenging belief, they have made wonderful products and have provided wonderful service.

It’s more than the products you sell. It’s more than the service you provide. Your core beliefs should shine through the service and products that come from your business.

I can only hope that my 20 month old daughters have the same type of mentors in their lives and that they (and I) exemplify the same leadership skills that Steve Jobs showed are so critical to business and life success.

A rising 2010-2011 web trend is the single page website, and LeslyG.com fits the bill.  The first thing that attracted me to LeslyG.com was the heavy graphical build of the site.  He’s using his website to showcase his design work, why not make it extravagant? As you scroll down the page you enter into different segments of LeslyG’s portfolio, what would ordinarily be individual pages of a website.

To start, we’ll begin in the header, where you’ll find an interactive facebook link in the cloud – get it?  Keep scrolling and you’ll hit a java slideshow of Lesly’s current work, each screen expandable through a lightbox click, followed by a recent tweet.  Presumably, you’ve just passed through the typical homepage.

Continuing down the page we enter into the “Portfolio” page, of which Lesly slapped the title, “Some Cool Stuff” above a few lightboxes and called it a day.  Each lightbox enlarges to a quite substantial viewing of his work, which I really enjoy.  I’m not a big fan when designers show  their work in 200x200px blocks and expect to sell their stuff.  If you’re a designer, show me your work large and in charge (and lookin for chickies).  Each thumbnail of the lightbox’d is graphically scotch-taped to the site.  It’s the small details like this I enjoy in a website.

Flying south we’re brought to the about section, which Lesly feels three sentences and a headshot are enough for me.  He’s right.  Let’s keep going.

Annnnd suddenly we’ve hit the footer…and a chunk of earth.  Passing over a banner linking to his blog and a contact form,  we’re at the bottom of the page.  Site credits and social icons line the footer…after the chunk of earth.

Looking back on this review – WDW3 is the most bizarre so far.  I was sucked in at the beginning for the strong graphical elements, but now I’m at the footer and I’m realizing I started by looking at clouds, consumed Lesly’s portfolio, bio and contact information without hesitation, suddenly landed on a floating chunk of earth, and now am redirected back to real life: facebook, twitter, and all other forms of virtual friendships and fake personalities.  Was this a website or an artistic revelation of truth? Let me know in the comments…

Let’s face it, the majority of the people that are still sending/receiving paper mail are those that are too afraid to “Go Green!” and do their billing online.  Almost everything from that point on is birthday cards and junk mail.  It won’t be long before I’m paypal’d money, packages will be teleported to me, and I’ll be reading magazines exclusively on my tablet.  Paper magazines are hardly circulating as it is and unfortunately for the New York Times, they’re still treading water with their digital subscriptions. So what’s next?  Who knows, but USPS.com is guessing.  They’ve streamlined their old and ugly website (left) to a sleek and smart look (right).  Easy navigation and  “Quick Tools” will really help their user experience, and you can’t help but notice they’re modeling their presentation of updates on Apple announcements, so at least they’re doing something right.

Among the slew of changes, USPS.com is drawing attention to their “About Us” page, which is hard to imagine didn’t exist before.  About Us  features topics such as “Who We Are” and “What We’re Doing,” along with News and Employment Opportunities.  I can only hope with a few solid weeks after the revamp and rebranding their news feed doesn’t float the potential closing of 23 USPS offices.

At this point in your reading experience you might be thinking to yourself, “CreativeMMS is a web design agency, why are they so focused on the United States Postal Service?  I thought they were just supposed to be indie-laid-back-designers?”  Well, we’re focused on it because we’re a multimedia firm, and while our medium is already in “the future,” tech trends change constantly, and it’s only fun when it’s not happening to you.  Twenty years from now someone very well may write an article on how CreativeMMS is still making WordPress based websites when all the other design firms are selling holographic chipsets that embed in the eyes.  Until that day comes, I guess we’ll all just have to keep improving on what we do, what we know, and what we strive to know.  What that, I leave you with a Postal Service that has yet to fail us:

Largely, your audience will affect your design decisions.  I say largely, because design doesn’t solely derive from your audience; you should be designing with slight intentions of how you want users to browse your website.  If you’re using Google Analytics [and if you aren't, you should be] you can find your visitor’s browser settings in Visitors > Browser Capabilities > Screen Resolutions.  Here, Analytics will show your visitor’s screen resolutions sorted by popularity.  In most cases, you’ll see 1024×768 as a fairly medium size resolution with a majority, or close-to a majority, of viewings.  Case in point: This is what you should be designing to.

Now that we’re all on the same page in terms of design, lets talk about canvas size.  In the image below you’ll see a screenshot of the Creative MMS website.  The inner teal rectangle, where the content is held, is the live area.  We designed the live area to 1024px wide.  The entire frame, however, is the canvas size.  To have a properly designed website, you want to design for both the canvas size, and the live area.  The point is twofold;  the first being, when the overall screen resolution is only large enough to show the live area, nothing will be displayed improperly, however, when the overall screen resolution is large enough to display, say, 1600px wide, the live area will be centered within the canvas, which will also have design elements throughout. In the diagram below you can see how various screen resolutions would display the Creative MMS website.

Notably, as monitors grow, available space for viewing also increases and, like they do, trends will change; they’ll change faster than you think.  For now though, with current tech trends both shrinking and expanding (Apple’s iMac is up to a 27″ displays and the UMID mbook at a whopping 4.8″ screen), design needs to be at a safe median to reach mass audiences, catering to both those with the 27″ iMac and the UMID mbook.

Firefox and Chome have two extensions worth downloading and experimenting with to help in analyzing a proper website.  The Web Developer extension enables you to input specific screen resolutions and automatically shrink your browser to those set dimensions.  Web developer also has a slew of other web tools built in; it’s a great tool to have.  A new one I’ve recently downloaded is MeasureIt, which allows you to draw a ruler on the screen of any webpage you’re viewing to analyze elements.  This is especially handy if you’re matching features to a specific site, or just curious about something you’re viewing.

I hope this is a help to all those out there reading up on proper web design.  Give us a head nod, cheers, or just some general feedback on our design views in the comments.

To start the analysis, we’ll look at the homepage.  Upon load you’re immediately hit with a  graphical header blending itself into the background color, which is something I personally love.  This provides a really outstanding look from the start, and ultimately leads the user down the page.  The interactive main navigation is also a great feature of the header, bringing further engagement of the user.  One thing I would personally like to see is a bit of a larger logo, but the current design is by no means in a state of mandatory upgrade.

As you scroll down the page, you’ll find a four-section slider featuring various parts of the Watermelon Ministry site.  Continuing down the page, you get a sneak peak of a few blog entries and a couple calls to action.  These CTA’s, Get Involved (Both Creatively or Financially) and the SeedPlanter’s Digest Newsletter signup, are graphically treated, bringing a further element of enticement, engagement and hopefully interaction resulting in the user’s pursuit of knowledge by clicking these calls to action.  There is also a fairly large footer at the bottom of the page, which I  love, bringing iconography to their Get in Touch section, a quick view and link to the About Us section of the site, and a graphically treated quick view and link to another internal page, The Journey.

With such an extensive, but proper, hompeage, rather than diving into a complete site-wide review, let’s look at three pages, which certainly encompass the site’s offerings as a whole.  First, lets go to the What We Do page, a child page of Services.  What We Do is graphically treated, which is well suited, as Watermelon Ministries seems to be a fairly media-savvy non-profit.  As you scroll down the page you come across a graphical table, which contains highlighter-esque emphasis points describing who Watermelon Ministries is, and how they differ from other non-profits.  Continuing down,  you’re taken to an infographic revealing their seven-step creative process.

Moving to the portfolio page, you’ll find something relatively rare in showcasing work: a small portfolio.  Whether this is based on either design structure or a limited portfolio, it works for them.  The page itself is incredibly handy, providing a fairly large example of the specific work, a description of the project, the client’s name, the launch date, and a link to the live project.  Seems like they’ve covered the bases, even with such a small portfolio.

Lastly, let’s look at the  “Stories” page, which is Watermelon Ministries’ blog.  The thing I like most about this page is that it incorporates everything the non-profit has to offer for someone else.  Well written blog posts, an attractive layout, bringing along recent stories to the right side bar, and great photography.  Blogs are a great way to not only connect with your audience, fans, family, etc. – but also to show potential clients what you’re capable of.  If someone offers “outstanding web services, ” or “the best in the state,” like a few claims I’ve recently seen, and their own website looks terrible, it doesn’t say much about the quality of their services.  I found it refreshing to see that Watermelon Ministries hadn’t overly gloated about their offerings, but rather displayed, rather than told, what they can do.

Hats off to Watermelon Ministries, and good luck!  Thanks for our second WDW!

OkapiStudio does just what it’s name suggests: showcases their work in a very studio-esque atmosphere, as well as provided contact information and host a brief (yet extensive?) about page.  OkapiStudio stood out to us for their attention to web trends.  To start our analysis, lets look at the fold elements OkapiStudio brings to it’s homepage.  “Above the Fold” criteria originated in the days a paper newspapers; the editor wanted to grab the readers attention with whatever was above the literal fold of the newspaper front page, because this content would be at first glance, facing upwards on the readers’ doorways and favorite newspaper stands.  OkapiStudio emulates the above-the-fold technique quite well.  Furthermore, as you scroll down the page, you’re made aware there is more content to be found by a slight change in background, heading, and obviously content.  OkapiStudio also hosts a secondary navigation to its side projects, OkapiDev and OkapiPR, in the footer, as well as copyright information and a link to their blog, OkapiReport.  Additionally, the monochromatic, grayscale iconography on-hover reverts to color versions, also touching on both interactive trends and color-hover state trends.  So far, with only a homepage analysis, OkapiStudio has impressed us quite a bit.

Taking a step further into the OkapiStudio portfolio, of which they designate “Cases,” we enter a grid layout, yet another rising web trend.  On clicking a case, you’re taken to a fairly elaborate project description.  What makes this page unique, and still on par with web trends, is the large typographic headings and large images revealing behind the scenes material and final results.

Taking a stroll over to the About page, we’re visually stimulated by another grid layout and small, colored iconography, representing their services, each accompanied by a heading and description.

Finally, their Contact page presents itself with a simple contact form and various telephone and skype numbers, email, and snail mail locations.

Job well done by OkapiStudio.  We haven’t seen a website approached this intentionally in a long time.  It was a refreshing visit; see for yourselves: www.OkapiStudio.com

But for real, we took the Independence Helicopter website for the overhaul of a lifetime.  We incorporated interactive image galleries, team members and testimonials to bring the user experience to the same elevation as the flights Independence Heli offers.  You can see in the before (left) and after (right) screenshots, the first impression wow-factor jumps 100x over compared to what they used to work with.

We started with wireframes of designs the team wanted, moved on to design and development, then pulled in content from their old site, while adding new material as well.  The project took about 9 weeks from start to take off.

Thanks for reading with us, you are now free to move about the web.

The St. Martin of Tours website orchestrates back-end organization of a care team.  Registering to be a driver, passenger or filling a time slot to visit is all made easier.  The UI tells the user who is scheduled for aide and helps pair passengers with drivers.  A schedule of dates beneath a set of  instructions lists upcoming time slots with how many drivers, passengers and independent volunteers are already registered for each time slot, each represented by a correlating icon.  When eight volunteers have reserved a date, the date closes and new ones are set as priority.

The GiGi Project has revolutionized the way St. Martin of Tours schedules care teams.  How does your local church manage scheduling?