Categories
blog

Delight & Design Crit

Phase 3: Major Project

A well-designed UI can have a significant impact on the website’s conversion rates and achieving business goals. By guiding users through a clear and intuitive interface, UI design can lead them to take desired actions, such as making a purchase, submitting a form, or signing up for a newsletter. Effective UI design can optimize the user flow and improve conversion funnels. UI design is necessary in website development to create a visually appealing, user-friendly, and efficient interface that enhances the overall user experience and differentiates the website from competitors.


Essential components of branding & UI design:

Brand Identity:

Branding establishes the visual and verbal identity of a company or organization. It includes components such as the logo, color palette, typography, and overall visual style. UI design should align with the brand identity to create a consistent and cohesive user experience.

For finalizing my brand identity, I tried to understand the mindset & design theories of architects. As per my user research, I got to know that 75% of the architects look for minimalistic designs everywhere, a building or a poster etc, as per the latest design trends.

In order to complete the brand identity, I decided to go with minimalist design approach combined with geometric 2D lines, which defines my user group’s work identity. Architects tend to always work with lines on large sheets of paper and create 2-dimensional & 3-dimensional visuals of their buildings. I chose 2D geoemetric work because of their ease of understanding & creation.

Logo & Visual Elements:

The Logo Design: The logo is a central component of branding. It should be prominently displayed in the UI design, typically in the header or footer. Additionally, other visual elements such as icons, illustrations, and graphics should reflect the brand’s style and personality.

Finalizing logo was a major part of brand identity. My concept behind the logo design was the answer of question – “What people resemble most with history, visually?”

Now there were two different directions I was going:

Represent my website logo through buildings.
OR
Represent my website logo by somehow showcasing history in it.

To incorporate both of the prompts in my design, I decided to use any element related to greek architecture in logo.

Why Greek Architetcure?: Throughout history, art and architecture have frequently been intertwined. These artistic movements, which aimed to revive the aesthetics and values of classical antiquity, often portrayed human figures in ways reminiscent of ancient Greek ideals. Consequently, these depictions further reinforced the association between Greek architecture and people in historical representations.

Hence, the element of Greek Architecture that I decided to infuse in my design was the 3 greek columns all of the architects study about when they start exploring architecture. These columns are doric order, ionic order and corinthian order. I choose the simplest one, which is doric order column.

The column contains a simple squared capital and base with flutes carved in it’s long cylindrical section. Flutes are long straight lines engraved in greek columns or pillars throughout it’s circumference.

I took the straight lines and duplicated it numerous times. Then I bended it form a D-like shape (which resembles the site name: the-doric-order.blog). The logo defines the brand identity of being minimalistic, resembles history of architecture (greek architecture), and matches with the theme of website’s name (the doric order).

Concept: Greek Architecture Column
Finalized Logo: the-doric-order.blog

Visual Elements: Visual elements in my design included illustrations. While finalizing the look of illustrations in my design, I kept in mind of keeping the same format as per my minimalist theme. I used 2-dimensional geometric illustrations to show building elevations on my website.

UX Considerations made while chosing the 2-dimensional line vector graphics are mentioned below:

  1. Less point vector graphics: Since I can’t shy away from illustrations & visual representations on my website, I needed to come up with the type of design which is not too heavy for the website server. These type of SVG vector graphics contains less points making them less havey and easy to load. Also, they can be easily created on adobe illustrator.
  2. Clean graphics: These type of illustrations go well with the minimalist brand identity of the website maintaining consistency in design all across the pages.
  3. Accessbile: Since the graphics are quite clean & minimalist, they are easy to read & understand visually. Having too many lines in graphics can confuse people who are schizophrenic.
2D geometric line SVG vector graphics

Colour Palette:

A well-defined color palette helps create a recognizable and consistent brand presence. The chosen colors should be aligned with the brand’s personality, evoke the desired emotions, and consider factors like accessibility and usability.

