FlashMapper
Icon Screens!

I’ve been working on the site a lot lately but have been waiting to show something. Most of my work lately has been hooking up the animated transitions, which wasn’t worth posting about really, but now I have all the section screens laying out, all with proper icons. Here’s a rundown of my main views.

Tablet Horizontal:

Tablet Vertical:

Phone Vertical:

Phone Horizontal (the problem child):

I ended up adding labels to all the thumbs except in phone mode. While I would have preferred no text, you do need a little context as to what you’re going to be viewing.

Domain Registering

Today I went to register the domain for my new site. I decided on Flashmapper.com. I’ll be going to a networking event on Wednesday and wanted to make new business cards with the new name and logo as well. I also decided to set up the new site at flashmapper.com with a temp message about the HTML5 site in the works and a link to the regular site, jmspark.com in the meantime.

HOWEVER I hit a bit of a snag. Someone is squatting on flashmapper.com. If you’re unfamiliar with squatting, that’s the practice of an entity buying a domain name they’re not using they think someone might want, and when someone does, charge them to buy the domain from you.

At first I thought, oh, that sucks, let’s see how much it would cost me. I checked the whois info, looked up flashmapper.com and found out they want to charge me $1,577.

Help me, internet! Is there anything I can do??? I can’t possibly justify paying this person that much money.

Logo I’ve Been Working On

One of the things I’ve been working on is a logo for a friend of my wife. She’s looking to do some photography work and wanted whimsical logo that involved a dandelion. She sent me some samples, I did some searching around, and here’s how it went! We’re in alpha review now, I’ll post the final as well later this week.

Alpha version:

I made the dandelion a cream color so it could stand out on white and used purple type with blue dashed lines representing wind to make it feel more whimsical and to complete what can be a good color palette for the site. Instead of having lots of small, noisy seeds floating around, I used one seed on the wind for the apostrophe in “Aria’s”.

Now, when the logo needs to go simpler and single color for a watermark it still retains some of the branding.

We’re going to try a more decorative font next. Also, I don’t know if I like the green parts of the dandelion. They look kind of fuzzy to me. The fuzzy puff ball on the dandelion looked fine until the stem became kind of fuzzy too. I think I need to make them more solid. Also, I feel like I might need to darken the cream a little. It’s being very overpowered by the lettering, especially the fuzz on top of the seed.

Hello again, Tumblr!

Hey, Tumblr…remember me? I’m that guy who was rebuilding his Flash website in HTML5. What? How’s that going? Um…

So, yeah, I haven’t done a lot the last three weeks. We hit some bad teething stretches, things got a little crazy in work, and I’ve got some freelance things going on. The good news is I’ve been slowly working on the bio section, which is where I left off, and I finally have some screenshots!

iPad Horizontal:

iPad Vertical:

iPhone Vertical

and the problem child, iPhone Horizontal:

Yeah, I know, for some reason during the break the footer stuff on iPhone horizontal went all out of whack.

I was successfully able to get a white fade on the top and bottom for when things went off the allotted area. I can’t get a default scroll bar to show up, it only appears when I do scroll, but I think the white fade is enough to say, “hey, there’s more here”. I don’t think I’ll end up using this picture in the end, but it does the trick for now.

Next I’ll do the info section. For tonight though I might just play with coming up with what one of these footer buttons will look highlighted.

Something neat, on the iPad, the “Reader” button shows up. That was pretty neat. When I tapped on it, the biography text showed up in the reader window. The <h1> header shows up at the top and then the <article> that contains the stuff about me.

What’s In a Name?

Battling another illness, this time a cold. Making very slow progress still on the site but got an hour in last night.

Since I don’t have much to show, I figured I’d write about what to name the site. First, a little history.

The first time I named a site, it was called JMWebCenter. The concept for the site is that it would be a hub for all these smaller interesting web-based experiences I made, so the name was based on my initials, JM, and the description of what it was, a Web Center.

I’ll do another blog post about logos at some point, but to answer an obvious question the New Jersey shape is there because I was a cartographer and in college and the few years after I still identified with being from New Jersey.

Eventually I stopped making these little contained sites and wanted to use the site for different promotional purposes. I had book projects I was working on and wanted to get published. Also I was looking to transition myself from being a cartographer to a more straight forward graphic designer and take on freelance work. The name of the site became JMSpark, the Spark part existing to just suggest there was some new energy in what I had to offer. I actually had this referenced in one of my annual reviews at k12.

