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:
- Minimal admin design
- Write blog posts. Main focus is on writing.
- Markdown, wysiwyg, and/or both?
- Simple user management
- Easy upgrades,
- 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:
- Custom Extra Fields
- Custom Post Types
- Plugin or Extension System
- 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.
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.
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 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.
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:
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.
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
- 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.
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.
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.