Design

Ch-Ch-Ch-Changes: Happy New Year 2016!

| Posted | Comments | , , , , , , , ,

So, here we are with a new year upon us. Time to reflect on the previous year, what we've learned, and what has changed. As a web designer and developer, quite a bit has changed since the beginning of last year.

For starters, I've adopted a new CMS platform called Statamic and have made it my go-to CMS for smaller sites that don't have a ton of complex content requirements and relationships. The interesting thing about Statamic is that it's a flat-file system, meaning that it doesn't use a database. This makes Statamic inherently more secure compared to the likes of <ahem!> WordPress. Granted, there are other flat-file systems out there that are worth considering (ie. Grav, Kirby, Pico, and others) but I ended up coming back to Statamic, especially after the version 2 beta was announced. I'm looking forward to seeing how I can leverage Statamic as a worthwhile alternative to more popular platforms. I have ideas on how to do it. Just a matter of putting a plan in place and going for it.

I continue to use SilverStripe as one of my CMS platforms of choice, especially for projects that have complex content requirements with lots of relationships. SilverStripe closed out the year by released a stable 3.2 version of the CMS and framework. Like Statamic, I'm looking forward to finding better ways to leverage how I market SilverStripe to my clients.

For front-end design, I still continue to use Bourbon as my go-to Sass library for projects that require a heavy amount of design customization. I still use Twitter Bootstrap for some projects but I'm also looking forward to checking out the new version of Foundation (version 6). I built a few sites on previous versions of Foundation and found Bootstrap to be easier to deal with. However, I'm very curious about this new version so I'll be checking it out to see if they improved some of the quirks that made previous versions weird to work with.

I've also adopted the use of Pattern Lab on one project. So far, the experience has been quite positive and my partners seem to really like it as well. It was a little weird and quirky to work with at first but, once I found my groove, I found that it can really improve your workflow and process. The whole Atomic Design methodology is quite interesting and presents a better way to approaching the whole content-first/mobile-first way of thinking. Creating a whole design system with modular components feels like a much better approach compared to what I had been doing for sure.

Another big change is switching from Sublime Text to Atom as my code editor of choice. This wasn't an easy choice. I've been using Sublime Text for some time now and really liked it for it's speed and flexibility. Honestly, there was really no need to switch. The main reason I switched is...well...I was greatly concerned with the lack of progress with the Sublime Text 3 Beta. I had been using the version 3 beta for nearly two years and, in that time, it just felt like new versions were being released at less and less frequency. At the time of this writing, the last beta 3 release was released in March 2015. I'm not the only one with concerns about the longevity of Sublime Text. Reading the posts on the Sublime Forum reveals that a lot of developers are just as concerned as I am. As such, I felt it was time to jump ship and find another text editor that is similar to Sublime Text but offers more support and more frequent updates. Atom most certainly fits that bill and, while it's not a 100% carbon copy of Sublime Text, it definitely gets the job done.

Last year was certainly an interesting year for continued learning and reading.

I started learning more about different javascript frameworks and libraries, completed one project using Knockout and started some online learning on Ember. This year, I plan on learning more about React which I think will be a good alternative to Knockout for projects that don't need a heavy handed framework like Ember but a simple library that can snap into any page on a website.

I've read some of the books by A Book Apart and plan on finishing all of them in the first quarter of this year. I'll also be revisiting a few books that have received new editions: Hardboiled Web Design: Fifth Anniversary Edition and Adaptive Web Design Second Edition. Also, after seeing Star Wars: The Force Awakens (If you haven't seen the movie...shame on you! What's wrong with you?), I have a renewed interest in reading more novels and plan on catching up on all the latest Star Wars books. Hope to read at least one book every two weeks.

Perhaps the biggest change for me is realizing that I have to take my business to the next level. 2015 was an interesting year for Soulcraft Group. I'm continuing to work with some great partners and establish more relationships with wonderful clients. But with that comes change in terms of how I approach my business. I started off wanting Soulcraft Group to be more or less a network of different companies and people all coming together to accomplish the same goal: to design and build online solutions for small to mid-sized businesses with an emphasis on quality. While that is still true, I've also come to the conclusion that I need to market Soulcraft Group for what it really is, namely me. Once I came to that realization, it became clear how I need to market my little company: as a full-blown marketing and design agency. My partners will continue to be a part of the way I market my company. While I'm good at web design and development, I'm terrible in other areas like online marketing, social media, video production, and other things that I suck at. You can expect a modest update to my site and how I market my services.

So, that's it for the year! Looking forward to the new year with exciting things to come! :)

Presentation at Big Design Conference

| Posted | Comments | , ,