The colour palete that I intended to choose was of shades of black, beige, white and orange. Reasons of selection of the colours are mentioned below:

  1. Shades of Black & Grey: Black comes in one of the most used standard colours through out globe. It conveys the emotions of power and professionalism. I wanted to generally use this colour in paragraph texts, line vector illustrations and some subheadings.
  2. Shades of Beige: Beige is a neutral color that is not overly vibrant or attention-grabbing. It can provide a calm and understated backdrop for content, allowing other elements to stand out without overwhelming the user. It also complements a wide range of accent colors or imagery. It is also considered a safe choice for ensuring good contrast and readability. It can provide a suitable background color for text and icons, ensuring that they are legible and accessible to users with different visual abilities. Hence, I used this colour mostly as background. The emotion that it converys are elegance and luxury.
  3. Shades of White: White is often associated with cleanliness, simplicity, and minimalism. It provides a clean canvas for UI elements, making the interface appear uncluttered and visually appealing. This simplicity allows users to focus on the content and functionality of the interface. White is also known to create a sense of space and openness while ehancing perception of space. It can make the UI feel more expansive, and reduce visual clutter. Hence, I used white as a background for individual building illustrations, so that they are highlighted and provide a clean slate for line vector illustrations. I also used this colour as button text, for better contrast ratio.
  4. Shades of Orange: This colour is attention grabbing. Orange is a vibrant and energetic color that naturally attracts attention. In UI design, it can be used strategically to draw users’ focus to important elements, such as call-to-action buttons or notifications. Its eye-catching nature can help create a sense of urgency or highlight key interactions. Also it gives an emotion of positivity, friendliness and enthisiasm among users. When implemented consistently in UI design, it helped to reinforce brand recognition and create a cohesive user experience. I have used this colour in logo, buttons, <h1> headings and label pointers.

Typography:

The selection of appropriate fonts and typography styles contributes to the overall visual appeal and readability of the UI design. Consistent typography across the website helps reinforce the brand’s identity and enhances the user experience.

Architects often prefer fonts that reflect professionalism, clarity, and a sense of craftsmanship. The type of fonts that are most popular among my category of users are Serif & San-Serif fonts. Serif fonts, characterized by the small decorative lines or strokes at the ends of characters, are often seen as classic and traditional. They can convey a sense of authority and formality. Sans-serif fonts are clean, modern, and straightforward. They lack the decorative strokes found in serif fonts, resulting in a more minimalistic appearance. Many architects appreciate the simplicity and readability of sans-serif fonts.

As per archdaily, the most pouplar font among architects & designers are: Futura, Bahaus, Helvetica, Bodoni, Gotham, Butler, Modeka etc.

www.archdaily.com

Among these fonts, I selected Butler and Helvetica as my final fonts. I tend to use Buter in headings & sub-headings and helvetica in reading paragrapgh texts. Reasons for selecting these fonts are:

  1. Clarity and Legibility: Both Butler and Helvetica are highly legible fonts, which is crucial in UI design. They have simple and clean letterforms that make them easy to read across different screen sizes and resolutions. Clarity is essential for ensuring that users can quickly comprehend the content and interface elements.
  2. Versatility: Butler and Helvetica are highly versatile fonts that can be used in a variety of UI contexts. They are well-suited for both headings and body text, allowing for consistency and coherence in typography throughout the interface. Their neutral and balanced designs make them adaptable to different design styles and aesthetics.
  3. Global Accessibility: Butler and Helvetica are known for their international appeal and readability across different languages and cultures. Their clean and neutral appearance helps prevent conflicts with specific linguistic characteristics or cultural associations, ensuring a more inclusive user experience.
  4. Easy fallback fonts: Easy & very similar fallback fonts are available Times New Roman(Butler) & Arial (Helvetica).

Layout & Grid Systems:

Thoughtful layout design and grid systems ensure a well-structured and balanced UI. Grids provide a framework for organizing content, aligning elements, and creating visual harmony. Consistency in layout across different pages and sections helps users navigate the website more intuitively.

I chose a 2-column layout as my grid system on the webpage. Reasons for selecting 2-column layout grid are:

  1. Flexibility and Responsiveness: The 2-column layout with margins is highly adaptable to different screen sizes and devices. It is a responsive design approach that can adjust to various resolutions and orientations. The columns can stack vertically on narrower screens, ensuring content remains accessible and readable across different devices. I can instantly make the design 1 column on smaller screen sizes, without changing the layout too much.
  2. Balance and Structure: The 2-column layout provides a balanced and structured design. It offers a clear separation of content into two distinct columns, creating a visual hierarchy and making it easier for users to scan and understand the information. The margins on the sides of the columns help maintain a comfortable reading experience by providing visual breathing space.
  3. Simplicity and Scannability: The 2-column layout with margins promotes simplicity and scannability, allowing users to quickly find the desired information. It presents content in a linear and straightforward manner, reducing clutter and enabling users to navigate through the interface more easily.

Leave a Reply

Your email address will not be published. Required fields are marked *