Brainstorming structure & content

After developing your motivation for learning to code, you want to brainstorm about the structure and content of your site.

Core concept

A website that examines zoonotic diseases, particularly from bats to humans, for a general audience.

Thoughts on paper

My first approach is simply to jot down ideas on paper. Write down any random thought related to your project. Don’t worry about structure or making sense of it, yet.

Mind mapping

Some people skip the thoughts on paper step and jump straight into utilizing a mind mapping tool. That’s fine if there’s mind mapping software that you already use and are comfortable with. But don’t delay by thinking you have to use a particular piece of software. You can easily draw a mind map on paper. A mind map is simply a drawing of ideas and those thoughts are connected by lines.

A mind mapping tool that I like is Scapple, but there are dozens of other tools out there. Find what you like, or just stick with paper.

I like to start my mind mapping process by organizing those jumbled thoughts I put on paper. Here’s the initial mind map (using Scapple) from my handwritten notes:

There’s no proper way of mind mapping. Figure out an approach for you. Most tools have the easy ability to color code sections. In my example, I have the site itself sitting in a cloud in the center of the map with simply the word ‘zoonoses’. Branching off from that are various aspects. The light blue items represent ancillary content that I might link out to from the site. The red items represent the main structure and content of the site. The green items are just key concepts that I don’t want to lose track of at this time; these green items will eventually find their way into the section of red items that is the main content. The pink items are just design ideas. Don’t worry much about design yet, but keep design ideas will naturally come up as you think about the project. Use this as a placeholder for coming back to those ideas later. Finally, the yellow item are things that don’t quite fit into any other category, yet.

Organizing your files

You need to start keeping your files organized. Your mind map might be the first file that you create for the project. Of course, it ultimately will not be a part of your final web site but it does form the first part of the documentation.

Tip: Use a cloud-based file system, such as Dropbox, iCloud, Google Drive, etc. (If you’re a student and you have access to Box, then that will do also.) You should also figure out how to integrate your cloud-based drive with your computer’s file manager, e.g., Find on Mac OS X. The cloud-based drive will ensure that your files are backed up. I never store anything on the hard drive of my computer. Also, I’m often working from different computers: an iMac in my office, an iMac at home, and a Mac Air. But even if I only used one computer all the time, I would still utilize a cloud-based drive for ease of backup.

In the top-level folder of my Dropbox account, I created a folder called WebDev. It’s where I keep all my web development projects. (And I have dozens of projects.) I create a new directory in Dropbox/WebDev for each project. In this case, I created a folder called “zoonoses”. All my files related to this project will go in that folder.

Expanding the mind map with research

For our website, we need to learn a lot more about zoonotic diseases and bats. Researching the topic allows us to gather more ideas for the site. In many cases, you’ll be doing this part as user experience (UX) research by interviewing your client or your customers that will be using the site. But for my type of educational site, I’m consulting the scholarly literature. I’m a librarian, so I really know how to do that quite well. It’s a long process, thrilling I might say, but I won’t explain that here. Also, UX research and design is detailed and complex process that is quite rewarding. Again, you can build an entire career out of UX research and design.

Keeping control with GitHub

At this point, as I start to create more documents, I want to start a systematic process of managing my project. GitHub is my preferred way to do that. I created a repository for my project named zoonotic diseases: https://github.com/jeffreybarry/zoonotic-diseases.

I’m making this a public repository so that others can view it, but also so that I can use the wiki functionality built into GitHub. The wiki is a good way of taking more detailed notes that don’t fit into the confined space of a mind map.

Next step: an initial prototype

I have a few dozen scholarly articles on zoonoses. But for the sake of helping you learn web programming, I’m going to momentarily skip over the details of the research that will fill out the content of the site. Instead, we’ll jump straight into an initial prototype so that you can start seeing some code on the page.