Lab 3 - Part 1 - Cognition
3. Browse three university websites in the USA (observing content, layout, colour, responsiveness):
| US Universities | Content | Layout | Colour | Responsiveness |
|---|---|---|---|---|
| Webber International University | The homepage offers direct access to major categories (Academics, Admissions, etc.). Course offerings, on-campus and online programs, contact and location information are present. Some pages may become text heavy, but the structure is logical. | The site uses a consistent navigation bar across pages. Flow is straightforward, with major sections clearly segmented (Programs, Catalogs, About). The “Home Video” page is a special visual section. | The university’s official colours are Forest Green & Gold. On the website, dark green is used for headers and accent bars; gold/yellow is used for highlights. | The site does respond on mobile; content rearranges (e.g. sidebars become full width). However, the top navigation bar (navbar) is not always ideal on small screens: links become more compact and may be harder to tap. |
| University of Massachusetts Amherst | Content is well curated: not overly verbose, with emphasis on storytelling, visuals, calls to action. Because UMass is large, different sub-sites (colleges, departments) may vary in style and depth. Their “Ecosystem” project aims to unify content across units. | The homepage frequently uses large hero imagery or full-width visuals. Subsections are broken into tiles or blocks. Under the “Ecosystem” redesign, many unit sites follow a shared layout template for consistency. | UMass uses maroon / deep red as its primary accent colour in branding. Neutral greys, white backgrounds, and high contrast text are common in their design. | Mobile-first design: the site adapts well to phones and tablets. The visual elements (e.g. hero images) are scaled or removed on smaller devices. Their Drupal / “Ecosystem” architecture helps maintain responsive consistency. |
| Oral Roberts University | Course and academic program information is fairly easy to find via menus. The site also emphasizes the mission, values, faith component, which sometimes precedes academic content. ORU publishes a “Voice and Tone” guide for site content, aiming for clarity and readability. | The layout places “About / Mission / Vision” areas prominently, sometimes before academics. Navigation is standard and predictable. Some sections use large imagery or banners. The site uses a content style standard across pages (Voice & Tone guide). | ORU’s official colours are Navy and Gold. On the website, navy is used for header bars and background accents; gold / yellow used for highlights, buttons, and accents. | The site does scale on mobile, with stackable menus and content blocks. I did not observe major breakage at small widths, though some image banners shrink. |
4. Common Features of the US University Websites
- Consistent Branding: Each university website uses a clearly defined colour palette and visual identity that aligns with its institutional brand (e.g., UMass Maroon, ORU Navy and Gold, Webber Green and Gold).
- Responsive Design: All sites adapt well to different screen sizes and devices, ensuring that key navigation elements and content remain accessible on mobile, tablet, and desktop.
- Clear Navigation and Information Structure: Course information, admissions details, and contact links are easy to locate, typically accessible from the main navigation bar or homepage tiles.
- Strong Visual Presentation: The use of high-quality imagery, hero banners, and modular layouts enhances visual appeal while maintaining readability and engagement across pages.
5. Browse three university websites in Ireland (observing content, layout, colour, responsiveness):
| Irish Universities | Content | Layout | Colour | Responsiveness |
|---|---|---|---|---|
| UCD | Good content, they appear to have tried to avoid too much text while keeping essential information clear and accessible. The UCD Design Library helps maintain consistency and accessibility across schools and departments. (UCD Design Library) | Clean and well-structured layout, using modular components and consistent templates throughout. Pages follow a clear hierarchy with easy navigation, banners, and image blocks. | Primary colours include UCD Blue, UCD Navy, UCD Gold, UCD Rich Green, and UCD Bright Green, based on UCD’s official brand identity. Traditional colours “St Patrick’s Blue and Saffron” are also part of its heritage palette. (UCD brand colours) | Fully responsive, the UCD Design Library provides mobile-first templates ensuring accessibility and proper scaling on phones and tablets. |
| UCC | The content is well organised with sections like “About”, “Study”, “Research”, and “News”. It provides extensive detail while maintaining readability and visual balance. | Structured layout with dropdown menus, clear navigation, and grid-based design. Content blocks are visually separated and easy to scan. Internal search and quick links aid usability. | Brand colours include UCC Yellowas an accent, complemented by neutral greys and black, with secondary greens (e.g. “Quad Green”) based on official design guidelines. (UCC Brand Guide) | The website is mobile-friendly and adapts smoothly to different screen sizes. UCC migrated all main pages to a fully responsive design as part of their digital refresh. (UCC web migration) |
| Atlantic Technological University | The site features clear and concise content, accessible navigation, and a focus on user experience (UX). It avoids dense text and makes good use of white space and imagery. (ATU News: best UX) | Modern, modular layout with grid-based sections and consistent formatting. Emphasis on UX design and accessibility improvements across all devices. | Brand colours include Navy, Teal, and Green — representing the ATU identity across regions. Colours and typography are standardised through ATU’s brand guidelines. (ATU Brand Guidelines) | Highly responsive — recognised for its strong mobile and UX performance. The ATU website was shortlisted for the Spider Awards for Best UX & Customer Experience. (ATU UX Award) |
4. Common Features of the Irish University Websites
- Clear and Organised Content: Each university provides well-structured information with clear sections such as “Study”, “Research”, and “About”. Content is concise but informative, making it easy to locate relevant details.
- Consistent Layout and Navigation: The websites use modern, grid-based layouts with consistent menus, banners, and page structures, helping users find information quickly.
- Strong Visual Branding: All sites follow institutional brand guidelines, maintaining a consistent colour palette and use of logos — for example, UCD’s blue and gold, UCC’s yellow and green, and ATU’s navy and teal.
- Responsive and Accessible Design: Each website adapts well to mobile and tablet screens, with content rearranging for readability and navigation remaining functional across devices.
7. Differences Between Irish and American University Websites
Yes, there are some noticeable differences between the Irish and American university websites in terms of design, content, and presentation.
- Content Focus: Irish university websites tend to emphasise academic information, research, and institutional structure in a concise and formal way. American university sites, by contrast, often focus more on storytelling, campus life, and visual engagement, using videos, large hero images, and promotional messages.
- Navigation Style: Irish websites typically use straightforward, structured navigation with dropdown menus and logical page hierarchies. U.S. sites often include more interactive elements such as animated menus, multimedia banners, and “calls to action” on the homepage.
- Theme and Visual Design: American universities favour bold, dynamic visuals and strong marketing aesthetics designed to attract prospective students. Irish sites generally use simpler, more functional designs, reflecting an emphasis on clarity and accessibility over visual spectacle.
- Mobile and Responsiveness: Both regions use responsive design, but American sites tend to adopt a mobile-first approach with more adaptive multimedia. Irish sites, while also mobile-friendly, usually maintain a cleaner, text-based presentation with less reliance on video or animation.
Overall, Irish university websites prioritise practicality and academic clarity, while American sites place greater emphasis on engagement, branding, and visual storytelling.
8. Design Styles
a. Flat Design
Flat design is a user interface design style that uses simple, two-dimensional elements and bright colors with no shadows, gradients, or textures. It is often contrasted to the skeuomorphic style that gives the illusion of three dimensions. It is a minimalist design style that focuses on simplicity, clean lines, bold colours, and clear typography. The goal is to make interfaces easy to read and navigate by emphasising functionality over decoration. This style became popular with the rise of responsive and mobile-first design.
maybach-guitars.deb. Design style definitions and an example websites:
- Skeuomorphism is a design style used in graphical user interface objects. Skeuomorphic objects mimic their real-world counterparts in how they appear and how the user can use them. Skeuomorphism uses shadows, gradients, and realistic details such as buttons that look press-able or notepads that resemble paper to create a sense of depth and tangibility. This design was popular in the early 2000's but is still used today.
Example website: arrowdynamics.dev - Neumorphism (or "New Skeuomorphism") is a design trend that aims to blend realism with minimalism. It gives UI elements a soft, extruded look, making them look dimensional and flat simultaneously. Because neumorphism uses light and shadow it doesn't lend itself well to websites with a dark mode. In the website linked here, there are navigation buttons in the top right corner which typify neumorphism. Note how the become "flat" when selected.
Example website: solomidtech.webflow.io
Useful design website: Neumorphism Element Generator - Glassmorphism is a modern web design trend that creates the look of frosted or translucent glass. It uses blurred backgrounds, soft transparency, and subtle shadows to give depth and layering while keeping a clean, elegant feel. Elements often appear as if they’re floating above a colourful or gradient background.
Example website: genesis.live
Useful design website: Glass Element Generator - Neubrutalism (or Neo-Brutalism) is a bold web design style that embraces raw, unpolished aesthetics inspired by brutalist architecture. It uses high contrast, flat colours, thick borders, simple geometric shapes, and strong typography, often appearing deliberately “imperfect” or hand-made.
Example website: minutecryptic.com
Useful design website: Neobrutalism Styled Components
Comments
Post a Comment