Category: ARTM2210 Intro to Web

For my one page website I decided to review brand.strv.com.  SRTV is a software development company that prides itself on beautiful design and intuitive functionality. Their “brand” section is an entire one page site devoted to sharing with potential customers the ideas behind their design while also showing off what they are capable of creating.

 

The experience begins with a fullscreen animated welcome screen with an arrow at the bottom prompting you to scroll down.  Upon scrolling, the welcome screen moves up and leaves the screen. The user is greeted with a page of mostly white space with a short paragraph about the company accompanied by some graphics in the center and a vertical menu on the left.  The menu allows you to skip up and down within the page, but it acts as a bit of a distraction from the experience.  Someone who wasn’t aware that the page was meant to be navigated as one page might take this as a typical homepage and use the navigation menu to, well, navigate.

 

As far as color and texture goes, the site keeps things simple.  Everything is flat, clean, and simplistic.  The majority of color on the screen is dominated by black, red, and white.  In fact, there’s a section on the page that shows these three colors and states that the company never uses anything else but these three.  The only use of other colors is when examples are given of what NOT to use, and even these are crossed out with red lines of the same color.  

Overall, I like the consistency within this site and I think the company who created it did a great job of portraying their brand’s idea and thought process.  As someone interested in design I learned a bit from this and might use some of their ideas of design in the future.
I give this site four <div> tags out of five, and I’ll throw in a bonus hex color code of #EFOD33 to honor their brilliant shade of red.

thinkbear.net Review

Thinkbear.net is a portfolio website displaying Jens Nielsen’s work as a digital designer. It is a single page site sectioned off into four different areas. When you scroll, it goes to the next page. The website gallery also has left and right arrows to scroll through more work. The layout is very simple and intuitive. Everything is clearly laid out for one to learn more about the designer and his works.

The site is able to stay consistent without losing clarity. It sits in the perfect medium. Although very simple, the website has clear visual hierarchy on what is most important and the order to look at things. His name is the largest considering this is a portfolio of his. The social media links are grouped close together and are the same size. Each area of the website is clearly sectioned off when you scroll and each has a purpose. The different items that can be clicked are pretty noticeable and some are even animated. His photos zoom in when you hover over them indicating that you can click on them. They then take you to the actual Instagram photo. Overall, the site has good spacing and is lacking any clutter. It has a very crisp and organized feel to it.

Texture: The use of shadows and rotation on the website display creates a really intuitive 3d effect. The background is a very clean and minimalistic. The portrait on the first section has a grainy texture to give a really rugged look when combined with the black and white.

Color: The first web paige has a black and white background with very vibrant colors for the social media buttons. It then rotates to very vibrant colors involving his work. Then it alternates back to black and white for his summary and finally ends on more of his work in color. The alternating pages works really well. The background is a light shade of grey that does not distract from the important details on the pages.

In conclusion, thinkbear.net is a very well designed site with a simple purpose that executes quite flawlessly. It is simple, but intuitive. Everything is easy to read an navigate due to the lack of clutter and good hierarchy. The buttons and objects are easily defined. Each area looks unified to the whole site. The logo and social media buttons follow you as you scroll on every page except the photograph gallery and really help with the unity.  The site definitely creates a smooth and relaxing experience while you learn more about the artist himself.

Tristan Coyle