This past weekend, I had the honor and privilege of being one of the speakers at the Big Design conference. I gave an updated version of my presentation on the User Experience of Comic Books. The response to my presentation was amazing! Lots of folks from the audience had some great questions and comments during the Q&A portion of the presentation. I'm ecstatic and overwhelmed with joy! It's a great feeling to know that I can contribute to other people's education on user experience design!

The rest of the conference was absolutely amazing! Lots of fantastic presentations; many from folks that I know. Many of the presentations were incredibly inspiring. In fact, a few of them gave me some ideas towards my next presentation! ;)

Along with that, a good number of presenters expressed interest in presenting at Refresh Dallas, a little organization for which I'm the organizer for. If you missed the Big D conference and would like to see a few of the presentations you missed, check out Refresh Dallas on Meetup!

For those that requested a copy of my presentation, you can find it on SlideShare.

Assemble Static Site Generator

| Posted | Comments | ,

For about a week or so, I've been playing around with Assemble a Node-based static site generator that works for Grunt.js and Yeoman. So far, I have to say that I'm impressed. So impressed in fact that I ended up dropping Middleman, a Ruby-based solution that I had been using for the past year.

I've been wrestling with my web design workflow for a good year now and decided to revisit the tools I use for generating website prototypes. For the better part of this year I've been using a tool called Middleman to develop website prototypes. There are a number of static site generator solutions out there, many of which even have GUI's (i.e. Cactus, Hammer, Mixture). Sure, it may not have a GUI and requires knowledge of the command-line and Ruby, but what separated Middleman from the rest was the sheer amount of flexibility it brings. The thing that attracted me the most was the ability to use bits of Ruby to do pretty much anything I could think of inside of templates. That and the ability to use local data from JSON or YAML files to loop over data sets. The extensibility of it is just powerful and it really has helped to speed up the design and development of websites within my workflow.

Lately though I've been running into a few issues with Middleman. As much as I like it, the problem is that it's a Ruby app and, frankly, I'm not much of a Ruby developer. Also, Middleman has certain dependencies that conflict with some of the other frameworks I use. For instance, I use Bourbon and Bourbon Neat quite a bit, both of which use Compass and Sass. The problem is that Bourbon requires that a Sass gem of 3.3 or higher be installed, which conflicts with Middleman's own requirements. You can force Middleman to accept higher version of both Sass and Compass but I'm concerned whether I'll run into compatibility issues later one. This made me think that perhaps a Ruby-based solution isn't the way to go. Granted, if I was a Ruby developer this would be a non-issue.

After a bit of research, I decided to revisited Assemble, a solution that I briefly looked at some time ago but didn't give it much thought. Boy, am I glad I did!

Call me stupid but I always thought that Yeoman was more geared for web application development rather than website development. Because I spend most of my time designing and developing website I figured Yeoman would be overkill and never gave it much thought. But if you really look at the three core tools of Yeoman (Yo, Grunt.js, and Bower), you realize that it's not overkill at all. Yeoman simply isn't just for web applications. In fact, you can keep it as simple and slim as you want. Let's look at each of the tools...

Whether you're starting with a simple HTML5 boilerplate or using a framework like Zurb Foundation or Twitter Bootstrap, Yo is more than capable of scaffolding out an environment for simple web projects. There are official generators for just about every framework out there. If there isn't one, you can easily create one of your own for scaffolding out your own projects.

Grunt.js is just a task runner but a very powerful one at that. It's the tool that automates your workflow. It can handle everything from running a simple local server, compiling your SASS and CoffeeScript files, optimizing images, to building out your project.

Finally, you have Bower, a package management tool that speeds up the management of the various web application libraries you're likely to use. Just about every major framework and library can be installed and managed through Bower and makes updating them a breeze!

Throw Assemble into the mix and you end up with a very, very powerful environment for prototyping websites. Assemble does everything Middleman can do...and then some! And, unlike Middleman, the only dependency it has is Grunt.js. That's it!

As for templating, Assemble uses Lo-Dash templates for configuration and metadata and Handlebars templates for content. The syntax for both aren't hard to learn at all and offer a lot of flexibility. There's not a whole lot you can't do within templates.

Suffice to say, it looks like I'll be sticking with Yeoman and Assemble for the time being. At least until something better comes along! :D

Health Design Challenge: d+collab // THE PATIENT RECORD

| Posted | Comments |

This is insanely cool! Regardless of whether you're a designer or not, everyone should take a look at this site and review at least the 1st place winner. Seeing where we are now and where we could be is a huge eye opener. I'm a huge proponent of medical record modernization. This will go a long way to moving us in the right direction! :)