One of the projects I am currently working on is designing the landing page for Founders School, an event at UCLA. I was however bored of making the same sort of landing pages for everything and wanted to do something more edgy+creative this time and explore different design possibilities. Here’s my process for what I did.
The basic purpose of the website would be to tell creative engineering students about the event, pitch to sponsors and write about the speakers.
The theme/idea behind the event was to inspire engineering students to network with entrepreneurs and learn non-technical skills that they can’t learn at school in a collaborative environment.
What I got (and what most designers get from the clients) looked something like this though:
It’s very important therefore to have a brainstorming session with the client where you can define the goals for the design and the idea and vision behind it.
After building a huge collection of keywords that describe the design, the clients can help you pick the top three or four that they think are the most important and most clearly define the theme. If that’s not possible, its crucial to spend some time and extract that information yourself from the brief or ideas received from the client. The best way to do that is to have their ideas up on a wall and break them down into keywords and see which ones occur most often. This is really helpful when you come to the stage of doing the actual branding and design.
Now that I had some keywords to work with, I headed over to Behance and Dribbble to get my creative juices flowing and browsed through a couple dozen designs that I liked and started creating a mood board and finding similarities in visual patterns and colors that fit the keywords defined. This gave me some idea as to how I want to introduce the event, when to bring focus to the speakers and how to bring focus to certain elements. I decided that I wanted the website to be fun, creative, playful and bold in order to attract the creative engineers who would be interested in this event and make it seem like a great escape from the monotonous and tiring CS courses.
Now that I had a good idea about the theme I wanted to portray and the approach I had to take, I used good old color theory to find that the the three colors — Blue, Red and Yellow would be the best choice for the website. I chose tones that popped a little and went well with each other from the designs in those tones on Dribbble and came up with this.
The three colors are bright and represent energy, connectivity and creativity which was perfect for the theme and the approach chosen for the event branding.
This was harder for me since I am not that good at Identity Design yet and its honestly raw experimentation for me where I make one thing and keep tweaking it till I get something that defines the idea well and stays true to the brand.
The end result is shown in the image above. The colors are from the color palette, the three rounded rectangles in pink and yellow show connectivity and collaboration and are placed between the founders’ ‘O’. It’s all put in a box to represent that the event is bringing together all of this in one place. The three rounded rectangles become part of the brand and are used throughout the page for style and a reinforcement of brand.
Once I had come up with the logo and knew the identity of the brand, I came up with a style guide for the website where I chose the color palette, the type and the visual style and elements I wanted to use for different purposes. Here’s what I came up with.
This would be helpful if the website is not being developed by me and if there are multiple people working on the design, development or maintenance.
Now that the style guide and brand identity was ready, It didn’t take long to make the mockups for the website in Sketch using a nice grid system. The splash screen does the simple job of introducing the event, telling what it’s about and who it is for, when it is and how to get updates or become a sponsor.
The picture in the back adds an effect of connectivity but does not take over the content in any way which still has the center stage. It was color corrected to make the highlights slightly red so that the blue background reveals that slight red through it. The other visual elements all came together to guide the eyes to important facts creating a nice visual hierarchy. The end of the splash screen was cut with a rough edge to make people interested in seeing what lies below the fold and reinforce that there’s more to the website than just this. I’m still working on the rest of the website and will update this as I make more progress…