Plants vs. Zombies Wiki
Advertisement

Well as you might know, flat web designs are getting so popular. They're everywhere. Even companies like Microsoft, Google, Apple, all switched their designs to a flat one instead of a realistic (skeuomorphism) one.

Most people here might probably oppose this kind of design, but hey, this thing gets so popular, and it actually looks nicer and more mature for this wiki. Instead of throwing those PvZ-related stuff everywhere on the UI (UI=user interface), which makes this wiki a little childish (no offense, sorry), why not using flat UI, which is cleaner, and easier to read.

NO, THIS IS NOT A VOTING. THIS IS ONLY A PROOF-OF-CONCEPT OF WHAT WE SHOULD DO TO MAKE THIS WIKI LOOK BETTER.

White or gray background[]

This is the very first thing you need to do on flat designs. Most of those flat designs do use white or light gray as the background. This means that we need to take away those PvZ background on this wiki. Fortunately, there's indeed a plus side of this. Slower connections can get a faster speed by removing it, because the background basically takes a bit more time to load on those kinds of slow network. It's very useful in Indonesia, since it's one of the countries with worst internet speed. This also helps saving some data. If you're on a data plan, and you use USB tethering to connect to the internet like me, this could be useful.

By eliminating the background and instead using one color as the background, this will reduce the page's byte size, by like few hundred KBs. Useful if you continuously checking out this wiki, because if you check this wiki like 10 times a day, and if the background takes like 100KB, then 100x10=1000KB=1MB. If you check it everyday, it could hit like 30MB or so.

Borderless things[]

You can also take out some borders in certain areas of this wiki. This helps making this wiki's interface cleaner and simpler.

Gradient-less things[]

This partially works on Wikia, because I'm not a web designer; I'm just a student. If you can fix it, then do it.

Flat interface also removes most of the gradients that exist. This means that no buttons should have those gradients from a lighter color to a darker one. This also helps making a cleaner interface. On buttons, this only partially works, but it's possible to fix it if you're good at css.

Curved things are OK, and so does sharp, non-curved things.[]

Curvy stuff is OK in flat UI, and a lot of people uses it. However, be consistent. We don't wanna see some stuff becoming curvy and the rest are not.

Attractive colors[]

It's not enough to make a flat, gradient-less, borderless UI. The colors of the UI must be attractive too. I recommend green colors to symbolize those plants. You can take a look at some best flat UI colors here .

Fonts[]

Fonts are another thing that we should consider while making a flat UI. I've uploaded some Proxima Nova fonts here, which looks awesome for flat UI. Arial looks too boring for this so why not switching the fonts to that instead?

A list of best free flat design fonts can be found here .

Screenshots[]

These are from the PvZ Fan Fiction Wiki. A lot of stuff is still unfinished, so here's what I've got so far by tweaking the CSS.

Examples of good flat UI sites[]

You can check out best examples of using flat UI in sites by going here, here, and here.

That's all for now.

Advertisement