Design and Development

Posts Categorized: Web Development

Redesigning the Miva Merchant E-Commerce Application

By

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?”.

Squarespace Admin Shopify Admin

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

Read more…

IE9 taught me something valuable today

By

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.

Ugly IE9 Logo

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…

Read more…

Flat Design: Some Good, Some Bad…

By

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 Skeuomorphic Button

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!

Read more…

Responsive Design vs. Mobile “m.dot” sites

By

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.

Vast sea of web-capable devices

Image credit: Brad Frost

Read more…

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

By

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.

Icon Fonts vs SVG’s

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!

Read more…

Flat Design: Trend or Revolution?

By

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”.

Flat Design: Trend or Revolution?

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?

Read more…

The current reading experience of the web

By

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.

Improving the web reading experience

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.

Read more…

Typecast Reviewed: A Designer’s Thoughts after Using Typecast

By

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.

Read more…

What does an optimal CMS user-experience look like?

By

Filed under: Web Development, Wordpress.

Last week, we talked about several specific problems with WordPress.  I know I said this week we were going to look at some solutions. But in thinking about the problems mentioned, I realized that it was more important to first go over some key user experience (UX) principles before discussing specific solutions.

So this week we will look at what an optimal CMS user experience should look like. We’ll outline the groundwork needed to create a really good editing experience in WordPress, and any other CMS.

The Future of Content Management - Rachel Andrews

This article is based heavily on Rachel Andrew’s talk on “The Future of Content Management”. Her talk really opened my eyes to how much our current management systems are lacking. You can watch it here in it’s entirety.

Read more…

Rethinking WordPress as a CMS

By

Filed under: Design Inspiration, Web Development, Wordpress.

According to Forbes, WordPress powers one of every 6 websites on the Internet, nearly 60 million in all, with 100,000 more popping up each day. But have you ever taken time to think about how WordPress manages content? Not only from an editing perspective but also from a design/development perspective.

This article has come about from years of experience with WordPress, talking and working with multiple Clients, and being inspired from other innovative products – like Square. One of the things that really strikes me about Square is that they are so focused on their users. They are focused on completely rethinking how payments are done in order to make them beautiful and easy to use.

Head over to Square.com and watch this video, it will give you the background needed to understand this article.

Square - Simple and Breathtaking

Let’s think about the WordPress Admin – is it focused on its users; is it easy to use; is it breathtaking? I think we’ll all agree that it could use some work in these areas.

Read more…