HTML5 Project: WIREFRAME SERIES – INTRO
Read the entire “Wirefame Series” * Intro | Page 1» | Page 2» | Page 3»*
I outlined the steps for my HTML5 Project in a previous post. I’m glad to say that I’ve accomplished the first three steps, which were:
- reading many of the various articles at HTML5 Doctor.
- thoroughly review sites featured at HTML5 Gallery to get a firm understanding of the proper HTML5 layout.
- create site wireframes, which are below
My attitude about wireframes as always been “maybe, maybe not.” Unless a project demands them, I’ve usually preferred to go straight to graphical mockups.
But the HTML5 language is a semantic one: there are extremely strict rules as to when and when not to use certain tags, rules that we all should follow to the letter. So, armed with the cloud-based wireframe RIA Hotgloo, I wireframed my portfolio site.
Due to these rules, the wireframes below detail not only the layout of the content, but also where some of the page tags should go…tags like , and a few older ones like . I’m not sure if all my placements are right, but I did spend a significant amount of time reviewing other HTML5 layouts, so I’m 90% sure they’re right. I’ll be submitting the site to HTML5 Doctor and/or HTML5 Gallery for review when it’s completed: I’m sure that they’ll point out any mistakes.
The pages are broken down as follows:
- Home Page – this is self-explanatory
- Work Page – the main category page for all my work broken down to three subcategory: Experiments, Freelance, and Day Job
- Work/Experiments Page – I listed this first because this will probably be the most active Work subcategory. I’m happily using my free time to focus on my son Niko and not doing that much freelance right now. And there’s only so much Revlon work I can show for legal reasons, so I’ll practice some HTML5, CSS3 and jQuery development, then dump this content into this Experiments section.
- Work/Freelance Page – this is self-explanatory
- Work/Day Job Page – this is also self-explanatory
- About Page – again, self-explanatory
- Contact Page – yet again, self-explanatory
- **Niko’s Playlist Page ** – this bears some explaining. My son loooooves Katy Perry and Beyonce…good for him but there’s only so much of this I can deal with. I’ve been sitting with him in front of my computer once a day, pumping everything from Sonny Rollins to the Clash to Slum Village in his ear. He responds to some of it positively so this page will document what he likes while injecting a little humor to the site.
Enough talk, here’s the gallery (updated Feb 6, 2011):
My initial plan was to post the complete set of wireframes and discuss them in depth in the same article. But I have a lot to discuss here so I’m going to break the discussion up in a three-article series.
The series’ articles, starting with the next one, will be:
- Article #1: A review of the home page discussing the article, section, nav, header and footer elements. The Work pages share a similar layout and will be mentioned.
- Article #2: A review of the Work, Work subcategory and Niko’s Playlist pages.
- Article #3: A review of the About and Contact pages.
Update (Feb 5, 2011): I previously mentioned that Article #2 would discuss the Work and Work subcategory pages and that Article #3 would discuss the About, Contact and Niko’s Playlist pages. Article #2 will now include Niko’s Playlist page.
Also, you’ll notice the WordPress logo on the wireframe. I said that I wasn’t sure whether or not I was going to use this but I’m now pretty sure I will. I’ll mostly likely create a WordPress child theme from TwentyTen and hack it up. This (I think) will be a lot of work so I’ve also been looking at TwentyTen’s overall page structure. I’ll have more to say on this as soon as I’m done with my research.
Lastly…this design is NOT etched in stone: there may be changes when I create the site architecture and page mockups.
The series hasn’t started yet, so I’m open to modifying the wireframes if some suggests it. That being said, feel free to let me know what you think! Any help is appreciated!
***Read the entire “Wirefame Series”: Intro Page 1» Page 2» Page 3»***