Vinyl Cuts – Retro Web Design

image: pexels.com

Home

This site stands out to me because of how retro it looks. The pixelated style of the homepage, and the glitches of the moving gif gives it a ’60s, ’70s feel to it. The only thing you see on the homepage is,

“YOUR WEEKLY GUIDE TO THE HBO SERIES

VINYLCUTS

SEE THE ISSUES”

VinylCuts looks as though it is being projected from the bottom right corner of the page, in faint colors of green, blue, pink, red, and orange. The background of the page has a space-like feel to it, as if we are traveling through a blue sea of dust.

It’s fitting that the homepage looks this way because of the title, VINLYCUTS. When I think of VINYL, I think of record-players, the ’70s, and the theme, retro. There is a clear contrast factor here because the main part of this page that the viewer should see is the word VINYLCUTS because of the style, and font of the word, and the fact that it is sandwiched between the boring little white font of “Your weekly guide to the Hbo series” and “see the issues”.

After clicking on the homepage, I’m lead to a page with rows of images that look like magazine covers, with the title “VINYLCUTS” with headliners such as “The Rock ‘n Roll Queen,” and “No Risk, No Reward.” Each image is numbered, starting with 00, onto 01, 02, until 10. At this point, it’s easy to understand that these are episodes of the first season on HBO of a show called VINYLCUTS. If you click on one of the images, you get an inside preview of the issue and the show, that gives the information on what the episode is about, on set photos, as well as how they recreated the 1970s. By clicking through this site, I have learned more about what the site is about and what it has to offer.

With it’s 1970’s feel and tv-like haze, the site has convinced me to search for more information about this new HBO series. I needed a new show to watch.

Diamonds, Diamonds, Diamonds

image: kaboompics.com

http://counterclimate.converse.com/#!/film

I prefer the simple things. Simple colors, sleek design, darks and lights, the usual. This site takes the things I love and develops a beautiful web design. After clicking on the link, a rectangle shows up in the middle of the black background and has waves of color. In the middle of the rectangle is a number counting up to 100, signifying that the web page is loading. After it reaches 100, I see the word “Diamonds” written largely in white, taking up most of the page in graffiti spread across the page horizontally over a gif. The gif is repeating of a silhouette in a black hoodie standing in the rain of what looks like a street with lights in the background. The rain drops run through the “Diamonds,” and looks three dimensional.

Bordering this gif is about 1 inch of black on the top and bottom, and on the top, in the center, is the word “converse” in white, and below in red in the same font as “Diamonds” are the words “Keith Ape”. Under those two words in tiny writing is “present.” This gives me the impression that they are presenting a new brand or showcasing something unique in a way as if it is a new movie or television show. On the footer of the page is written in the same font as “Diamonds” but smaller and in red, “Start Film”. The dark colors in the gif and the borders of the page give the feeling of the film as mysterious and foreboding.

After clicking “Start Film”, the words melt away as if from the rain, and music starts with a male voice singing, “Diamonds”. The film is made in the perspective of the viewer of the page, as if they are experiencing what is happening firsthand.

The video consists of raindrops, neon lights, colors, lights, cars driving by, and lighting affects that make the video seem like it is pausing and starting, in a “trippy” way. The video gives the site a different feel, like the story behind owning a pair of converse. This can be seen as an effective and engaging way to sell converse because of the music and colors. The music is similar to a rap song, targeting a specific audience of a younger crowd, similar to who converses’ main consumer crowd is.

Best Site to Use Texture

image:pexels.com

https://artsandculture.withgoogle.com/en-us/

Whoa, man. This site is my favorite site out there. I mean, maybe there are more sites out there I haven’t found that I would like but…anyway, this site is amazing. I almost feel as though I don’t have to go to the places they showcase because I’m already there with the sounds, images, and feeling I’m given from the site.