The website that I chose to review is https://onepagelove.com/luca. Luca is a restaurant, and on the site is a full menu and a list of the workers, along with various other things. The color and texture of this website is very fun and pleasing to the eye. The color of this website, in my eyes, is defiantly a strong suit. The order in which the site is laid out is easy to understand, and it has a great sense of flow to go along with it. the list of different things to look at are put in place in a way that a small child would be able to understand. The way to get from one page to another is simply by scrolling up and down due to the fact that this is in fact, a single page website. It is very easy to understand and read what you are looking at in this website for a few reasons. One being that it clearly tells the reader what they are looking at in the top of each section. Secondly, it is broken off into different colors for each section giving the eye an easy understanding that it is looking at a different part. The location of things in this website are mostly centered and easy to keep your eye on. The layout of finding the Hierarchy in this page is also very easy to do, being that the top of each section will have the title of what we are looking at, and the there is a clear level of importance. This site has little sections at the bottom or middle of the pages that have a small box around text saying something like “map”. This is easy for the reader to tell that you can in fact click on those parts. There is a clear understanding of that can and cannot be clicked on in the page. And lastly, the amount of cluster that is put into this page is at a minimum. There is not much that makes this website too much to look at, and there is a great layout of clarity to view. Overall, I personally feel that this website is very well done. It has clear points of importance, and there is a comfortable amount of space between everything. You can easily navigate between the different pages, and you can clearly tell that is clickable. This website is one that anyone could easily use.

https://www.zalarob.com

This website is the page of a german family business that revolves around the sustainability of natural resources with oak being a main contributor. The color pallet consists of soft whites, tans, charcoal gray; neutral earth tones. For the sections with a mainly white background, the outline of wood texture is overlapped to give variation in what you’re looking at. Being a single page site the general direction of the page is scrolling vertically, top to bottom, with some sections giving you the option to click right or left to slide through photos.

This website exhibits good design. Even though it was in a different language I was still intrigued by the design. As a whole it was easy to navigate with clear direction of where to find specific information. The text “Don’t Make Me Think” stresses the importance of the sites ease and readability for the user. This website uses the design elements of symmetry through its images and text and emphasis through its headings to assist in this. Each section is clean cut with minimal text to avoid clutter. Overall I love the design of this website, it’s simple and clean cut. I’m not used to single page sites so this was definitely a good one to look at. Although it is only one page it incorporated a lot of different elements into it to add variety such as a slideshow, interactive button, with varying layouts dependent upon the section. Chapter 3 mentioned a photo where if you toggled over a face a blurb would appear with their name. This concept was used with a bock of wood where different diets of the wood slab highlighted different information. I was very impressed and think this website definitely helps the family business.

While searching for a one page website to write my review on I stumbled across a website named “Scroll For Your Health”. Although it caught my eye among a list of websites due to it’s blandness, upon visiting I quickly realized that it’s far from bland. “Scroll For Your Health” initially doesn’t offer aesthetic value besides giants white words with a solid black background that reads scroll for your health and some small different colored ribbons bordering the webpage. The ribbons turned out to be interactive and when clicked on they redirect the user to other sites that have nominated, mentioned, or criticized “Scroll For Your Heath”. I found this to be an extremely good idea allowing me to read up on what other people thought of the website. After reading a pleather of good reviews I decided to scroll through the website and find out what all the hype was about. As you scroll down, div shapes begin to fall into place to create pictures of various fruit and facts about the fruits appear in the upper right corner. Each fruit has a selected color that matches such as red for strawberries, orange for oranges and yellow for bananas. Although the site is extremely well made and teaches healthy food fact through an interesting interactive way, the site could use some improvements. First off there are only three facts about each food, I personally would find it more interesting if there were more facts for each food. Also I think it would be cool if the fruit pictures were interactive in the sense that if you clicked on one it would redirect you to something like more pictures of the selected fruit. Besides more content for the viewer to read “Scroll For Your Health” is extremely fun to play with and definitely gives me a few ideas for my own website.

 

For my second review, I am reviewing the single site, NeoBred. I love the use of colors through out this website. The background was black and most of the text was white. Only headers and words needing emphasis were one of four colors (pink, yellow, hot pink, and cyan) that were used. With the black and white, the four other colors pop really well and achieving the emphasis that was desired. Also having the black background and that only one section is displayed at a time, the reader may think that it is actually a multiple page website. The text is a neat and precise font, which gives me a clean texture feeling.

In order to move from section to section, the reader has to scroll up and down. There is also numbers that you click on to go to the next page of information in each section. On the right, there is a menu section that will cause you to be able to move from each section as well. The headings are located on the left, and only a few lines of the text on the right. Below the headings are numbers that you click to move forward to the second lines of text in each section. There also is a count that tells you which section you are on out of the total number of sections.

