-
Notifications
You must be signed in to change notification settings - Fork 2
Design Overhaul
Christopher Bloom edited this page Jan 20, 2016
·
54 revisions
We're looking for something light, clean, and responsive. This site will use Foundation 5 as a base, so that should inform the process. I am trying to avoid designs where the illustration is the main form of beauty (for instance), since it's a community site and we won't have a lot of day-to-day design.
[ ! ] denotes the top picks/finalists in each section.
- [ ! ] Paragon does guild sites perfectly (icons, tiers, media): http://www.paragon.fi/media
- [ ! ] Manaflask, does Ensidia: http://manaflask.com/en/
- Method Guild: http://www.methodwow.com/
- Blood Legion guild: http://www.bloodlegion.com/ (check out that "needs" widget)
- [ 1 ] For more texture, wowwiki does incredibly well: http://www.wowwiki.com/WoWWiki:WoW_Icons/Icon_List/Images, http://www.wowwiki.com/Expansion
- WoWInsider: notice the way they use the context images for stuff. gives it that "texture". http://wow.joystiq.com/
- MacroWoW has good texture and wow-feel: http://macro-wow.com/
- Pull instance graphics from the armory
- Honestly, treehouse community is best: https://teamtreehouse.com/community. Our forum should be a single stream (like threehouse community and Discourse) where all posts run inline tagged well. No need for sub forums, people don't hunt through those anyway. Will also help surface a lot more activity. Similar font: https://www.google.com/fonts/specimen/Varela+Round
- Discourse-style: http://try.discourse.org/
- Ars Technica style: http://arstechnica.com/civis/index.php
- Look into ThemeForest: http://themeforest.net/item/youplay-gaming-wordpress-template/full_screen_preview/11959042
- Mashable wins. Basically do mashable.
- http://www.webdesignerdepot.com/2014/04/how-to-beat-the-paradox-of-choice-in-ui-design/
- Smashing. http://www.smashingmagazine.com/2014/04/01/freebie-flat-icon-set-60-icons-png-svg-eps-psd-ai/
- Vice does this well:http://motherboard.vice.com/read/uncontacted-tribes-die-instantly-after-we-meet-them?trk_source=popular
- Use this palette/flat design: https://getgrav.org/
- Colors: http://codepen.io/JonasB/pen/PwWXqg, http://codepen.io/colewaldrip/pen/bdZVGd
- https://apiary.io/
- http://benmildren.com/projects/flat-ui-colors/index.html
- Treehouse is best: https://teamtreehouse.com/forum
- DIY has perfect whitespace and illustration: https://diy.org/skills/rocketeer
- Zurb pretty much nails dense content: http://foundation.zurb.com/docs/index.html
- Scotch.io: http://scotch.io/bar-talk
- Dribble: Dribble has to show a lot of content, plus it uses the "light on top of texture" that I love: http://dribbble.com/teams
- A case study of IMDB redesign is a great look at imagery and dense content: https://medium.com/p/2e9e865dd83
- Treehouse's flat iconography
- The way Gravitate does their header and front page: http://www.gravitatedesign.com/
- raid hub: http://www.gravitatedesign.com/work/
- ReadWrite: huge amounts of content, whitespace. http://readwrite.com/
- Fireshell, light, content, love that header style: http://getfireshell.com/
- Forefather's group for responsive and texture: http://forefathersgroup.com/
- 45Royale, not as good after the redesign, but still clean: http://45royale.com/
- Huge list: http://bashooka.com/inspiration/flat-web-ui-design/
- paper.li, handles typography and whitespace well: http://paper.li/neutralthoughts/1353674004
- Peacock, light design: http://peacock.st/
- This fucking insanity: http://std.li/pastel/home.html#home
- Black Pixel: http://blackpixel.com
- Kaleidoscope app: http://kaleidoscopeapp.com
- Thinkshout's whitespace with semi-contained "sidebar": http://thinkshout.com/blog/2012/01/lev/entity-registrations
- A really good font, and really good design elements. http://designmodo.com/flat-free/
- If we want to go the "hexagon" route: http://blog.ansacopeland.com/chatter/2013/3/25/hover-friendly-hexagons
- I really like the way this header behaves (as well as the whitespace): http://singlebrook.com/blog/creating-custom-beans-in-drupal-part-1
- http://www.webdesignerdepot.com/ - a lot of content, whitespace, light color but with great design.
- Flat UI: http://designmodo.github.io/Flat-UI/, PRO: http://designmodo.com/flat/
- Mashable has the perfect layout: http://mashable.com/2013/05/31/bill-nye-qa/?cid=Mash-Product-RSS-Pheedo-All-Partial
- More really good layout/design from ink: http://ink.sapo.pt/
- Great flat, content-focused layout: http://listverse.com/2013/01/03/10-deadliest-world-events-in-human-history/
- Font we should totally use: http://www.fontsquirrel.com/fonts/source-sans-pro
- I really like the Lato font used body text here: http://thomashunter.name/blog/the-javascript-event-loop-presentation/
- clearinghouse of great design: http://www.dtelepathy.com/blog/inspiration/40-innovative-ui-concepts-dribbble
- d3js.org - Amazing hexagon header.
- https://variancecharts.com/index.html, great offwhite color, typography, minimalism
- Raleway + Lato: http://haptime.in/
- OpenSans
- Museo Slab
- League Gothic + Proxima Nova: http://ifontyou.com/combos/40
- Font combinations: futura/museoslab - http://ifontyou.com/combos/79
- Blurred backgrounds: https://www.dropbox.com/sh/7k21t6kh9b3wgd0/TCr7oqp9lC
- HUGE pile of game resources: http://www.mmo-champion.com/threads/758437-Huge-Collection-of-WoW-Icons-Interface-Elements-Loading-Screens-etc!
- Guild tabard: Clean PNG, Back. Front. (View "raw" for full resolution)
- Iconic icons: Chris has a full, paid subscription to this, use them!
- Full list of WoW icons. Would like to see these used heavily throughout the site, taxonomy, fields, etc
- As part of the "expansion" feature (essentially time-based taxonomy), we'll need to use the expansion logos (also using context here): http://www.wowwiki.com/Expansion
- GRADIENTZ!! http://css3ps.com/
- Downfall history timeline: http://tympanus.net/codrops/2013/05/02/vertical-timeline/