I would like to know how the diagonal stripes at the very top of the page was created and how it changes into words and then flips through the whole thing from left to right.
Identify 3 different FORM elements on a website.
Take a screenshot of the form as it is seen in the webpage from your desktop or mobile device and put it into your post along with your identification of what each element is. (this means the html elements that make up a form). Don’t include chunks of code or screenshots of the code. Use your own words to tell me what form elements are being used and where.
Pages to consider might be a contact form for your favorite designer, Facebook login page, Instagram login page, Oasis login page, WordPress login page.
Uses <input> for the four spaces to type in your Phone/Email, Full Name, Username, and Password. Uses <button> for the Sign Up button.
Uses <label> for the words Name, Email, and Topic. Uses <input> for the space to type in under Name and Email. Uses <select> for the space to type in under Topic. Uses <textarea> for the space to type in under Question. Uses <input> for the Submit button.
The word Name is in <legend>. The space to type in your first and last name is in <input>. Uses <label> for Email Address, Subject, and Message. Uses <input> to type in space under Email Address and Subject. Uses <textarea> for the space to type in under Message. Uses <input> for the Send It! button.
https://mailchimp.com – Hands turning into bird
I think this is an awesome example. The hands turning into a bird is cute and minimal. It grabs your attention but doesn’t make you go crazy and doesn’t mess with the overall site’s design. It works on any screen size.
http://www.bkaspr.com/our-story/ – Disappearing title overlay when you click each menu tab.
I think this effect is a poor example mostly because it works differently on different sized screens. If you have a large window open you have to click to get the text overlay to disappear and when you have a smaller window open you just scroll down the page to get it to disappear. It’s confusing and at first you don’t know how to make it go away. Text on text doesn’t work out very well.
One of the coolest tricks I have learned through this class is that you can see the coding of any specific part of a website by right clicking then choosing inspect element. It shows you exactly where it’s located in the html and how it was made. It’s a great tool to use if you want to use something specific in one of your own pages or create something similar. It also helps you find mistakes when looking at your own pages. I’ve used it for some of my assignments, such as Blog #1: Page content hierarchy and when checking out sites.
Below are three trends I respond to and love. I think these all add great effects and trendy aesthetics to creative websites.
I’m obsessed with serif fonts right now. Lately I’ve been seeing them popping up more than ever. They look so clean but also somewhat retro. I think they also add a classy effect especially when it’s just black on white. I think this trend is user friendly because most of the serif fonts people are using are pretty minimal compared to some really long or stretched out serifs.
Full screen video that plays as soon as the page loads –
I think it’s really cool how the site grabs your attention the second you land on the page because the video begins to play. It’s user friendly, you just have to make sure your volume is on to get the full effect. If I had a video this is something I would consider including.
Asymmetry & Broken Gird Layouts –
I like this idea because its very editorial and reminds me of magazines. But if you’re going to do it you have to do it right. This website I think has too much white space and the images need to be a little closer to each other and closer to the cordinating text. The images get cut off too much, they need to be raised. I love how the text runs off of the colored rectangles.
Krug discusses simplifying text. Find an example of a site that uses too much text. Copy and paste that text to your blog, and do a rewrite to omit needless words.
- Specifications: 8” X 10” Usable Dimension (Excludes Glue Flap). 1.4 Mil Thickness. 200 Units. Our 8X10 Cellophane bags will fit your 8 X 10 Inch prints, photos, A10 Cards & Envelopes. Our Clear Cello bags are extremely easy to self seal and the adhesive is easily resealable.
- GREAT PRESENTATION: Our Cello bags are ultra clear, shiny, and are perfect for those who are trying to showcase their marketing materials. Make your prints, photos, look extra lovely with our crystal clear 8X10 plastic bags. Our 8 X 10 Cellophane bags will fit your A10 cards envelopes. Add our clear cello bags to your marketing materials to give your postcards, flyers, and mail a premium feel.
- PREMIUM QUALITY & FOOD SAFE: All Pack It Chic Cello Bags are made from premium grade, virgin material, which assures a durable, non toxic, odorless sleeve that is suitable for packaging and shipping all types of merchandise. Our clear resealable bags are 100% Food Grade Safe.
- EFFICIENT APPLICATION: The self sealing adhesive guarantees a hassle free, easy peel & stick application for your cellophane bags. Because our 8X10 clear bags are sealable within seconds, they are perfect for usage as packaging bags. Our flexible and resealable adhesive, not only protects your merchandise from dust, dirt and moisture, but also provides an easy unwrapping process for your customers or loved ones.
- Pack It Chic, a registered brand, is only sold by ATZ Premium Brands. ATZ Premium Brands, a family-owned small business, is distributor of all types of premium quality retail, shipping, and packaging supplies. Pack It Chic carries tons of modern, unique poly mailer envelopes and other retail packaging products to provide countless ways to stand out to your clients.
- Specifications: 8” X 10” (Excludes Glue Flap). 200 Units. These cellophane bags will fit your 8 X 10 inch prints, photos, A10 cards & envelopes. Are easy to self seal and the adhesive is resealable. These are ultra clear, shiny, and perfect for those who are trying to showcase their marketing materials.
- PREMIUM QUALITY & FOOD SAFE: All Pack It Chic Cello Bags are made from premium grade, virgin material, which assures a durable, non toxic, odorless sleeve that is suitable for packaging. Our clear resealable bags are 100% Food Grade Safe.
I made the description better by deleting all the unnecessary bullet points and all the details that were repeated numerous times in the first two bullet points. It kept repeating the size when we clearly know the size from the item title and the first sentence of the description. It also kept repeating items you can put in the bags. I also removed some pointless discriptive words like “extremely”, “easily”, etc.
Navigation is the focus of Chapter 6. Find a site that does a great job of navigation that may include tabs, breadcrumbs, a “you are here” indication, repeated navigation, etc. Put a link to that site on your blog (make sure it is a link not just plain text). Give a description of what the designer did right.
I think Urban Outfitters has done a great job when it comes to easy navigation. The menu is located at the top of the page, making it easy to locate. Once you click on another link within one of the tabs it takes you to the type of product category and then once you click on an item it shows the trail you took to get there above that specific item, making it easy to see where you are and how you got there. It also bolds each category you selected as you go down the link ladder. I’ve personally never had any issues using their website. They also have other helpful links at the bottom of the page. Such as Order Status, Shipping, After-Pay, UO Rewards, etc. Once you click on some of these, it’s nice because a sidebar of links appear, making it easy to find something else if you selected the wrong thing, didn’t find the answer you were looking for, or if you had additional things you planned to click on next.
Answer the following based on what we have talked about in class and possibly after reading the articles linked below if you need more information. Be as clear in your writing as possible.
Why is there a separation of content (HTML) and style (CSS)?
Content and style are separated to keep appearance, such as visuals and design aspects, and structure separate since in many cases the design and development aspects of a project are performed by different people. Keeping both separated allows both initial production accountability and can simplify maintenance down the road.
What are some benefits and some draw-backs?
Since content and style are separated, it can help you stay more organized since you can have everything for both HTML and CSS in its own place and not all mixed in together. Since HTML and CSS are often performed by different people it may be a drawback since you may have to rely on the other team to fix or complete something that you have have no knowledge or understanding of and that could hold up a project.
Think of yourself and your user experience with your code, why would you want to keep your content and style separate?
I would want to keep my content and style separate to stay more organized. It makes it easier to understand and read. It would also make editing less painful and simpler.
Consider and write about why the designer and copywriter at a newspaper company are two different people.
The designer and copywriter are two different people and roles because they don’t share the same knowledge and skills. They both are working with different information, therefore use different software and would have different educational backgrounds. They don’t know how to do each others jobs. The designer is arranging material and images according to editorial guidelines in order to make it pleasing to the eye. While the copywriter is responsible for the written text of the newspaper. A copywriter is attempting to get the reader to take actions. It’s a form of advertising promotional materials.
Can you use the Columbia website without images?
Yes, because there is text around the images informing you about that part of the website. Such as, titles, captions, summaries, and links directing you to information. These all act as context clues and help describe what the image may have been.
How about the other sites you visited?
Yes, because there is text around the images informing you about that part of the website. There are context clues such as titles above images or sections, captions below images, links to more information below images, etc.
I looked at Papa John’s. You don’t necessarily need to see what the food looks like to know what you’re going to get. Most people are familiar with common foods and beverages. The different types or pizza’s, sizes, toppings, crusts, and prices are all written out. Along with the sides, desserts, and drink options. You can read what the ingredients and details are.
The real question is, should you be able to use the site without images?
Yes, in case a website doesn’t load fully or if you turn your images off to save data, or if someone uses screen readers.
Do you get the necessary content of the site without the images loading?
Yes, I just don’t get the visuals along with it.
In Chapter 1, Krug lists things that make one think when visiting a website. Based on this, give an example of something that makes you think when interacting with a site. Find an example of this and include a link to it (make sure it is linked not just text)
I always wonder why certain important things are placed at the bottom versus the top and vice versa. For example “Contact Us” is offend at the bottom when I think it should be part of the menu at the top. Or why the return policy is at the very bottom, but that’s because companies want to keep your money and not get so many returns.
Both “Contact Us” and “Return + Exchanges” can be found at the bottom of the page on Urban Outfitters site.
Give some examples of how one could create a content hierarchy, or indication of importance of elements on a web page (based on the reading). Include a couple links to pages that do both good and bad jobs of creating information architecture – defined as the structural design of websites and the art and science of organizing and labelling websites to support usability and findability and/or content hierarchy.(make sure the links are linked not just text)
The more important something is, the more prominent it is – Important headings should be larger, bolder, in a different color, set of by more white space and toward the top of the page.
Things that are related logically are also related visually – Group similar things together under a heading, displaying them a similar style, or put them in a clearly defined area.
Things are “nested” visually to show what’s part of what – Shows what is involved within headings.
Any website that is selling something is usually really well laid out. Everything is separated my product, gender, theme, or type making it easy to find exactly what you’re looking for.
There is just so much going on in every part of the website. There is loads of information to read causing your eyes to wonder in every direction and get frustrated. – http://www.ahml.info
What are some website design conventions that you could see using when you build your website? Your examples do not have to be listed in the book.
The “Contact Us” button could be at the bottom of the home page. The “Search” button could be at the top right of the page. The logo would be placed at the top left of the page.