How To Give Design to Your Project
It’s only 4 days until our biggest even of the year: the 2017 Open Data Challenge Hackathon! We know it’s going to be an amazing weekend filled with inspiring ideas and ingenious projects. But ideas and projects need to have a design to make them useful. We pulled in the Wilmington chapter of Girl Develop It and First Ascent Design to give us some tips to keep in mind.
For some of us, when we are building out the backbone of our ideas, the last thing we’re thinking about is how it will look to our end users. What color background should we use? What type of mobility/accessibility does it need? Where should we put graphics? And, of course, how many buttons should there be?
These are only a few of the questions we need to learn to ask ourselves before we start writing any code. Here’s a few pointers to keep in mind:
A good website, at minimum, should be:
- Responsive
- Accessible
- Fun (Remember to be human!)
- Easy to understand
Plan your content
Reminicent of our previous workshop highlighting Content Management, it’s important to find the answers to some simple (yet powerful) questions during the planning stage.
- What are you showcasing?
- What functionality do you need?
- What other content are you providing?
When you’re doing this, think about the things you want your website or application to include. Do you want a biography or project info page? How about a contact form or email opt-in for a mailing list? Do you have a blog you want to showcase or outside resources you want to link to?
Once you have a loose idea on the answers to these questions, you can start setting up a site map.
Setting up a simple site map
How many web/app pages do you need? Websites and apps are basically digital books. Will all of your content fit on a one-page report, or would it be better to have multiple pages that work like chapters? And if you do have multiple pages, how will they relate to each other for a fluid easy-to-follow transition?
The great thing about this type of planning is that it can all be done by hand–no tech experience required. You can doodle a design on post-it notes, spreadsheets, sketchbooks, napkins…anything. The point here is just to start visualizing what your completed project could look like. Often, this part is called building a wireframe.
Once you have your map and frame sketched out, now you can start actually building your design. Now, there’s many ways to do this, but most can be broken into levels of development skill, time, and money. Not to say that one is ever necessarily better than the other…each project has different needs and different tools should be used to meet those needs. That noted, here’s a few to get you started:
The Free Way
These methods require some coding experience, but each link will bring you to a good starter for tutorials. Using a combination of these tools can get you a clean, well-build site with just a little planning.
The Template Way (or, “Lazy is Good!”)
Templates can be free or paid, amazing or horrible. Think of it like base themes for your phone. There’s literally thousands out there, but you’ll usually need to hunt a while to find one that suits your purposes. The nice thing about a good template is you get to see the code it takes to build the website you’re dreaming of. If you’re not too experienced with front end code, this is great because it allows you to get a beautiful site up and running in record time. (Even if you don’t know what a div is.)
But again, important to note: templates exist because another person built them first. Take great care in researching the fine print of any design template before you assume it’s free or available to use. Many require attributes and licensing that you’ll have to discuss with the provider. Here’s a few popular template companies:
Where to host your webpage?
So once you have your site built, it’s gonna need a home outside your local machine. The easiest way to do this for your first time is GitHub pages. They provide free, reliable hosting that’s perfect for simple, static webpages.
Things get a little trickier when there’s a database and server-side work involved. But never fear! There are still many options available. One of these that First Ascent designer John Himicks recommends is WordPress. While it is a paid service, WordPress allows you to host more complicated websites that can link with databases and other things.
Both GitHub, WordPress, and many other hosting companies allow you to use your own custom URL…but you’ll have to purchase that and set up the DNS on your own. We highly recommend Google Domains and namecheap for purchasing domain names. (Do yourself a favor and avoid GoDaddy…just trust us on this one.)
If you do chose to go with WordPress for hosting, however, you’ll want these two links with very funny names:
- Poopy Life (allows you to create a free sandbox WordPress template to mess around with for a few days)
- Pootle (A drag and drop template maker; great for those with an eye for design, but maybe not the coding experience.)
And that is all you need to launch your project into the very impressive world of digital design. Many of these suggestions are for web design, but you’ll notice that there is an incredible amount of support available for making your site functional on all screens and devices.
A little bit of practice throughout the week, and you’ll be completely prepared to be an asset on your team for content and design come this Friday, June 2nd at 6:30pm for the official start of the hackathon!
Not familiar with the hackathon, who can compete, or what’s in it for the winners? Check out the Open Data Challenge website for the full details and follow here for registration rules and award details! Can’t wait to see everyone there! There’s a place for everyone at the big event: coders, designers, concerned citizens, and anyone interested in helping our local Delaware community grow!