Grup 14 |

Scroll to see the details

I got the oportunity to work on this project from almost the start. They contacted me to design and develop the new website. This project helped me learn a lot about web design, probably the one that helped me the most of all the ones I worked with. I discovered Sass, Sublime Text, Bolt, Flexbox (thanks Aagat), tools that I'm going to be using in many of my future projects.

The Grup 14 Starting XI


Or just a geeky way to show what I used to build it.


Bolt CMS
A very powerful, easy-to-use CMS. It uses Twig templates, which makes web design fully customizable.
Sass
"CSS with superpowers". I couldn't describe it better.
Bitbucket
I discovered git through Bitbucket and it's proven to be a very powerful asset. It makes collaboration and file tracking really easy.
Twig
Bolt uses Twig to ease the template development, and when you get comfortable with it, it opens a lot of possibilities.
Icomoon
I used FontAwesome but I needed my own icon font, and Icomoon is an amazing tool.
Sublime Text
My app of choice to code. Combined with plugins from Package Control, it's a must.
JS
With HTML and CSS you can make nice websites, but to make them fun, you need some JSuice (yeah... sorry).
jQuery
It makes JS so much easier to work with.
Illustrator
Most of the icons in the site were designed with it.
Photoshop
I designed all the initial website mockups and most of the graphics in the site. A must.
Sketch
Great app for designing icons, exporting them... My favorite for app designing.

Logo design

Grup 14 (or Clan Sunyol, the way to group was called when I joined) had another designer before I came in. He designed all these iterations and the initial version of what would become the final logo. When we settled for "Grup 14", I removed the ball, put a 14 inside a circle instead and added 14 red lines.

Initial web design

We kept changing the main page, changing the featured articles at the top, going for different sections... getting at the point where everyone at the Grup was satisfied of what we designed.

First released version

We launched the site in March, 2015. The site was responsive (you must support mobile devices nowadays) and featured different pages for each article category, about page, contact page... But eventually, we felt the need to improve this design and implement many improvements.

2.0 Redesign

Launched in August, 2015, the 2.0 redesigned featured a new sidebar, improved design for each category, moved from images to icon font for most of the icons in the site... I also adjusted the max-width to take advantage of HD and 4K screens. I also implemented the site-wide search with jQuery.

Visit the website

1992 Xus Badia | Released under the Attribution 4.0 International License