Posted on by eeb5691

One Page Design

For my blog post, I decided to write about the website Stop. Upon clicking on the site, I was immediately drawn to the red color. The website only uses two colors throughout, that being red and an off-white color. This gives it a very minimal and bold look. After all, for a website titled “Stop” there’s no better color than that of a stop sign. The entirety of the site is very minimal and straight to the point, which is fitting considering it’s a website about eliminating spam. The design also utilizes a classic serif font. This style font is classic, timeless, formal, and straightforward. It plays perfectly into their minimal theme, as the site is very straight to the point and strays from anything too flashy or distracting.

Personally, I really like the logo they have at the top of the screen, and I think it deserves to be shown off more. Instead of tucking it away at the top, I think it should switch places with the “sign up for free” button. Besides, there is already a sign up button in the top right corner of the screen. I think by moving the logo down to that spot, they would be able to draw more attention to it. This is because of the central location of that spot, and the bold red bubble letters create a lot of contrast against the white, especially if it were an even bigger size. With this adjustment, they could keep the text “Tell sales emails to just” and then have the logo read “stop” beneath it.
I came across a personal pet peeve when visiting the site on my phone. Upon scrolling further down the page, we’re greeted with this huge blob of text. Nothing annoys me quite like never ending paragraphs. I instinctively kept scrolling past it because my immediate reaction was “that’s way too much to read.” After going back and reading it though, I think this problem could be easily fixed by breaking the paragraph into smaller chunks, such as how I annotated it above. On a desktop, the blob of text fits much better and isn’t nearly as jarring, but when I saw it on my phone it was so overwhelming that I immediately skipped over it (which I don’t think the designers intended for).
This section of the site was definitely my favorite, and for good reasons. I am obsessed with how they show the chain of emails at a tilted perspective, fading into the background as if they were never ending.  The red in the background reminds me of a headache for some reason. I think that visual and my association with it works perfectly as a design concept though, because spam emails are quite the headache. I think that the middle section that I circled in this screenshot is so well done, because it is so simple, yet it invokes feeling. They perfectly incapsulated the feeling of receiving a bunch of spam emails with that graphic. However, I don’t quite understand why they chose to use those squiggly lines. My assumption is that they were intended for separating the page content, but I really don’t think they’re necessary at all.
Moving further down the page, this section is all about how they actually stop the spam emails. On the flipside of the last section I discussed, this part might be my least favorite. My issue is that there’s a lot of floating elements. I think this is kind of distracting, and my eyes don’t really know where to look so I just glance around through the icons. I think it would have been more efficient if they had made little card for each talking point, rather than having them just floating against the white background.
As seen above, the designers used a dotted line to box in the content of this section. I think that they should’ve done something similar to this in the last section I mentioned. This would’ve fixed the issue of the floating content, and it also would’ve added some cohesiveness, because this is the only part of the website that utilizes this dotted line design.
Lastly, near the end of the page they have this section showing how many emails they’ve blocked. I didn’t realize it at first, but the number I circled actually updates in real time! From the time of that screenshot to the time I’m writing this, the number has jumped to 84,652! I think this is a fun feature because not only does it show that their product is working, it’s also a fun detail that makes the site more interactive for users.
Posted on by eeb5691

Grid Examples

Web design

When I think of grid designs, my mind immediately goes to Instagram.  Every Instagram user’s account page is set up with a simple three-column grid. I love this setup because it can be as simple or as complicated as the user wants their page to be.  For example, the screenshot I provided on the left is from my own personal photography account. I choose to make my posts in sets of three so that similar images appear in the same row. Users can further customize the grid if they so choose. One of my favorite examples of this is from Taylor Swift’s account, as pictured on the right. Swift’s account uses several images aligned on the grid to create one big image when you look at the account. However, not all Instagram users are attempting to make an elaborate or aesthetically pleasing account. What makes this setup so great is that it is simple enough for casual app users, yet it provides structure for those who want to do something a bit more advanced. Instagram’s slogan says to “Capture, Create & Share What You Love” and this grid allows their users to do just that.

Magazine Design

Another grid-based design, this time one that is not on a screen, can be found in magazine layouts. For my example image, I chose a page from Teen Magazine. The page is split down the center and alternates between text and images on the left and right columns. This page is very busy, with bright colors, graphic fonts, and big images. All these elements are balanced out with the simplicity of the grid format. The simple layout of the grid paired with the bright and playful design contents make the magazine page appealing to it’s target demographic of readers: teens.

Breaking The Grid

When I stumbled upon this during my research, I just couldn’t pass up the opportunity to write about it. This is a screenshot from the archived Spongebob website, and clicking the image will take you to the restored version of this page. The site is obviously intended for a younger audience, so the layout has to be relatively simple so that children can use the site. However, that doesn’t mean that it has to be boring by any means. This website breaks the traditional grid alignment because it has cartoon characters popping out from content in the page and taking up space in the margins. These quirky characters almost appear to be crashing in on the website, as they peek around corners and fly across the page. The placement of the characters is effective in breaking the traditional grid alignment, but not so much in that it becomes confusing for children to navigate the site.

diagram image

The image above is a wireframe diagram of the Instagram screenshot previously seen in this article. This diagram really shows the simplicity of the website’s format, which really allows the users to use their own creativity and personalize it with their pictures.