I believe this site is designed well. I picked this site from onepagelove.com because the color popped and got my attention. As I looked throughout the rest of the site, I saw that NeoBrand used the colors really well. It was very easy to navigate from section to section. Also I really liked the fact that there are only a few lines of text for each section, because it makes it easier for the reader to follow. Overall, I think this is an aesthetically and functionally pleasing website.

http://isinvisible.com/

“Is Invisible”, surprisingly and unfortunately, is not a website looking to sell invisibility cloaks and comic book X-ray specs, rather recommending a products and gadgets designed to be as minimalist as possible.  The general theme of its wares can be described as “clean efficiency”. It’s worth noting the website doesn’t actively sell goods, rather acting as a hub for minimalist products.

Much like the gadgets and gear the site advertises, the website is all about efficiency. Nothing is flashy. The color scheme of the site itself is monochromatic, existing entirely within the gray-scale. The products themselves are showcased in color, but even then they’re more muted than saturated. It’s about displaying a realistic look at the products, not demanding attention towards any one thing. Further safeguarding the calm design the website doesn’t house video or banner advertisements. No need for Ad-block here.

 

The products are split into two columns, one on either side of the screen. There’s a simple picture of each product, the price, and then the next product. Rinse and repeat. The name of the site sits at the upper left corner of the page and will scroll down with the page. A question mark sits in the lower right. Clicking it pulls up a what is essentially a text box explaining the idea behind the website, as well as naming the two people maintaining the site. Clicking on any of the products opens up another page, to the site that sells the desired product.

 

Being a single page site, the only real navigation is scrolling up or down. This design choice is perfect for the site, again keeping with the minimalistic theme. As a person well versed with the internet, scrolling down was a natural progression to navigate the site. Someone less accustomed may have trouble, as there’s no obvious hint that there’s more below. This could be seen as a flaw, but given the nature of the site it’s perfectly acceptable. Adding even an arrow pointing down, or having the next product picture visible at the bottom of the page, would disrupt the clean looking site.

 

As implied, the website is perfectly designed for its purpose. The benefit of the sites theme matching the theme of the products it advertises is subtle but brilliant. It’s clean, minimalist, but still extremely clear on with how to navigate. It’s incredibly well designed for its purpose. The only thing that doesn’t work is the prices. They certainly aren’t minimalist.

~Jeremy Molinari

Studio Dunn is an interior design practice in London. My first thought of the website was that it was very modern looking. It almost reminded me as if I were looking at a home magazine. I think that the color and texture used made it very distinctive as to what the website was there for. I also enjoyed the navigation technique for this single page website. You did not have to scroll up, down, right, or left; instead there were arrows on the right side of the page that pop up as your mouse scrolls over them that lead you to the next set of images. Because this is a website for interior decorating, there are a lot of images used. The arrows made it much easier to navigate and I feel like it made the website look cleaner. In the upper right hand corner there is a button with three lines, symbolizing more content, which takes you to the “about me” portion of the website. Here there is a short summary about the company, its history, and what they do. They also provide contact information in this section. The only issue is that in my browser, the words began to run together at the end of the type. It would be more beneficial to the reader to make sure that the words are spread out enough on every browser. I think the use of images and the arrows makes the site extremely easy to navigate.  There is not a lot of buttons that have to be clicked, which can be confusing to some people. I like the short and sweet About Me section, as it is almost as if they let the work shown in the images speak for itself. Overall, I think that the design for this website was done extremely well. It has a very modern look to it, which greatly fits the Interior Design theme. It is easy to navigate and appealing to look at.

