Redesigning the Miva Merchant E-Commerce Application

Filed under: Case Studies, Design Inspiration, Web Development.

After working with the Miva Merchant E-Commerce app for the past few months, I have been getting more and more frustrated with the overall design and layout of the app. Miva is filled with bold purple, dirty yellow, table-based layouts, non-reponsiveness and hard to read small fonts.

I took it upon myself to reimagine the interface in a more modern, user-friendly way while still keeping to a similar Miva branding. I also tried to stay as close as possible to their overall organization principles so as to not make this project too massive.

I find myself saying: “Why can’t it just be like Shopify or Squarespace?”.

Maybe I will just switch over to one of those platforms soon, but for now I am bound to Miva.

IE9 taught me something valuable today

By Caleb Mellas

Filed under: CSS, Web Development.

Recently, while working on an app project with one of my clients (MinistrySync – Events made Easy), I discovered some interesting things while testing for IE.

Normally, IE is the bane of my existence, and I have been known to rant and rave about how terrible it is to anyone who still chooses to use it.

But for once, IE actually forced me to learn something very interesting about Sass and the SMACSS to code structuring.

So here I was humming along testing our new app in Chrome, Safari, a few tweaks for Firefox… and then IE9…

Flat Design: Some Good, Some Bad…

By Caleb Mellas

Filed under: Design Inspiration, Web Development.

First off, I need to say that I am a proponent of flat/minimal design when done correctly. Websites that are loaded with 3d skueomorphics remind me of something from the by-gone severely bloated flash era.

Glossy Button: gentleface.com

When creating things with a flat design aesthetic, we need to always remember to focus on our users – not on a popular design trend. So if that gradient or dropdown-shadow doesn’t help the usability factor, get rid of it… but don’t get rid of a subtle gradient or some animation just for the sake of flatness…

Flat design reminds me of the fashion industry a little. Every year a new fad comes out that everyone must wear to look cool and be popular. If you don’t wear what’s trendy – you are outta it man!

3 Business Lessons from the Benham Brothers

By Caleb Mellas

Filed under: Business of Design.

A few weeks ago I was at a conference where twin brothers, Jason and David Benham, spoke on business and how to excel in your field. The Benham brothers, formally drafted by the MLB, now turned business men have started many companies and have been featured in many publications including Inc. Magazine, Entrepreneur Magazine, The Wall Street Journal and more.

During one of their talks they focused on three guiding principles they follow in their businesses that has made them what they are today. I want to highlight these things and show how you can apply them to your work/business.

Responsive Design vs. Mobile “m.dot” sites

By Caleb Mellas

Filed under: Responsive Design, Web Development.

After reading this negative article on responsive design, I felt compelled to write a response.

Responsive Design (RWD) is something I have studied and thought through a lot over the last couple years. It is just one solution to a very complex issue that we face.

That complex issue is the endless sea of devices that are used to visit websites. You have cutting-edge phones that support the latest standards, and you also have old Blackberry’s that don’t have a full-fledged web browser – not to mention large smartphones, phablets and tablets.

Image credit: Brad Frost

What is so amazing about Icon Fonts and SVG’s?

By Caleb Mellas

Filed under: Responsive Design, Web Development.

The year is 2010, the web world is peacefully floating along… suddenly everything is shattered as Apple announces the world’s first high-resolution Retina screen.

Designers everywhere are reeling with this news trying to figure out a solution to this problem. Suddenly one designer has an idea – we can create two sizes of all our images and serve them up based on your screen resolution!

The only problem is that not only is maintaining two versions of every image a hassle, but it hasn’t really solved the problem.

The problem is not Retina screens, the real problem is static non-scalable images. It is only a matter of time until Apple or Samsung releases a 4x retina display that will force designers to begin creating 4 versions of every image asset.

What we need are truly scalable vector graphics – enter Icon Fonts and SVG’s. Both of these formats give us a huge step in the right direction of completely resolution independent graphics.

No more creating multiple sizes of your jpg/png images, and serving them up with media queries and javascript – hooray!

How to standout in a world of mediocrity

By Caleb Mellas

Filed under: Design Inspiration.

Last week I went to an Entrepreneurship conference where I heard an amazing talk on excellence by Mr. Gary Powers. Powers is the Owner of Ortho Molecular Products, a company who aims to change the way the health supplement businesses are run.

Excellence: How to standout in a world of mediocrity

Powers says many company’s products are not accurately represented on their labels. A supplement label may say it has Betaine to aid with digestion, but how much does it actually have? Many companies will add just a few drops of an ingredient to a huge mixing container and add it to their label to help it sell.

Power’s company is looking to set a new standard of excellence in the industry. His talk led me to think about how these same principles of excellence can be applied to the web industry. If you are tired of the status quo – business as usual – then keep reading!

Flat Design: Trend or Revolution?

By Caleb Mellas

Filed under: Design Inspiration, Web Development.

Over the last several months, I’ve been reading post after post about “Flat Design”. It seems like every designer is adopting the trend of so-called “Flat Design” and applying it to their work. Even larger companies like Microsoft and Google have followed this “trend”.

So is “Flat Design” here to stay, or is it simply a passing trend that will be eclipsed by the next great thing to come up next year?

The current reading experience of the web

By Caleb Mellas

Filed under: Typography, Web Development, Website Layouts.

I think most of us would agree that the reading experience of the web is pretty broken. Whether it’s too many ads and distracting elements on a blog, text that is set to 11px (which is completely unreadable), or even lines of content that have a too long line length – the reading experience of the web can definitely be improved.

Today, more and more things are being read on the web every day. Not only do we visit websites to find out information about a company, but we also read e-books, blog posts, and articles online.

Over the last few years, we’ve begun to read more things on our smartphones, tablets, phablets, and laptops then we ever read in books or printed material.

One of the great things about web articles and books is that you can access them from where ever you are, at any time and from any device.

Typecast Reviewed: A Designer’s Thoughts after Using Typecast

By Caleb Mellas

Filed under: Typography, Web Development.

A while back I wrote about typography and its importance on the web. Typography and content is really 90% of what the web is; so if you are going to create beautiful, consumable content, you really need to pay attention to your website’s typography.

Traditionally we’ve used static tools like Photoshop or InDesign to design our typography and then we recreate it in code. But this has always been a bit of a hassle when switching from static mockup to code and to an actual browser canvas.

This is all changing with great new tools like Typecast. Typecast is a web app that is built to help us as designers use the browser to design our typography and websites. It gives you access to over 1000 web fonts that you can try out on your live website content in an actual browser.

Typecast – Experiment with Type from Typecast on Vimeo.

After using Typecast for a while, I want to share my thoughts with the community about some of its great features, and where it could be improved.

Categories

Tags