Rebuilding Wardrobe: Week 1

Welcome to the first week of my rebuilding Wardrobe series. As I mentioned in the announcement I’m going to be journaling the entire process of rebuilding the app and I will be starting from a blank slate. This week is going to be just planning and laying out the goals of the project.

One of the first goals when building an app of any size is figuring who the ideal person using it is going to be. I believe the famous saying is: If you try to appeal to everyone then you’ll appeal to no one. I need to figure out who this person is and why they would want to use the app.

I’ve came up with this fictional person: They are a developer, not scared of the command line, prefers full control of their data, and wants to quickly and easily start a journal or a blog. They could build this themselves but don’t have the time and would rather install an app, pick a well designed theme, and just write.

With this decided here are the primary goals:

Primary Goals

1. Minimal admin design
2. Write blog posts. Main focus is on writing.
3. Markdown, wysiwyg, and/or both?
4. Simple user management
5. Easy upgrades, composer update
6. Two or Three included themes

From a quick glance those goals seem simple and easy. From a development standpoint I don’t believe any of those are very difficult except for wanting to keep the design minimal. I’m a huge fan of minimal sites and I think administration areas can be done the same way, especially for an app like this. However it takes a lot of thought and planning to make minimal feel complete and polished.

I’d also like to go ahead and address by biggest feature request I’ve had with v1, and that is installation into an existing Laravel app. From the beginning that was never my goal for two reasons, the first you can add a simple blog to any Laravel app really quick, the second is the added complexity in Wardrobe’s codebase.

Here is a list of my current secondary goals that I may or may not get completed:

Secondary Goals

1. Custom Extra Fields
2. Custom Post Types
3. Plugin or Extension System
4. Install into existing app

From these secondary goals the only one that is really standing out to me as being important is a plugin or extension system. The reason is that if this is added then extra fields, post types, and other things can be built external from the core and would make my life easier as the maintainer.

Design Planning

I know every developer approaches projects and tasks differently but the way I prefer to tackle it is by starting with UI design first, then once I’m satisfied or at least close I then jump to the code. I’m very visual oriented and to me design is the most important area when building an app, it’s the first thing potential users will see and that sets the tone for all the areas of an app. Design is what gets the people using it.

Competitors

I’ve spent the past hour searching for minimal writing apps and have put some of the more popular ones in a graphic below:

As I look at these I notice a few commonalities. The first is that most have a scrolling list of posts with titles and the first few lines of text in the left sidebar. I think that sort of makes sense for a desktop app but not really for an online blog. When I look at the way I manage blogs I never look at old posts unless I get a comment or need to better clarify something. So having this take up that much screen real estate doesn’t seem ideal. I think having all posts in it’s own page with a grid and search will be sufficient.

The second feature is that all written text is shown in real time like a preview. So if you bold a word then it appears bold. Just like in a wysiwyg. The million dollar question is, does it matter? If I’m making this developer centric and if I force markdown are you going to care if a word is shown in true italics vs the markdown style? This feature is also going to depend on what type of JavaScript editors I can find. I’m not interested, nor have the time, to build one from scratch.

The final common feature is they all use white and grey for the color schemes. I have to think that these colors have been chosen for a reason. My best guess is the grey and white is a calm contrast to the words you are writing so it doesn’t over power your eyes. Or it could be that the app that came out first used these colors, became popular, and everyone else just copied them. I have no idea, but I would like to explore other colors.

Here is what v1 of Wardrobe looked like:

It’s hard to tell from that screenshot but the general layout and navigation isn’t bad but it does break down on the blog post form. This is at least a good place to start.

Color Scheme

Besides the layout I want to also start thinking of a color scheme. What are good colors to use? In this situation I do what anyone with no skills would do. I fire up my browser and head to dribbble.com and start searching. One great feature of dribbble is that each image includes a color palette which I can use to help me in deciding what to use.

Here are a few that I found that give me inspiration:

• The Pony Express Mail
• Wikipedia concept
• Google Redesign
• Wikipedia – Text Editor

Next I keep a list of “inspiration” sites in Evernote, I looked through these and one that stands out to me is Gecko Board. I think the header (#3d4351) and sidebar (#484f60) are a nice pairing but might be to dark.

Once I get a style guide started then I will work more on colors and see what I can come up with.

Writing Font

With a basic layout and colors coming together I think now is a good time to find a great font. In an ideal world I would use one of the font services like TypeKit or H&Co. Wardrobe being open source I don’t have that luxury and need to use either web safe or Google fonts.

From the writing apps I have installed these are the most popular included fonts:

• Avenir Next
• Baskerville
• Menlo
• Georgia
• Crimson Text

Menlo is included only on Macs, Georgia is web safe, Baskerville & Crimson Text are on Google. Avenir Next is paid but Google has Nunito which is fairly close. I personally like the Serif fonts for writing but because all these writing apps include a choice that leads me to believe its a highly personal preference.

Plus some developers say that serif fonts give them hives. I wouldn’t want that 🙂

I think the best choice out of these is Nunito. It will look good for text as well as writing code blocks in the admin. The one issue here, which I’m only mentioning because I find it interesting, is that Nunito at the normal 400 weight seems really bold, so I’ll need to use 300 and plan for needing to adjust weights in SASS.

Technology Choices

In v1 the admin area was a single page app built with Backbone in CoffeeScript and we all know that CoffeeScript is the only sane way to write JavaScript. 🙂 For v2 though I’m not sure if a SPA is the best direction to go, mainly because of plugins and extensions. If I build it as a SPA then I will be forcing any 3rd parties to use JavaScript as well as PHP. Maybe that point is really moot? I’m going to let this simmer and continue to think about it.

The things I do know is that I will be using Laravel 4.3, homestead, SASS, and gulp. I’m not certain if I’ll use a CSS framework, instead I may just go with gasp hand rolled CSS.

Wrap Up

I consider this first week a success as I was able to outline the primary goals, nail down what others are doing, start thinking about a layout, and getting an idea of a primary font. Next week I plan on starting a new GitHub repo, getting Laravel installed, and begin working on a base setup. The planning stage is far from over as you can tell, but I’m feeling comfortable enough to move on and circle back as needed.

If you have any advice, questions, or commentary please add it below. That’s what makes this style of building an app unique.