Interactive Design：Exercise 1
TANG LILIN (0376668)
#Website 1: Jordan Gilroy Portfolio
Link：https://www.jordangilroy.com/
 | |
|
Purpose and Goals
Purpose：This is Jordan Gilroy's unique and personalized portfolio website. To showcase his design expertise and past accomplishments to potential clients and companies.
Goals：For personal branding and business conversion.
 |
| fig 1.2 Four Main colors used by Jordan Gilroy Portfolio |
Color：Above are the four main colors used in the website. Black and purple such creative collision of colors will visually impress the user with a strong recognition.
fig 1.3 the Navigation Bar of Jordan Gilroy Portfolio
Layout：
The structure of the website is clear, one-page scrolling structure. The navigation bar is fixed at the top left corner, which clearly shows the four sections of the website, namely Info, Work, Achieve and Contact, and users can quickly switch between different sections by clicking on them. Each section is clearly partitioned.
 |
| fig 1.4 the Achieve part of Jordan Gilroy Portfolio |
In the Work and Achieve sections, the Grid System is used to display the work and achievements, which enhances the visual rhythm. The design is clear, especially in the Achieve section, where users can quickly see from the small picture what the achieved design looks like.
Functionality and Usability
 |
| fig 1.5 the Navigation Bar of Jordan Gilroy Portfolio |
When the user scrolls through the page, the icon of the corresponding section in the navigation bar will appear as a dynamic progress bar, marking the browsing progress in real time. This greatly improves the smoothness of browsing, and this kind of detailing reflects the importance of user experience, which will make the target users recognize the professionalism of the designer.
Content Quality and Relevance
Info Part：A list of skill sets and a strong and concise presentation of core strengths to the target group.
Work Part：A selection of representative cases from the past, with a brief description of the name of the project, the areas involved, and clear, textured images.
Achieve Part：The timeline shows the achievements over the years, so that users can visualize his career growth trajectory, highlighting the continuity of Jordan Gilroy's personal development and professional reliability.
Performance
The website responds well on both computer and mobile, the page loads smoothly without lagging. Any image on the site opens quickly and clearly. The animation of Jordan Gilroy's personal brand logo is silky smooth, and the small images displayed in the Achieve section are responsive if they can be scrolled.
#Website 2: Lumos Marketing
Link：https://www.lumos-marketing.com/
 | |
|
Purpose and Goals
Goals：Their goal is to help businesses INCREASE their INCOME. “ILLUMINATE BUSINESS POTENTIAL”" ENHANCE COMMERCIAL POWER"
fig 1.7 Five Main colors used by Lumos Marketing
The above are the main colors used in the website. This color combination creates a modern feel visually. The #B4DBDC, which gives calmness and trust, is paired with the fashionable #CB407B, which makes the overall atmosphere of the website fresh and energetic
Layout：
- With light gray as the background, the whole has a lot of white space, so that the relationship between primary and secondary clear, strong sense of breath.
- The whole website uses sans-serif fonts, bold and eye-catching titles, and key phrases are bolded for clarity and readability. The layout is rhythmic and fully utilizes the design principle of continuity.
- In the homepage, “ILLUMINATE BUSINESS POTENTIAL” “ENHANCE COMMERCIAL POWER” "For every For every business" on the homepage already indicates the business of the website.- Scrolling single page design
- Overall framework: a one-page structure to build the site, the structure of the board is very clear and compact, logical.Hero Section—> Case Studies —> About Us —> Testimonials —> Services —> Contact
Functionality and Usability
 |
| fig 1.9 Lumos Marketing |
- Navigation Bar is simple and clear, - It has buttons to jump to the contact section in each panel, and uses #CB407B pink color in strong contrast with the light gray and black background. This can increase the conversion rate of the website.
The style of the content is friendly and non-oppressive and fits the brand's target group. The content of the website clearly explains the brand's philosophy and objectives. It builds trust with the user by showing intermittent case studies and testimonials from past customers. Some of the terminology is explained, friendly and easy to understand. The website is logical and each sentence is precisely tailored to the concerns of the target group.
Performance
The website responds well on both computer and mobile, with smooth page loading and no lag. The animation, fade-in and fade-out effects, and the interaction with the user are all appropriate, and can add color to the website. Safari and Chrome display properly and perform well. The user experience is silky smooth.
Weakness
 |
| fig 1.10 Secret Case of Lumos Marketing |
- Case Studie After clicking on the cases, some are secret cases, and some are jumping to external PDF files and lack previews. This may reduce the user experience. - The webpage scrolling distance is long, which may lead to user fatigue. - Mobile Adaptation: Browsing on cell phones is still smooth.
#Website 3: BOYD Gallery
Link：https://boyd.ae/
 | |
|
Purpose and Goals
Purpose：BOYD is an online gallery based in the UAE that brings together artworks from around the globe. boyd will help to create a strong connection between the style of your room and the artwork you choose.
Goals：Provides a seamless and powerful experience for individuals and buyers, ensuring complete control over the art buying process.
Visual Design and Layout
 |
