Open blog

For this blog I will talk about my project approach.

I have started my individual project and the project is difficult for me as I have no artistic capabilities. I really am inept at visualizing layout or anything to do with design. I have some basic skills that I have from my the labs and class. I plan on copying concepts from the talks and using w3schools as much as possible to complete the project. My cousin is also very good with web design so I'm going to get some assistance from her as well. I most likely won’t have a visually stunning webpage, but my hope is to have an efficient as possible website that I can create. I look forward to getting these webpages over with :).

Web design layout

Please view https://docs.google.com/document/d/1hvx0t34XFRN2HJbx9f5Ex-e8CEAwc_mHiTaYXkC__Xs/edit?usp=sharing to see my blog post for design layout!

Fonts are cool

For this blogpost I’ll look at two fonts I would use and two I wouldn’t Homemade Apple is quite terrible. It’s in cursive which I really don’t like for online writing. This font is distorted so that’s even harder to read. I’m not sure why someone would want to use this font unless they want their text to be really hard to read. Montoton is a very unique font, but I would not consider that a compliment. This font is also really hard to read. Under the Google Font feature to see a full paragraph text, this text is painful to read. The text has to be really enlarged to be able to clearly read this font. Amatatic Sc is a font that I think works. The font is in all caps, which I usually don’t like for fonts. What this font does effectively is make the text appear as all caps but not look like it’s yelling at you. I wouldn’t use this text in a paragraph but it might work somewhere nice on a website. Inconsolata is a simple font, I prefer simple fonts. The font is easy to read and not too bold or large. I would use this font in a website.

Let's get interactive

While researching interactive websites I found https://www.jasondavies.com/. Jason Davies as self described on the site is a “ freelance software engineer looking for challenging data visualisation projects”. He makes a lot of different types of maps and graphs. Most of them are quite mathematically or scientifically complex, I don’t know what most of them mean but they are visually stunning. https://www.jasondavies.com/maps/voronoi/airports/ is the map that I originally found. The airports map is very unique, he uses a voronoi diagram on his globe which is a mathematical map I had never heard of before. The map is interactive and very mentally stimulating. Each black dot represents one of the world’s airports, if you put your mouse over the dot you can see what airport it is. The map because of the voronoi design can sometimes be hard to make out close up. The map can move like Google Earth, around and in and out.  This map  represents a really cool interactive design on the web.

Website Photos

If I was going to make a website about Trump I might use this photo. I've been a fan of this photo, I did not know it was creative commons.

https://www.flickr.com/photos/scottspiegel/5658032090/in/photolist-9BYTPq-QuHn1Y-chXTYG-p7KMNo-nL3yFG-S4Ee6m-9492zq-prLPkA-8Mvfif-QHnEjN-4K2zgd-eXyRdQ-dWgRhr-6Jab4j-o6Vbab-dV17w1-cEZzeq-64XQEo-bC237J-9WT3go-om27TM-6Vhxmn-fBDrS-4JwmMk-QhoRDi-aiT1aS-FhZVm1-q1mpsk-okZg4f-51Yajv-Qycwmh-6Wrb3B-okPAtu-9J9TeY-9q1Did-bE5jpX-8vuZRu-iSpboh-4L5VeS-RYV5wN-pG15to-5UZGzv-SbSQit-9Vknoo-pkNVgV-ovHYGb-BFSbzx-6C3jaV-G6ftMM-okPUsW


This photo of Trump is super ridiculous, but also quite inspiring (sarcasm). It is ironic in that Trump is far from Superman.

https://www.flickr.com/photos/102912567@N06/31830057044/in/photolist-9BYTPq-QuHn1Y-chXTYG-p7KMNo-nL3yFG-S4Ee6m-9492zq-prLPkA-8Mvfif-QHnEjN-4K2zgd-eXyRdQ-dWgRhr-6Jab4j-o6Vbab-dV17w1-cEZzeq-64XQEo-bC237J-9WT3go-om27TM-6Vhxmn-fBDrS-4JwmMk-QhoRDi-aiT1aS-FhZVm1-q1mpsk-okZg4f-51Yajv-Qycwmh-6Wrb3B-okPAtu-9J9TeY-9q1Did-bE5jpX-8vuZRu-iSpboh-4L5VeS-RYV5wN-pG15to-5UZGzv-SbSQit-9Vknoo-pkNVgV-ovHYGb-BFSbzx-6C3jaV-G6ftMM-okPUsW/.