So, basically, the site is about the National Parks around the country. They lure in the viewer with their use of heavily textured, moving images (gifs), their short clips of nature, such as birds flying, with the sound of their wings flapping in slow motion over the calming music, their slight movement from the reds of the earth to the greens of the forest, to the movement of the ocean above us. They use all sorts of perspectives to show the beauty of Earth just from a short preview of what you’re about to explore on the page. Because this content of the homepage stands out, I didn’t even see the navigation and footer bars, which have tiny tiny font compared to the dead center title of “The Hidden Worlds of the National Parks,” in white over the video. The only option you have on this homepage is to click “Start Exploring” in blue, tempting.

I gave in and clicked the “Start Exploring,” and easy way to get the point of the site, which is to gain interest in visiting and traveling through these many national parks. Already, there is a huge usability factor because of this. There is contrast between the large white title dead center of the page over the movement of the video behind it.

After clicking that blue button, there is a small intro with a park ranger talking over the clips of the “hidden worlds,” asking you to explore the national parks. After the intro, there is an image split into 5 columns of different parts of the world. It’s easy to tell which is which because of the colors and textures used in the image behind the white title of “Dry Tortugas,” which has a haze of green and blue, clearly underwater. The one to the left of it is in reds and oranges, called the “Bryce Canon”. “Carlsbad Taverns” has browns behind the white title, when “Hawai’i Volcanoes” have an image of dark blue volcanoes with a vein of orange behind it. Finally, the image all the way on the left column is “Kenai Fjords,” which looks like a textured image of ice water with textured ice capsules floating around. Who wouldn’t want to click to see what the hubub is about?

Content Strategy

image: unsplash.com

https://www.usability.gov/what-and-why/content-strategy.html

According to usability.gov, content strategy helps web designers understand how to create content that contributes to the overall meaning of the site as well as helps to identify the goal of the site. This means that content focuses on successfully executing the main idea based on the intended audience(s), voice and tone. This then leads to the web designer to design, organize and prioritize content based on the audiences, and the voice as well as tone they want to display.

It is important to consider the company/organization/business’ goals and the user’s needs when developing the site. This is when beta-testing or user research is used to help improve the site according to their needs. Another aspect of usability that should be kept in mind while designing a website is the use of language. Make sure that the site is in easily understood for all types of audiences. Remember that not everyone knows specific jargon that a company may understand.

As I have mentioned from research in previous blog posts, it is also important to make sure you don’t include unnecessary content that may confuse the viewer or user, this could cause cognitive overload and frustration. By remaining factual and sticking with the purpose of the site, you can succeed in successful web design in terms of usability.

Another way to make sure that your site follows usability guidelines is if you remain consistent. By following the repetition rule of web design, a user will find it much easier to navigate the page and find where they need to go because of the consistency with the buttons, colors, links, fonts, as well as the logo. As long as the theme and content remains consistent and relatively simple, a user should not have difficulty finding what they need on your site.

Corporate Website Design

image: unsplash.com

25 Beautiful Corporate Websites

This site states that designing websites for a company or business not only involves a clever way to brand the site, but also an effective way to bring people back to the site. This type of site is called a corporate website. Since all websites have a different purpose, this one is more formal, and is built to inform people on the business’s products and services.

An example of a corporate business that succeeds in web design is

http://www.arte-charpentier.com/en/

When you think of architecture, what do you think of? Buildings, offices, lights, shapes and geometry, right? You immediately get the purpose and feel for the company as you enter the site. The site has a photo stream of different buildings and homes, with each image unique as the last. The shapes of the architecture lead the viewer around the page, which keeps them entertained and engaged with the site. Each image also has a different amount of colors, lights, shapes and shadows, giving a feel for the area that the pieces are in. The navigation bar remains at the top of the page as the photos stream, with only 4 top nodes, FIRM, NEWS, PROJECTS, CONTACT (in all caps). You can tell the main idea the web designer wanted to give was to have the focus and emphasis on the images and the projects done by the firm. The colors of the images on the page are the only colors presented besides the black outline of the footer and the navigation bar above. This makes the page seem as though the only content are the photos, which, for me, is a selling point to hire the firm right off the bat.