| fig 1.12 the main colors used in BOYD Gallery |
Color：
The website adopts beige (#F5F3EB) as the background color and brown (#64504A) as the font color, which conveys a warm, natural and high-class atmosphere, and fits in with the artistic atmosphere.
Layout：
Overall framework: a one-page structure is adopted to build the website. The layout is simple and clear. The focus is on displaying artwork and helping to choose the perfect artwork to fit the overall interior style, which will increase the attention of the target users.
Font： using serif fonts, simple and generous. Text hierarchy is obvious.
Overall visual style: unified and artistic. Folded texture as background. The cloud animation design adds spirituality to the site. The mouse cursor will have a yellow trailing effect, like painting with a brush.
Functionality and Usability
 | |
|
- Regular one-page structure with clear functionality.
- The navigation bar is fixed at the top of the site and allows you to switch between different currencies and music on/off.
- Users can directly click on any piece to see the price, basic information and purchase process. The interface layout is clear.
- There is no complicated interaction design, only simple cloud animation, which helps users to browse the paintings in a more immersive way.
Content Quality and Relevance
The content mainly focuses on artwork display. For example, Hero Section has a few simple sentences that define the brand's purpose, and uses a large area to display artwork to attract the target audience. Each piece of artwork is clearly labeled with a price and a basic description of the artwork, which ensures transparency and convinces buyers.
Performance
The website responds well on both computer and mobile, with smooth page loading and no lag. Any high-definition artwork can be displayed clearly and smoothly. Responsive page design can be well adapted to a variety of devices, and different aspect ratios of the web page can be well displayed without abruptness. Safari, Chrome can be displayed normally. The user experience is smooth.
Weakness
fig 1.14 About Us of BOYD Galler
But sometimes there is a misunderstanding in the reading. For example, in the detail page of “About Us”, the letter “W” in ‘Where’ may be mistaken for two letters “V”. Where“, the letter ‘W’ can be easily mistaken for two letters ”V" when users browse. This is because the “W” is much wider than the other letters, and has a yellow accent line in the center.
#Website 4: Russian Mockups
Link：https://russianmockups.shop/
 |
fig 1.15 Homepage of Russian Mockup |
Purpose and Goals
Purpose：Russian Mockups is a website that specializes in providing high quality merchandise display mockups.
Goals：To build a professional image of its own brand and to attract potential customers to sell all kinds of mockup templates.
Visual Design and Layout
 |
| fig 1.16 the main colors used in Russian Mockup |
Color：Visual minimalist style using light beige, light grey-blue, dark grey-black, simple and atmospheric colors to create a professional and trustworthy atmosphere in the e-commerce website. Light grey-blue is used as a background and dark grey-black is utilized to emphasize some important information. Light beige color is used to tone down the website atmosphere without depressing.
Layout：a typical e-commerce website structure. Homepage displays the hot products, while the banner area displays the discount information to emphasize the e-commerce function. Each mockup has its own detail page. There are also shopping cart and payment modules. There is no other irrelevant information to interfere
Functionality and Usability
 | |
|
As a multi-page website structure, there is a strong hierarchy in the shop section, and there are clear buttons to guide to the next page. The overall interactive experience of the website is smooth, the button purchase process is simple, and the form is easy to fill in.
Content Quality and Relevance
The content is focused on the example images and product diagrams shown and is highly relevant to the mockup template. Images and text are concise and intuitive to point out the product is the designer's needs. The style is unified. However, the content is more oriented and lacks a section to introduce the brand, simply only rationally guiding potential customers to buy the mockup model, which may lead to a lack of emotional connection with the user.
Performance
The site responds well on both computer and mobile, with pages loading smoothly and without lag. However, some of the large images are slightly delayed when loading on mobile, affecting the consistency of browsing. Safari and Chrome can display normally. The user experience is silky smooth.
Link：https://ario.law/en/
 |
| fig 1.18 Ario Law Hero Section |
Purpose and Goals
Goals：To present the firm's professional image and service concepts, introduce the firm's service areas, and attract potential clients for business conversion.
Visual Design and Layout
Font：Sans-serif fonts are used to build a modern and easy-to-use readability.
Functionality and Usability
The website has a responsive design and the elements in the website automatically adjust to the screen size.
 | |
|
When the mouse cursor is placed on an element module, it will change from light gray to blue. Such a small interactive design will effectively guide users to explore more of the website.
 |
| fig 1.20 Ario Law |
The TEAM word is infinitely amplified, and the articulation with subsequent panels is very silky and clever.
Content Quality and Relevance
Content is highly relevant to the purpose of the site. The sections describing the firm's team and range of services are clear and professional.
Performance
The website is responsive on both computer and mobile, with pages loading smoothly and without lag. Any detail buttons respond quickly. Safari and Chrome display well and perform well. The user experience is silky smooth.
Weakness
The website mainly uses black and white colors, which can reflect the professionalism, but it also looks too detached, without establishing its emotional connection with the users and lack of human touch.
Comments
Post a Comment