I'm a big Kanye fan and would maybe want to use a photo of him for site. This is obviously a fake photo of a very large Kanye and Kim that I found comical.

https://www.flickr.com/photos/jaclyndiva/7562223962/in/photolist-cwfnHL-a1Boo-de2CKg-8odoRB-8tPrYT-5RNKpR-aNmdzZ-6hphE9-69Zv4X-8WJ4i9-abWrBA-dt9oaB-6rsGPS-a3BFnC-6UFijw-bAPJnj-i2qtp5-eHnEuo-dMjYTk-d9uGTy-4qGUgD-8AAWbh-bPJomF-bENq4a-8G6QeD-9zKtm5-cg1DZL-abWquo-bnSYrp-bjjgV6-jEcy4Z-62cNju-bu93Pw-BSVcr-61WdEU-7kASKH-anSNtW-9bFvrW-9jLHM5-a5z5Rp-bby5XD-adc2m-5KZJcM-dnEYWC-fLZtHv-aRsKMv-9Bb8SJ-b3ea7T-4NEdHV-8pS2nF

If I was going to make a site about celebrity meltdowns, I might use this photo from Britney's bald 2007 days.

https://www.flickr.com/photos/76446572@N00/3159465513/in/photolist-5Pc62k-6bTwaP-AGURC-BjAE6-7ax2cW-AUvFR-4u3SiH-5KnQXP-ALz3u-5G1ZfB-ANxEk-KUz9a-ANxEa-ANyVw-aPZt9R-3LpzZG-ANyW3-e6ehqj-4u3Si6-2bftbf-5bad5Y-AQmby-BXQ2r-4u7UhN-bzk81r-6gcpU6-nwDgbT-55wfdT-5xdYq1-x772U-dpgp1C-Gf8rGg-6ZbPDJ-9vdcuo-6ocJw3-7mZnBk-b4G6d2-6ibiRz-pNvRjs-dMGFun-4qVQGx-3jbcJo-4u7Uhb-7h8iyY-2kZTPw-pNvQKm-EYaLe-ddhywp-6khvGs-6APGdy

I'm fascinated by North Korea, if I ever wanted to use a photo of the dead Kim Jong Il, I might use this one. It's actually a very great artistic sketch and photo of the insane man.

https://www.flickr.com/photos/nickwho/6459206631/in/photolist-aAT837-JJemt-4Ex1sR-aYapvi-aZFVTB-nF9PH-b3G3aK-aYfFoK-bkeHH-aQM86z-8WBLrV-RQrsz9-6zgEKJ-92RWdH-SmTpAb-RU2RyP-7Yz6nq-RNphoE-RjuJhu-opVRaE-dGXZbA-aZ1nat-RZEP1z-c2zX41-fE1P6R-64yfSg-aXxKba-agZnC-RQAqKj-mQYw9-SoE3cH-QzBm99-6aCNBu-R6WY3L-8rVPka-RCtxP1-8rVPog-RCztNd-dPPnNN-bnaTSg-fZjgL5-RxQHRS-QMUWPz-qydDf-RHyXfQ-qsuQUw-eaWmTd-idztLR-822Xgd-sbFNJh

Betty White is iconic, she's one of my favorite celebrities. If I ever needed a photo of Ms, White I might use this one, it is a real good quality photo.

