Website Design
During the summer'19 I was commissioned to design a website and its assets for Festember- South India's biggest student-run cultural festival
The following showcases my design for the same.
Read on for a detailed analysis/breakdown of the design process
The requirements kept in mind while designing were:
1) Minimalistic layout
and hence.
2) Easy to navigate
Before commencing the design, the fonts were decided for the website. We planned to have a Serif font for headings and a Sans Serif font for the body.
The fonts that ended up being deployed were: Playfair Display (headings) and Raleway (body)
Part 1: Externals a.k.a. Landing Page
The minimal theme begins at the first view itself (fig 1), minimal as in just two main elements - Festember logo and the register button.
From a user’s perspective, the primary reason for them visiting the website would be to obtain information regarding the schedule and contacts. Hence, these important components have been placed in the navigation bar, in addendum to the login feature which provides easy and fast logging in for registered users.
The menu hamburger button is located on top left. The design of menu is explained in later sections.That brings us to the next element: the down arrow which works in tandem to the user scroll. The type of scroll employed for this website is weighted single page type.
Coming down to next section : About (fig 2). This section is more of a placeholder for a sample group of similar pages. One, the about page itself, and another one explaining the theme of the current edition of Festember. The design gives mock-up for the actual "about" content and a very large negative space for an artwork (which was designed by another member of my design team)
The design also provided an empty template(fig 3) for any other section that the client may desire.
That brings us to the final section: The footer(fig 4). This section has all the listings found in the menu. The user after reaching the end of the page, will now desire to explore the website and this provides all the avenues the person can choose to. The arrangements of the links are in a decreasing order of importance for the targeted audience. The menu button is omitted in this section because almost all the listings of the menu are displayed in this view. This section also features the icons with back links to the client's other social media outlets, Facebook, Instagram and YouTube.
The website was brought to life by Delta Force, the coding club of NIT Trichy and hence the due credits to the developer and designer were placed at the bottom, which also had clickbacks pointing to their websites of choice.
A mobile-version of the website was also presented to the client, to provide a similar seamless experience across both desktop and mobile platforms, which is shown below:
Part 2: Internals aka Sub-Pages
The second part of the project was to design the internal pages, i.e. the sub-pages of the website.
Taking into consideration the probable pathway of a user, a strategic prototype was designed indicating the positioning of the respective elements and flow of information in coherence with the focus of the user.
The first image is the landing page when a user clicks, say for example the Events page . This page will feature the top-level sub divisions, Clusters, in this case. (Fig 5)
Choosing/clicking a cluster will in turn cause the "Events" text to interpolate linearly up and the list of events under that cluster will appear under "Events" text. (Fig 6)
This transitional motion is a subtle visual note to the user that the list consists of the events under that cluster.
On clicking an event, the user will be navigated to a new page, which provides all the details of that particular event. (fig 7)
Once in this page, a user can navigate between the events using the arrows ( clicking in desktop and swiping in mobile ) and the pages will get updated with the event.
MENU DESIGN (fig 8)
The design for menu was pretty much boilerplate, a hamburger menu icon which will rotate 45° upon opening. The list of menu will populate in a predefined order. A scroll bar will appear in devices where the menu list may overshoot.
A Mobile version of the views were also provided, which is as shown:
Part 3: Guest Lectures, Proshows, Workshops and Informals Page
On provisional completion of previous section, i was asked to design the parts that are less text intensive, and are just for display purposes, ie. the user was not expected to interact with the website to make any action. The above displays the mockup presented to the client.
Part 4: Background Designing
The background was required to be designed only using gradients and should be colorful. Hence, i took the approach of transitioning from black to white subtly, by having a dark shades next to black and progressively getting lighter and ultimately white with light gray accent.
Part 5: Favicon
So the Last part was to create a favicon for the website. The asset designed is as follows:
Part 5: Poster
A Poster was required to be made announcing the website going live. I decided to create a motion poster, which would be more appealing than just a regular static poster.
The website is now live, head on to festember.com to view the final product!
The project was designed using Adobe Photoshop and Illustrator.
This Project would not have been possible if not for the timely inputs from the members of my design team, Graphique.
If you are still reading this and made it this far, I thank you for your genuine interest in my work. Feel free to drop a mail to yaglpix@gmail.com for open feedback, comments, collaboration, freelancing or for a casual chat :)