As you put your mouse over the navigation bar on each topnode, another layer of the navigation bar lowers down. For example, when I put my mouse of the dim-lit word, FIRM, there are seven categories that go under it, such as COMMITMENT, TEAM, PARTNERS, SERVICES, etc. Because this area is consistent with color and capitalization, the site is given a sleek, simple, classic feel. After clicking on commitment, the homepage zooms out, slides to the left, and the commitment page is seen, where it then zooms in and fills out the page. This affect gives the site more character and creativity, which stands out among the crowd of others. The commitment page has a blurb of text on the left side of the page, with the navigation and footer still surrounding the site. On the right side there are images to click through, with the featured image of a white construction helmet with their “a” logo written in white in a small blue square on it. This reminds the viewer of the company name, arte-charpentier architects. The image leads the viewer to focus on the helmet because of the rule-of-thirds. The only colors in the image are the white, blue, and yellow of the blueprints on the table where the helmet rests.

I could go on and on about how this page is so well-designed. There are so many different aspects that the designer kept in mind in terms of contrast, color, the “F” pattern, and usability.

10 Top Principles of Effective Web Design

image: unsplash.com

10 Top Principles of Effective Web Design

This site discusses the 10 important things to think about when designing a website. The biggest takeawaysfor me is the idea that Sans Serif fonts like Arial and Verdana are easier to read when they are online. In terms of usability and when thinking of audiences of all ages, it’s better if the font styles are Sans Serif fonts. Another big part of font is having it set a certain size for it to be easy to read as well. According to this site, the ideal size is 16px with a maximum of 3 typefaces and a maximum of 3 point sizes.

When it comes to color, the idea is that a color theme goes a long way. It is important to know all the color palettes when creating a website. For example, complementary colors create balance and harmony. My favorite websites are sites that use contrasting colors, which has the text and background easier on the eye, such as white space or negative space. According to the purpose of a person’s website, vibrant colors should only be used if they wan to create a certain emotion.

I never knew about the “F” Patter Design, which is a pattern according to the way we read, left to right. Apparently, studies show that people scan computer screens according to this “F” pattern. Since most of what people see is in the top and left of the screen, I will keep this in mind when I am designing websites in the future. If I recall back to the websites I reviewed, most of them were designed according to this pattern, making it easier to read and understand.

Finally, what is most important in web design today, in my opinion, is if the website is mobile friendly. I feel as though a majority of people view websites and the internet on their cell phone rather than on a computer or tablet. This website explains that in this day and age, designing a website can’t be done without considering multiple screen sizes.

What Constitutes Good and Bad Web Design?

image: kaboompics.com

This author of the New York Times is a victim of website design usability. She stresses the fact that the websites she searched while she was in London were difficult to read due to the languages used, the navigation bars, and even cognitive overload. At first, the author just wanted to find the information she was looking for on exhibitions in her area. She grew more and more frustrated at the website because of the lack of navigation, and the limited use of English.

She believes that, “a well-designed Web site needs to deliver the same things as most other examples of good design by fulfilling its intended function efficiently and engagingly.” I think this is something most web designers should strive for. Simplicity, easy to navigate and use, as well as engaging and pleasing to look at. This leads to the author stating that a common mistake she finds is that designers prioritize style over substance.

The author makes a good point further down, when she mentions that planning the site before building it is an essential part of effective design. It is imperative that as web designers, we build the site in terms of the visitors of the site. We should design and build the website in the eyes of our primary audience.

According to the author, while searching for places to venture during her trip in London, she came across a London restaurant, Quo Vadis. “The home page looks like the front page of an old-fashioned newspaper, and you simply click on the relevant section, like “Today’s Menus” or “Reservations,” to retrieve the information. The charm of the site is that it shares the witty illustrative style of Quo Vadis’s menus, bills and the other elements of the visual identity it has adopted since the Scottish chef Jeremy Lee took over a year ago.”

This analyzation of the site is spot on. Somehow, the website conveys a London-like feeling. The featured image below the navigation bar is simplistic, and portrays the culture of London by the people, like the dog-walkers and the finely dressed. Because it is in all black and white, the site is easy to read and navigate. This is considered good web design because there is minimal design and not too many buttons to click, providing the user with a better navigation experience to find the information they seek.

