CM 523 Homework 2 Atomic Design Bochao Sun Sep. 28, 2017 The website I am going to inspect is a shopping coupon and cash back website Ebates. It starts with a link to hurricane relief fundraising website. Three elements text, icon and arrow are hyperlinked to the donation website. Users can click at anywhere in the wide box selected below to get over. The color of the green heart is the same as the theme color of the entire website: #23ae4a. Link to hurricane relief fundraising In the header are a logo, a search form and a user pad. The search form unit contains an input box with placeholder “Search Cash Back stores, coupons and products” and a white button with a lighter green background. With this unit, users can search and easily find …show more content…
They are elements descendent of elements. Users can switch the banner by clicking the element arrows. The banners, hyperlinked directly to store websites, highlight offers with large discounts or promotional contents. Running banners Stores with double cash back are listed as elements descendent of elements. As all image and text elements are and are contained in the anchor with hyperlink, users can click on any element to open the store’s website. Double cash back stores The “Help” box on the right has an icon of element and text. Styled with the theme color green and shadow, it can direct users to the website of homepage/help, which is indicated in the HTML as “/help”. Help box The double cash back stores are put together again. The text title is hyperlinked to the specific page as indicated as “/bonus-cash-back”. The “See All” text is a element to be presented differently from the previous text. Below the title is a “table” of logos of the brands. It is not set as table, but arranged to look like a table. The logos are elements. Users can click on the “box” of each brand to get to its official website. Double cash back