As Katy mentioned over on the Digital Archaeology Institute blog, we’re focusing on two major steps in the development of our project: 1) creating the framework, and 2) developing the content. For more details about the content development, head on over to Katy’s post.
Some of the major steps in creating TOMB’s framework will include developing the main map, creating the GeoJSON file the individual site information will pull from, and creating the website structure. I’d like to take a moment and discuss the importance of focusing on website structure. Sitting down and really thinking about how your entire site will be laid out, and how users will navigate through your content is an incredibly important first step that many new developers tend to overlook. I’m sure we’ve all been to bad website before, ones that are poorly thought out where you’re left thinking “where the heck do I find what I’m looking for?!”.
For me, this means taking a step back from the digital realm and putting pen to paper. At this point I’m not concerned with things like fiddling around with the pages to create better search engine optimization (SEO), or ADA compliance. That’s a level of voodoo magic I’ll deal with later (in what at this point feels like a previous life, I worked as a marketing assistant for a campus department focusing on SEO and pay per click advertising so I’ve got a few tricks up my sleeves). What we’re focusing on now is structuring the website so that our intended users, students and teachers, have an enjoyable and educational experience with the site. If you’re new to this process and looking for details instructions/suggestions for creating good website information architecture and content I highly recommend this guide created by Princeton.
Site Maps v. Wireframes
My first step was to create our site map. A site map creates the guiding architecture for how the web page will flow. It can also later be formatted and submitted to Google (once the site goes live), and allows web crawlers to find files/pages on your site more easily.
TOMB site map
Beginning with a site map also allows Katy and I to better organize the types of pages that I will need to create. With this step finished, I can then begin to build wireframes for each of the individual page categories.
TOMB wireframe of the Index page
TOMB detail wireframe of main map
A wire frame allows you to physically block out each of the major sections that will occur on the different types of pages your site has. For TOMB this requires me to create slightly different style pages for our index, about, terminology, sites, and resources.
TOMB wireframe for site detail page
Having all of these different pages planned out make the actual creation of the pages using bootleaf for the index, and modified bootstrap templates for the other pages, more efficient. Knowing exactly what needs to be in each page, including pop outs and drop downs, will allow the coding to go smoothly.
We are also taking a bit of a different approach in that the individual site page content, as well as the information contained in the map pin pop-outs, will be called from a single geoJSON file. The major benefit of populating the page information this way is that in the future when we add additional sites, or go to update resources on existing pages, we will only need to update one file.
Since we’re building/hosting the site on Github, by next month’s blog post I’ll be able to show you each of these functioning page categories.
Recent Comments