The site I chose to review is [https://2016.cssconf.com/]. I chose this site because the choice of color pallet immediately drew my eyes to it. The contrast of bright colors such as bold blue, magenta and lime green on the pastel pink really stood out to me.

Another thing I think worked well for this site was it’s use of transparent, gradient, organic-blob shapes and transparent zig-zag boxes. As I scrolled through the site, I was happy to see these shapes repeated. What disappointed me, however, the middle of the site, because the color and textures used in the previous section just disappear, which I found odd and inconsistent.

The site is divided into three sections: About, Videos & Slides, and Sponsors. I felt the ‘About’ section and ‘Sponsor’ section were both executed very well. However, I felt the ‘Videos & Slides’ section was extremely bland and repetitive. I understand that the designer probably felt that by taking a minimalistic approach, the site’s design wouldn’t take away from the content it was showcasing; however, I feel the site would look much better if they would have continued the colorful shapes and textures throughout this portion (as seen in the ‘About’ and ‘Sponsor’ sections).

Another thing I think worked well for the site was it’s use of alternating background colors to divide the sections of the site. For example, the ‘About’ section of the site has a light pink background, then the next section, ‘Videos & Slides’ has a white background, then the third section goes back to the light pink background. This helps clearly differentiate the sections without having to read through all of the content or rely heavily on the navigation bar in order to find what you’re looking for.

Overall I really enjoyed this site. However, I found it rather strange that a website that was built to showcase a CSS Design conference would have a very boring ‘Videos & Slides’ section. But besides the odd inconsistent portion, I would definitely consider this one-page-website to have a successful use of color and texture.

For my first review, I decided to take a look at the website of one of my favorite clothing brands, Supreme. Their website is supremenewyork.com, and they’re based on a skateboard/streetwear company Supreme that has been around since 1994. I personally have never liked their homepage, it’s very minimalistic and the setup is nice, but the look isn’t very pleasing. Nonetheless, the homepage is extremely easy to navigate. It shows you the logo and gives you options to visit an about page, an information page, review clothing catalogs from previous seasons, and also an option to shop online. The online shop for Supreme’s website is very cool, and is personally one of my favorites. It opens up with small rectangles pictures of all the sites various clothes, with options to click on them, or simply browse the site’s catalog. The site runs very smoothly, and in essence is very pleasing to work on. They do a good job of keeping everything up to date, and overall I really like the site.

I personally never shop online for anything. When I want to shop I like to go into the stores and talk to sales associates who can answer the questions I can’t solve. That being said I did take the chance to finally sit down and decide what I want and need in order to build my very own desktop computer tailored for my specific needs. Like I said I like having sale associates to answer my questions, but obviously there aren’t any online; so I did my research and created a list of what exactly I needed from my computer. Finally, it was time to see how well www.newegg.com is at helping me find what I want.

When I opened the homepage I immediately was able to find the appropriate tag to continue my search. Not before Newegg’s rotating images caught my eye with their “Unleash The Power” ad which prompted me to explore the link. The link did end up needlessly broadening my search after I licked on the More Deals button from computer components to their entire clearance catalog, but 2 clicks of the back button and I was back on the Home page and moving towards what I wanted.

Finally, I was looking at a video cards, one of my top features, when I found the EVGA GeForce GTX 1070. I was looking at the specifications of the card when I saw it list Interface, know I wasn’t a hundred percent sure what they meant by interface so I was going to waste 5 minutes to google the answer before proceeding. However, just before leaving the page I noticed that interface was a hyperlink that when I clicked on it showed a definition of the world. This saved me time and allowed me to continue my shopping at a steady pace. I finished my shopping and reviewed over my shopping cart to see if there weren’t any items doubles of items or unneeded items. Low-and-behold I had added fans to my cart that I no longer needed so I moved my cursor to delete them.

All and all www.newegg.com worked wonderfully, yes I got held up at times, but I never once had to leave the website to find my way back to where I was. Newegg had even given discounts to every item and given me a promotional gift card. This website made me, a first time shopper looking to build their own desktop computer, a sense of security and confidence with the choices I made.

 

• Michael Carbonara

Newegg has been my go-to website for years now when it comes to electronics. I’ve watched the site change and evolve over the last half decade, and I’m familiar with how the site works in its current state.  That being said, I do have some critiques.  First of all, the site comes off as a slightly more cluttered, less visually appealing version of Amazon.  The general layout is the same: Welcome banner, search bar at the top, and products below.  All the core components are their, but they seem to be arranged in a less efficient way than the competitor. Searching for and a product is simple, and it “doesn’t make you think.” You know instinctually to type what you want in the search bar, select the product from the auto-suggestion drop down menu. I chose a somewhat specific product (Intel i7 6700k Processor) and the process was as smooth as I could have hoped for. It was the top result on the page and I was viewing it in 2 clicks. As I hovered my mouse of the “Add to cart” button, another element of the page loaded on a delay.  My cursor was now above an option to add a 1 year replacement plan for $25.  I don’t know if this was intentional or if my internet was simply lagging a bit, but it acted as a hiccup in the buying experience and threw me off for a second.  Regardless, I managed to add the item to my cart.  Unlike Amazon, which offers a “proceed to checkout” option, I found myself on a page encouraging me to choose from one of their numerous protection plans (again) and a “proceed to cart” option. The whole process felt like I was dealing with the annoying associate at the register trying to sell me on additional charges I didn’t want. I understand this from the perspective of Newegg, but most people already know ahead of time if they’re going to get a protection plan. Eventually I made it to the checkout which was a smooth and easy process. I was able to checkout as a guest and had the confirmation page within a few minutes.  Overall, I think NewEgg is functional and gets the job done, but could use some visual tweaks.

Review 1:  Thinkgeek.com

The website that was chosen to be reviewed was thinkgeek.com. I tested its ability to navigate and how much the website “made me thing.” I went onto thinkgeek searching for something related to pokemon. I immediately saw the search and knew where to type in my search. I used it and found what I was looking for. I went back to check if there was another way to find the desired results. Through use of the intuitive tabs, I found the pokemon tab and it led me to the same results. This was useful knowing that if I didn’t want to search through the website, all I had to do was just type in my desired search right at the top of the page, but I could also use the tabs that are very self-explanatory to find the products. Thinkgeek gives you the option without making it confusing. I’m able to easily scan the site and find the things that interest me quickly. For the most part, you can tell where you can click without wondering. There is a good variety on screen to really pick and choose where you want to focus on. It is quite easy to find the products you want. Users do not have an autofill dropdown box when you are typing though, so spelling is up to them. That would be the biggest improvement I would offer to the sight. The autofill option would make it a more intuitive and pleasant experience. The front page also does seem to be a little over cluttered so maybe taking out a few of the elements can really bring it together more.  Overall though, it is a strongly intuitive site that holds your attention and navigates easily.

Tristan Coyle

For my website review, I decided to review one of my favorite store’s website, Tilly’s.  Tilly’s is a clothing store that is headquartered in Irvine, California.  The website displays their clothing lines, and is a place where customers can purchase the products.  The website has a very clean look.  It has a plain white background, with a black and gray banner, and pictures of the clothing centered.  There is a search bar, centered and high up on the home page.  This is extremely useful if you already know what you are looking for.  Below the search bar is a header with page tags that when hovered over, a drop down menu pops up.  There are many options here to click to move to other pages.  Under the Women tag, they have nine categories, which are featured, clothing, swim, intimates, shoes, accessories, beauty, deals, and outlets.  Each page loads relatively fast.  There are no ads placed on this website, which makes sense because Tilly’s does not want you to leave their page.  They also have a responsive and functioning shopping cart.  Not only does it show what you saved, but also shows what other people bought with the items that are in your shopping cart.  Once the customer picks what they want to buy and precede to checkout, their checkout is safe and secure with McAfee services.  GeoTrust, which is the world’s second largest digital certificate provider, also verifies Tilly’s.  From being a frequent shopper at Tilly’s, I have not experienced a negative time on their website.  They have done a great job with keeping up with traffic, updating new lines, and getting their old lines on sale.