Another small logo note, the shape inside the circle that replaced New Jersey is a dual image. It’s primary purpose is to be the “spark” and the secondary purpose is that it’s a nod to the cartography days. It’s also a compass rose.

So here we are now. I don’t really like JMSpark anymore, and I see myself as having two options.

1. If my eventual goal is to be a digital publisher and release products, why not just make the jump now and call the site what the eventual entity would be called, such as Spark Publishing or Miller Publishing? Since the primary objective of the site right now is to still really promote my skill sets, and I don’t have anything of my own to distribute yet, this feels like a premature move. I also don’t know what I’d be able to call the eventual entity, so 

2. Since JMSpark came about, I’ve slowly developed a consistent handle, FlashMapper. I use it with my blog, on twitter, google+, and anywhere I need an identity. www.flashmapper.com seems like a natural choice then for my personal site. The issues I see there is that I’m not really a “mapper” anymore, and in two years I see myself not doing much “flash” anymore. I guess that’s not a big deal, it’s a unique handle easy to remember, if in five years no one gets the reference or where it came from, no big deal.

No New Updates

It’s been a while since I’ve been able to work on the site. Last week the baby started with 8 teeth and is now at 11 with one more on the absolute brink. When we stop having to get up three and four times a night work will pick back up.

Day 19: Designing Pop-Ups

Today I took do doing some serious conceptual design. Part of the site involves these little info screens for my biography, contact info, and for a little slideshow on the history of the site. On my current site I only have two of these, for contact and biography. What happens today is that the center of the site is taken over by the necessary info screen, and jumping from one to the other slides them back and forth.

I’ll first show each of these screens iPad horizontal and then show the rest. For all these horizontal screens the footer content moves to the left under the logo. Changing from one to the other slides the content up and down as if the screens are arranged in the same order as the icons. I debated having the menu of sections slide up to the top next to the logo to easily jump there as well but I thought it was too much. You can click the circle logo to go back to where you were. This is a common website standard.

Biography: This will stay relative the same from what I have now, with some text and a pic. I’ll use the shadow and reflection style like on other screens.

Contact: This will stay relatively the same too. I’ll have to decide how much info to really put in there. The little boxes to the side are for the little graphics you sometimes see for sharing the site to Facebook, twitter, or Google +.

History: History will be interesting. This slideshow widget is something that I’ll need in many many places on the site, most specifically as alternate content when Flash cannot be used. The red arrows on the sides move between screenshots of my site in different incarnations along with text that explains a little about what’s going on and why the design went in that direction. The little squares at the bottom say what screen in the total slideshow you’re on.

iPad Vertical: Things stay pretty similar, the only difference is that the footer icons stay where they were on the bottom. Screens would slide left to right.

iPhone Vertical: Some noticeable changes. First, the text can’t fit on the screen, so the text will have to scroll with a little bar on the right side to show you where you are. In the history section the image and text won’t fit together. Instead the image has its own “i” button in a blue circle. This takes away the image and gives you scrolling text. A back arrow in a blue circle lets you go back to the image. I did this because the images are really more important. People are far more likely to skip the text anyway, and if people do, no problem. The screenshots alone will tell a pretty good story.

iPhone Horizontal: Lastly, the problem child. Again, there’s really not a lot of space here. I’m deciding to ditch the titles. If I touch the “i” icon and get contact info, it’s pretty obvious where I am. The slideshow has the same “i” button but the marker squares are now vertical to the side.

The scrolling text box is unavoidable. This makes me think I might need jQuery. I was going to avoid swiping and just use the next back buttons but I don’t think I can now. If I do get swiping down I mind as well make the slideshows swipable as well.

Day 18: Main Page Layouts Ready

The baby and I have both been sick today. I have not been able to work on this site nearly as much as I wanted to. The good news is I finally finished my main page layouts.

iPad Horizontal:

iPad Vertical:

iPhone Vertical:

iPhone Horizontal:

I’ve made some slight changes to my original designs. I won’t be using shadows on the phone sizes (have not done shadows on tablet sizes yet). I need the space. On the phone horizontal I also decided to keep the footer at the bottom instead of up on the right side. Turns out I needed the entire width for the text to be legible.

Some accomplishments I made on this include the CSS-styled menu box and raster logo, both with embossing effects that match and a web font for the menu text.

I’m split on what aspect to try next, my feeling is to make the things that go inside the pop-ups, contact info, biography, and history of the site. I’ll also need to make new icons for them as well. I’ll either work on those or I’ll work on the thumbnail layouts and start building some things dynamically based off XML.