CSS3 Rookie

image: negativespace.co

http://www.hongkiat.com/blog/beginners-guide-to-css3/

I consider myself a beginner at CSS3, but this website helped explain the basics of the cascading style sheet on background, opacity, size, etc.

To start, the website explains the use of the border-radius property. Which makes it easy to utilize rounder corners in the design elements, without the need for corner images or the use of multiple div tags. So, let’s say we want to define, in order, the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge. The code would look like this,

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Another way to make your website unique is to use the property for text shadows. This gives text an effect that can add depth and and dimension to content on the page. The text shadow CSS property is used to add shading to any text related HTML element. The syntax is made up of figures for the X-offset, the Y-offset, the blur amount and the color of the actual shadow.

For example:

text-shadow.png

So, if there were to be a neon effect for a header, it would look like this:

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de

This can lift the element from the page and pop out to the viewer.

CSS allows for web designers to get creative and practice beautiful elements of web design. If used correctly, there can be a great amount of contrast, depth, light, colors, font, typeface, and texture involved. However, there are wrong ways to use CSS, which will be explained in my next blog post.

HTML 5 & CSS

image: negativespace.co

http://www.hongkiat.com/blog/building-html5-css-webpages/

This website explains the evolution of HTML4 into HTML5, and CSS3. According to the site, HTML5 is an updated version of HTML 4 that is able to lay out content according to the application platform, such as viewing websites from iPhones or Androids. The newest version of HTML is also based on a set of guidelines that all browsers are supposed to follow.

Different from HTML 4, there is an inclusion of <video> and <audio> tags to include on websites now when website designers want to create a unique custom HTML layout. The author also describes HTML5 as not much different from HTML4 because it has a similar layout, except now people who write their own HTML don’t have to do a self-closing tag, which, for example, is <footer/>, and an opening one is </footer>.

When describing the form of HTML, the author starts out by explaining the meaning of the <body> and <div> tags. The <body> tag is placed before the main structure of the content of the page. The <div> tags help to organize sections of the body, and are all labeled differently, such as <div> wrapper and <div> core. The <section> tags contain main content and areas, which use CSS to make them unique and styled to set them apart.

With CSS, there are ways to make the navigation bar and links have certain effects such as hovering, or change in color when the mouse is over it. CSS is more in-depth design that connects to the HTML codes. It is in charge of the height, width, pixels, right, left, properties of the elements in HTML. For example, the author targets <section> elements and labels them #left and #right to assign them to certain areas of the page. Another example of adding cool effects to content on the page, is the example of box-shadow. This element adds a left/right, up/down, shadow blur and color.

Smashing Magazine “Reducing Cognitive Overload For A Better User Experience”

photo: morguefile.com

Reducing Cognitive Overload For A Better User Experience

When it comes to usability, this author considers web design in terms of an invisible guide that carries the viewer through the site without any hesitation. The article explains that there should not be anything called “cognitive overload”, or a situation where a visitor’s  “working memory receives more information than it can handle comfortably, leading to frustration and comprised decision-making.”

This is something important to know when designing a website for not only your target audience, but all audiences. Finding the information the visitor needs should be effortless and not take much, if any, time at all. An example the author has is reducing menu items to between five and nine, otherwise the viewer will feel cluttered and unorganized. This is based on the theory of working memory, and how the brain can only focus on a certain amount of stimuli at a time, and then process it.

Further down the article, the author lists a number of lessons for web design. This includes the fact that pages should be self-explanatory, which is a big takeaway for me as a beginning web designer because based on my past reviews of websites, the Starbucks website was not really self-explanatory. However, Apple was clear in defining their purpose in selling iPhones, iPads, Apple Watches etc.

In order to have a clean, organized and easy to use website there should be no unnecessary actions, according to Halarewich. This forces the viewer to make more effort and work harder to focus. Overstimulation is another issue that is cognitive overload and should be addressed. If there are too many images, gifs, colors, or flashing lights, it can scare away the visitor. This is when balance is important. If there is a right amount of color, movement, and images, there shouldn’t be a problem with cognitive overload.