https://www.flickr.com/photos/mytummytalkstome/7211965980/in/photolist-bZide3-agycL4-akugU6-bk9BbG-bZU9YY-aSCVbe-baTGxi-bep1eK-8chhQX-by4vnr-9p5dZt-baTGoH-NZ5cA-by4vE8-92v5xo-dy8STb-b5JmEe-bzf7fp-ag2zUj-8c5cD9-d5qFP9-cWmCes-9p5c9x-9p8eu1-9p8eBW-8wZ3gL-diPtVV-7YMA3d-81e7bP-axbjbD-dBmJ3m-gLSrcf-7XBpea-bB7wh3-avMxZo-dDqypj-diPrDS-bfx4iB-cWmyDA-badEZH-9p5adg-9p5dFK-jEotV-dW7Bhc-bk9BxA-8AjwqZ-91ZJgD-bjvapQ-c1A9kQ-cebiSC

Text Text Text

A web site that I found that is a great example of text is Palm Bay International http://www.palmbay.com/ this company sells wine and spirits. Besides their text elements, their site is just really well made. To access the different web pages, there is an option to do so in the top right corner. The text is a navy blue, when you scroll over the text, the text turns to white inside a gold color box. For some of the options, white text appears below the gold box. When you place the mouse over this white text it turns gold. The repetition of the blue, gold, and white texts and design throughout the text and website presents a visually appealing design.

While searching websites that are considered to have examples of poor text

I came across the example of SquareSpace.com, particularly their templates page. Ironically this example comes from a website design site. The overall layout of their site and their template page is not bad, the text is just plain hard to read. Under each of their templates is text that is gray and transparent. For one or two words this might not be as bad but it’s a full small paragraph full of light gray text. It’s as if they don’t even want their consumers to be able to read the text. On the side of the page their is the categories of the different template categories. This text is also in transparent gray but since it’s only two or so words the text is easier to read. When the mouse is placed over the text, the text gets darker but the change is almost unnoticeable, the difference is extremely close. After the text is clicked, the text becomes a bolder darker gray, which is easier to read. I’m not sure why they are so intent on this transparent gray text, but could be easily tweaked.

.

News Headlines

Even someone with no website design experience, I’ve always had an eye for news websites and how they display their content , especially their headlines. So for this blog post I’ll take a look at three common news sites and examine their main headline.

CNN: Without scrolling, their main headline is in the left hand side, almost exactly the middle of the way down the page. The text is in black and bold but not in all caps. What stands out is that there is a gigantic ad that takes up a lot of space about the headline. The ad stands out more than their actual main headline

NBC News: Their main head line is higher up on the page than CNN’s ad. There is an ad that changes above the headline, but it takes up less space than CNN’s headline. The headline text is white over the image of a dam which is what they are talking about. The headline is also not in all caps, but each letter of the headline is capitalized, besides words like ‘to’ and ‘in’

CBS: has a headline that is much more centered compared to the other two headlines. There is also an ad over the headline but it is about the same size as the ad from NBC News. The CBS text is just like CNN’s, its bold and every main word is not capitalized.

After examining the headlines I found that headlines for each news site usually has some variation. What remains the same is the placement of an ad above the headlin

Websites that need design improvement.

1. foxnews.com I think their website is a little too cluttered, with too many news stories. I think they should take out the yellow highlighted watch live option and replace it with something more appealing. They use mostly blue and red text on their homepage which is not that easy to read. I think Fox News should scrap the blue and red story links, for bold black links. They should decrease the proximity of their news stories links and make their font bigger. The words “Fox News” could also be more prominent and centered, or have a header that moves with you down the website. These changes would provide a more slick and modern look. I think the website is intentionally lackluster and simple. If they were going to make some changes they would have already.   

2. TMZ.com. I am a fan of TMZ's website which often goes through graphic and font changes, but has had the same basic layout for years and years. I believe that right now their layout looks better on their app than it translates on the computer. Their website unlike Fox News, has a slick modern view with great color contrast. I think TMZ’s main issue is that their website font is huge, when you read a headline it SEEMS LIKE THEY ARE YELLING AT YOU.  If you want to find a particular story, you have to scroll down which may take awhile because their photos take up an immense amount of room. They could improve their site by decreasing their font size, and creating a non- intense vertical scroll look. This would improve the website overall by making it more accessible. However TMZ has had this layout for so long and I think it works for them, as obnoxious as it may be.