Team:UCL/FAQ/WikiDesign
From 2014.igem.org
Line 43: | Line 43: | ||
<!-------- This is the beginning of the expanding box--------> | <!-------- This is the beginning of the expanding box--------> | ||
<div class="collapse-card" data-step="3" data-position='top' data-intro="So you're looking to build your wiki! Think about your layout, and how you want to present your work. I suggest looking at the wikis of past iGEM teams (especially those who won awards for their wiki). There are two things to think about when building your wiki: content and design."><div class="title"> | <div class="collapse-card" data-step="3" data-position='top' data-intro="So you're looking to build your wiki! Think about your layout, and how you want to present your work. I suggest looking at the wikis of past iGEM teams (especially those who won awards for their wiki). There are two things to think about when building your wiki: content and design."><div class="title"> | ||
- | <i class="fa fa- | + | <i class="fa fa-spinner fa-spin fa-2x fa-fw"></i><strong> |
<!--- Title start ---> | <!--- Title start ---> | ||
How will I get my wiki done on time? | How will I get my wiki done on time? | ||
Line 49: | Line 49: | ||
</strong></div><div class="body"> | </strong></div><div class="body"> | ||
<!--- Content start---> | <!--- Content start---> | ||
- | Firstly, lets talk content | + | Firstly, lets talk <a data-tip="true" class="top large" data-tip-content="You may be thinking that this is the easy part, but it really isn't. Getting all your content up before the wiki freeze is quite the unexpected challenge." href="javascript:void(0)"><b>content</b></a>. You want to be able to, in detail, explain your entire project on your wiki; and if you don't get your content together before the last few weeks, you'll probably find yourself scrambling to get something onto your wiki as the <a data-tip="true" class="top large" data-tip-content="Not a position you want to be in!" href="javascript:void(0)"><b>deadline approaches</b></a>. |
- | Now, lets talk design. It's the most creative and fun part, but you'll have to work as a team to decide what sort of design you want. I suggest researching on good layouts and designs to base your wiki on; and remember, simple and functional beats problematic and complex. | + | <br> |
- | + | <br> | |
- | + | Now, lets talk design. It's the most creative and fun part, but you'll have to work as a team to decide what sort of <a data-tip="true" class="top large" data-tip-content="If you want to find out more about web design concepts, try googling or have a look at your favourite websites and the approaches they have taken." href="javascript:void(0)"><b>design</b></a> you want. I suggest researching on good layouts and designs to base your wiki on; and remember, simple and functional beats problematic and complex. | |
- | + | <br><br> | |
+ | <div class="SCJHIGHLIGHT"><p> | ||
In terms of getting your wiki together, it's best to start early. Below I have outlined a quick process you should follow to ensure your wiki is ready in time: | In terms of getting your wiki together, it's best to start early. Below I have outlined a quick process you should follow to ensure your wiki is ready in time: | ||
1. Build a site map, note down which pages you'll need. | 1. Build a site map, note down which pages you'll need. | ||
Line 67: | Line 68: | ||
5. Once you've got the basics together, start working on the design as a team, once your happy, freeze it and carry on with content. | 5. Once you've got the basics together, start working on the design as a team, once your happy, freeze it and carry on with content. | ||
6. Get it all done by the wiki deadline, and pray that your computer doesn't crash. | 6. Get it all done by the wiki deadline, and pray that your computer doesn't crash. | ||
+ | </p></div> | ||
<!--- Content end---> | <!--- Content end---> | ||
</div></div><br> | </div></div><br> |
Revision as of 02:10, 16 October 2014
Every iGEM team must produce a wiki to upload and present their work. When it comes to building your wiki, it helps to have some members with experience in web design.
If you haven't had the chance to familiarise yourself with these basic aspects of web design, w3schools offers a good beginners platform to web design. Sooner or later, you'll be able to recognise whats going on.
In the first section, I'll explain the basics of making a website. If you're looking to learn about wiki building approaches, read the second section. The third section explores the design process of our UCL iGEM 2014 wiki, and the fourth section explains a little about the basics of building your very own iGEM team wiki.
Of course, I'm really really simplifying this; so if you really want to learn more, I suggest checking out mozilla developer, codecademy and w3schools.
I suggest you get on Tumblr and start playing around with the themes and learn the ropes there. In web design as a beginner, you just need to imagine what you want. The community of web developers is perhaps one of the most helpful online communities out there, it's just a matter of trial and error.
Now, if you're familiar with HTML and CSS; let's delve a bit deeper into web design concepts. Javascript was something I stayed away from for a long time. Being able to simple incorporate javascript into your website makes it so much better. Over the course of the summer, I have learned to use and manipulate jQuery plugins. jQuery plugins offer a huge bunch of formatting and styling oppotunities. If you are looking for a bunch of jQuery plugins, have a look at unheap!
There are other web design languages and other aspects to Javascript as well, but my lack of experience with those means I won't be able to explain any further. When it comes to the basics of web design, the best thing to do is experiment. Download a text editor for coding, and experiment different things you come across. There are many different styles, plugins etc. out there; and whilst some may be a little difficult to work with, many are simple and elegant on a variety of web pages.
Now, lets talk design. It's the most creative and fun part, but you'll have to work as a team to decide what sort of design you want. I suggest researching on good layouts and designs to base your wiki on; and remember, simple and functional beats problematic and complex.
In terms of getting your wiki together, it's best to start early. Below I have outlined a quick process you should follow to ensure your wiki is ready in time: 1. Build a site map, note down which pages you'll need. -Look at the requirements -Look at what you're doing -Look at what past teams have done -Do you want to do anything new? 2. Get a graphics team together and start brainstorming -A good set of matching graphics can help set a theme to your wiki -Swag 3. Make a team portal page, link it to all the pages on the site map, this can work as a draft page for members to start uploading content. 4. Get your content together, keep revising it until you're 100% happy 5. Once you've got the basics together, start working on the design as a team, once your happy, freeze it and carry on with content. 6. Get it all done by the wiki deadline, and pray that your computer doesn't crash.