Thinking About SOPA

One day I was down the shore, sometime in the mid 90’s, I was at an ice cream parlor and outside they had a hand-made sign with somewhat off spec drawings of Mickey Mouse and Bart Simpson.

I said to my dad, “Are they allowed to do that?”

“No, not really,” he said.

“Why doesn’t someone stop them?”

“Because it’s not worth it to them.”

He explained how Disney or Fox would need to spend lots of money to try and first look for people infringing on their copyrights and then spend more resources to have the ice cream shop take the sign down and extract royalties from them for any profit gained by using their characters, which wouldn’t be very much. Someone put the characters on a sign to draw a little attention to themselves.

Later on I thought about what if I created my own characters and one day walking into a shop to see something similar. First I thought about calling the cops, then imagined myself standing next to the cops as they made the register girl take down the sign. It looked kind of dumb. Then I thought about making some kind of snide comment about how “that’s my character” and trying to make the owner feel bad. That looked even stupider. I eventually realized my dad was right, it wouldn’t be worth it.

The story’s stuck with me through the years. I’m not saying this now because of the SOPA uprising but because this was my first exposure to the concept of resource management and the need to find balance between the ideal (no one uses Mickey but Disney) and reality (who’s it hurting, really).

When the SOPA fury did boil up, I started to think about the big picture and why this time it seems different. The online equivalent of the Mickey Mouse sign today would be someone using a song in the back of a silly YouTube video they splice together. What’s this really about? I won’t get into how absurd the bill or its methodology really is. I’m more interested in why it’s being pushed in the first place.

Didn’t we go through this with the music industry already? Between the iPod and iTunes Apple created a platform (since copied by Google and Amazon) that was better than the pirates’ and my friends and I stopped downloading music illegally and paid for it. People wanted the content in this new format and when someone provided a means to do that they bought into it. Why wouldn’t that just happen again?

I think two things are happening this time that makes it different.

1. The concept of “owning” media is dying. Spotify, Pandora, Netflix are the image of things to come. You don’t need to own a song anymore to listen to it. You don’t need to own a movie. The song lives in the cloud and you buy the rights to access it. This is a strange new business model that’s scaring people. DVD and music sales are down, and I think part of the reason is that people don’t want to buy and own a piece of media anymore. Just look at the backlash from studios when Netflix exposed how out of step they were with what their audience wanted.

2. This content isn’t worth what the producers think it is anymore. An HD movie costs 20 bucks retail, 14 bucks digitally on iTunes. It’s not worth that. Video games and social networking are all viable alternatives, and if you look at them on a money spent per hour of use ratio, these things are a steal. A 2 hour movie at 20 bucks comes out to 10 dollars an hour. A 50 dollar game with 60 hours of content (any Zelda game) comes to 83 cents an hour.

Are the pirates really that big a factor? I haven’t seen any stats that say so, but I don’t know anyone who pirates. I guess we technically just watched Curb Your Enthusiasm Season 8 illegally online, but like the iTunes example I’d gladly pay for stand-alone access to HBO’s online service, HBO Go. Why won’t they let me without also subscribing to the TV service? If those sites went dark, I just wouldn’t have watched Curb. HBO wouldn’t have gotten anything from me anyway.

I think this boils down to media companies are beginning to realize their business models are dying and they don’t have a solution. The publishing industry has been going through this for a while. Newspapers took a pretty nasty, well publicized hit. Some are adapting to the new digital reality and will survive, some of them won’t and new things like Flipboard will replace them.

This last week proved the SOPA folks won’t win, I never thought they really would. New business models always take the old ones to the woodshed kicking and screaming and this time won’t be any different.

Day 15: Finally Making Progress

My CSS lessons went well. I have a much better understanding of the concepts. However, for some of my layout plans I won’t be able to use it, either because it doesn’t give me the control I want or there are still some nuances I don’t know. Either way, it’s still a split CSS/javascript, more CSS than before, less than it probably should be.

As I stop tonight, I’ve positioned the main elements for desktop, tablet horizontal and tablet vertical. The entire layout, except for the reflections on the characters, works in Safari, Firefox, Chrome, and Opera. I’ve tested both by resizing my browser window and opening on the actual iPad. Still a couple of odd hiccups, but not worth worrying about right now.

If I can get the phone layouts working tomorrow I’ll post screenshots.