design courses, syllabi, schedules, resources and policies
Our app is being designed to help a potential user, Jerome, more efficiently put gas in his car on his way to work. During the process of developing this app, the creative team discussed that not only was the “big picture” to make his morning better, but we wanted the app to inform users on where and how to save their money at different gas stations, create a user-friendly experience for each app user, avoid having to see so many people for one small process, as well as give them security and accessibility. In doing so, there were a lot of different tools and features we wanted the app to possess.
We imagine the app to allow the user to connect to their device like Apple wallet and allow the user to connect all of his/her membership cards to any gas station they use to be stored within the app. This eliminates the need to carrying dozens of cards in their wallet. The app would then be able to compare prices for gas within in a certain location radius that the user has selected. Once the station was selected, the user can then order their gas ahead of time and have the pump ready to pump gas for you when you arrive there; the amount of gas you need and the payment would already be programmed into this order as well. The more you use the app, the more rewards you get through the app’s awards program. The programs also tie into store-specific rewards programs that allow you to earn specific things from each station once you collect a certain amount of points. The app also alerts your car when gas is low and tells you if you forgot to put the gas cap back on before you leave the pump. On a more technical note, the app comes with a support feature that allows users to troubleshoot any of their problems or concerns. It is also protected via password or thumbprint so no one can steal your card information or charge you for gas that you aren’t getting.
For this review, I chose Keep Portland Weird. It was one of the first ones on the page, so I clicked on it, and was immediately intrigued by the site. It opens up with an animation, then one click allows you to enter the website. It comes up with a list of the alphabet, which totally caught me off guard at first, but each letter lists a different thing to do or about the city. Each letter is a different color, but none of the colors fight with each other, and come from an analogous color scheme. Chapter 2 discussed the different feelings given by each color, which was definitely utilized when choosing a color to fit the letter. For example, C is for crocheting, which is a calming activity, and is represented in a blue color. The text said blue is a color that can give a sense of calmness. Also, the letters have a background that appears like a pattern, but is an image from what the letter is describing. It is very clever and a great way to get the user to click on the letter. It is also super great because each letter is different already, and then once the letter is clicked on, it pops up with its own analogous color scheme. A short description is given, and a button is displayed in the upper left corner to go back to the home page, or there are up and down arrows on the right side to navigate forward or backwards through the letters. There is basically no room for user error, which makes the site extremely easy to use. I love it and think it is so so beautiful and well done.
Z Creative Labs
Z Creative Labs’ single page site uses only black, white, gray, and pink in terms of color. The page scrolls from top to bottom. Along the side of the page there is a navigation bar that has an arrow pointing down to further emphasize the way the page is meant to be navigated. As you scroll there is a “Get in Touch” button in the top right corner that is clickable to contact the creators. At the bottom right corner there is a “Return to Top of Page” arrow that moves with you as you scroll. Most importantly, Z Creative Labs’ logo scrolls with you along the top left of the page.There are drawings that are “drawn” in the background of each section of the site to match the information that is being provided. These drawings are moving and are actively “drawn” when you scroll over its section. All of the drawings and uniform colors provide a sense of unity in terms of design. As you scroll down the page the title of the subject is in bright pink and is the largest font size in each section, which makes it easy to scan and read and see if it is the information you are seeking. The content is very straightforward and written in in a way that is easy to understand with common, everyday terminology.
The single page site for Z Creative Labs creatively depicts their company’s purpose in a creative and effective way. The consistency with color, graphics, movement, navigation, and scrolling capabilities works for them. It is easy for any user to find the information they seek. The site is easy to scan, read, and interpret the content provided. The site is easily navigated due to the scrolling, navigation bar, and clickability.
As a person that plays a lot of video games, and often does so with friends, I often need to find a way to host a game so everyone else can play while I am in class or just away from my computer. I find that leaving my computer on to run a game server is an option, but it can stop me from performing other tasks. For a game like Modded Minecraft, Nodecraft is the best choice when it comes to server hosting. Nodecraft.com is a website dedicated to letting people have their own server for gaming, without using their own computer. This means that the server will stay up and running 24/7 because it is not your own computer.
Starting off I went in knowing that I wanted a server that could run the SkyFactory 3 modpack. From the homepage there was no search bar and a menu with six buttons. Of those 6 buttons my mind went straight to pressing “Pricing”. I came to this deduction before looking at the other 5 buttons labeled “Home” (which was already highlighted), “Community”, “Blog”, “Support”, and “About Us”. After clicking “Pricing” it took me to a screen with six different plans and from past knowledge I knew I needed at least 3GB of RAM to run a server playing SkyFactory 3. I clicked the “Order” button on this new page under the plans and was amazed by what came up:
After revisiting the website for this assignment, I noticed something rather unique to Nodecraft that sets them aside from the competitors. When I click on “Order” for a server it doesn’t just show me the plans like other websites, but it also shows me the game types someone can run on each plan. This is unique to this website and highly useful to consumers. As I was using their function for checking the game types I noticed that it was titled “Customize Your Order”. This option had a slider that showed the game types and also changed the plan for you. This slider brings up a good point from the readings; “Faced with any sort of technology, very few people take the time to read instructions” (Krug 26). I believe that in this one instance that falsifies this statement. When someone is put into this situation they are faced with an option once more. Do you want to make sure this works for your game? If yes, then use this nifty slider. It’s an option that also may change the plan and the way the user is thinking.
So I put the plan into the cart and it took me directly to the cart. The most difficult part of buying this plan is the fact that you must have an account to use it. The most thinking I have had to do on this website has become the making of an account, and even that is easy.
The website was easy to use and made me think twice. The only thing that really needed to be changed was the cart. I was directly linked to the cart the first time I put an order into it. When I backed out of the cart to the homepage I didn’t see the cart anywhere. After looking everywhere I clicked on the “Pricing” tab again and then saw the cart. It would have been so much easier to use if the cart was also on the homepage.
Krug, Steve. Don’t Make Me Think!: A Common Sense Approach to Web Usability.
Berkeley, Calif: New Riders Pub., 2006. Print.
1.) The main purpose of Apple’s website is to promote, advertise, and sell their products. Not only that but they want to sell the ecosystem that comes with their products. If you get the new iPhone, then you need to get the wireless headphones to go with it, and maybe a MacBook to sync all of your information with. The website remains simplistic and informative with large pictures and as little wording as possible (Unless of course, you enter the ‘help’ or ‘learn more’ sections). This clear and concise look promotes ease of use and great user experience.
2.) Facebook’s wall is fairly simple to navigate with the main focus on what the user wants to see. Facebooks ads are all based on what you are liking within the domain. Not only is the first option on the feed to post about one’s personal opinions at the time, but there are quick links to your favorite pages displayed on the left side. In addition, the feed only shows posts from your friends. Facebook is a more personalized experience. If you have yet to join facebook, when you reach the homepage, there is a green button, which is standing out against the typical blue color scheme, to create an account. The set-up structure is very simple, sequential, and direct.
3.) Sequential: such as an online test or a book, Hierarchal: Corporate images like Apple, Organic: Wikipedia or educational sites, Matrix: Amazon, News
4.) Huffington: Navigation=30 Content= 70, Google: Navigation=10 Content=90, Wikipedia: Navigation=15 Content=85, Etsy: Navigation=30 Content=70
5.) They use emphasis of color and cleanliness of design to focus largely on their designs and works as a whole.
Ricky Petticord
Week 1 Questions
Google: Navigation 90% Content 10%
Wikipedia: Navigation 70% Content 30%
Etsy: Navigation 80% Content 20%
A review on http://sixpennkitchen.com/ and http://no9park.com/.
Six Penn Kitchen’s has simple yet aesthetically pleasing homepage. Sixpennkitchen.com not only offers aesthetic value with it’s simple color scheme, but also offers a user friendly navigation system due to its utilities on the top and bottom of the homepage. As far as balance goes Six Penn Kitchen’s webpages each offer the same centered style, pictures, and easy to read fonts that also makes it extremely easy to find what your looking for. The website effectively uses green text to emphasize and successfully direct the users eyes to important information. Also when using the navigation system the users place is held with a “You Are Here” indicator, which helps the user not get lost while searching through Six Penn Kitchen’s website.
No. 9 Park’s website offers an elegant design with its information laid out in the center of it’s pages creating a nice balance between the right and left margins. Navigating no9park.com is made simple with it’s local navigation and utilities on the left side, which also remains stagnant while exploring the various pages. Another pleasing aspect on No. 9 Parks website is that each page has a page name as well as a “you are here” indicator making it easy to navigate while maintaining its fancy design.
Both Six Penn Kitchen’s and No.9 Park’s website offer similar color schemes with the same centered layout. Although No.9 Park’s pictures help give the website a more elegant feel, Six Penn Kitchen’s website is more visually pleasing and does a better job of directing the users eye to important information. However both websites are easy to navigate due to there navigation bars and “you are here” indicators, but No.9 Park’s website does a poor job of emphasizing important information. Both websites use the same color scheme and for the most part the same layout unifying their webpages. Overall Six Penn Kitchen and No.9 Park are extremely identical with a few differences in layout, but Six Penn Kitchen’s website offers easier to navigate pages and colors that draw the eye to important information better.
Project_1_Stop Motion_Joe_Hale
Newegg is an online computer and electronics retailer. The home page opens with marquee showcasing sales and little reminders of why you might need to buy from them. Below it there are daily sales, and below that rave review of the website itself. This is an interesting design choice, as it lets the customer first get drawn in with the products before actively selling itself, i.e. “you need this, and here’s why you should buy from us”. At the top of the page are three drop down menus leading to various parts of the site. The first breaks the items available into categories for easy navigation. The second showcases more deals, and the third is a list of hyperlinks to their various sellers.
The “all products” tab is where I first began looking for a product. As Newegg is a computer-centric website, computing parts is at the top of the list with alternatives listed in descending order of relevance. I went to a tab labeled “electronics”, and a tab opened to the side, further breaking down down the category. I wasn’t going in with any particular plan, so I instead just clicked on the electronics tab to be brought to a page version of the break down tab.
The use of the breakdown tab is a great piece of web design, as it not only offers a quick way to see if a hyperlink will be useful before clicking over, but also serving to de-clutter navigation. It’s a simple, but effective tool to help keep consumers oriented.
The electronics page was a blown up version of the tab. With a specific goal in mind navigating would be easy. Just scrolling down the website felt packed, but not necessarily crowded. Almost every inch of screen real estate is used, with just enough buffer room between sections to keep it from being overwhelming.
Clicking on a product generalization, in my case HDMI cables, the following screen is a lot cleaner. It’s less pushing options and more just presenting products. Below each products if the price, and in a neat twist, the shipping as well. If there’s anything that makes this website stand out, it’s just that cool little feature. The design itself is comparable to Amazon, but how cleanly the shipping is presented is a massive, massive thumbs up in my book.
I selected my HDMI to HDMI mini cable and added it to my cart. On one side of the page there were suggestions for other, similar products, while on the other a picture of my cable and an option to finish the sale or continue shopping. I chose to continue shopping, which led me back to the page I selected a cable from. That little detail is also noteworthy, as if it just went back to the home screen navigating back could be a pain, but getting back to the home screen from there is a simple click away.
Overall, Newegg is not a particularly spectacular website, with its design being comparable to Amazon or similar retailers, but it has a couple of neat tricks to keep things decluttered and make navigation easy. It’s clear and concise, especially if you’ve grown up using similar websites.
http://www.newegg.com/
The w3c standards help designers and developers make there sites as viewed and functional as possible. They provide knowledge for web design, web devices, architecture, tools and much more.
Markup is how the content of the page is described. They can be standard generalized markup language, SGML or extensible markup language, XML. These are how the document is marked up. They are both very similar, however XML is slightly more precise than the other.
Using the standards will make smaller file sizes, increase portability, better accessibility and precise control. having smaller file sizes will increase download time and you can reach people quicker. With an increased portability one can easily scale from a large monitor to a small phone screen. giving you more control allows for you to change things such as line-height or padding properties that can be very helpful.
After reading through the book and coming across Krug’s five important things, I was able to then compare two restaurant sites, www.peterallens.com and www.no9park.com, and take note of the balance, emphasis, unity, and layout. Krug emphasizes the importance of creating clear visual hierarchies on every page, taking advantage of conventions, breaking pages into clearly defined areas, making clickable links obvious, and minimizing noise and distractions. When visiting www.peterallens.com it was easy to see that this site had structure and organization. Peterallen’s website displayed a strong emphasis on every page including a video featuring a food or drink item to catch your attention. Every page had just enough information and no distractions or useless details. The menu bar used underlines that would appear when you hover your mouse over a word, as well as highlighting the word in red making it easy to find my options and know when I was able to click it or not. Having clean and crisp images with minimal text gives the site a nice balance as well as the color scheme throughout the entire site. Not only is the layout clean, but it is easy to navigate, using only the necessary amount of buttons to make your way through their website without any trouble and a minimal amount of back and forth clicking. Within every menu whether it be the drinks, dinners, or desserts, the page is clearly defined into different sections to make it easy for the viewer to narrow their search and save time. Compared to Peterallen’s No.9 Park has a bit of a different layout but has some of the same balance and emphasis qualities. Along the left side is a menu bar of clickable links that would navigate you to pages such as reservations, gift certificates, and private dining. Like www.peterallens.com, No.9 Park uses Krug’s five important things to model their site, promoting their food selections through photographs that grab your attention at the top of the page. Although the layout of the site seems clean with minimal noise, I found this site more difficult to navigate. It was difficult to define different sections and areas as well as the text not being centered within the box. The color scheme of this site was not as pleasing or attention grabbing as Peterallen’s. However, the menus on this site, like the other, had little to no distraction and got right to the point. The food item itself was listed on the page with a brief description to give the viewers a little more insight as to what the plate had to offer. Overall I think Peterallen’s website is better in comparison to No.9 Park. This site followed Krug’s five important things as well as having a stronger layout and better emphasis with the videos of every food and drink category. This website caught my attention and was easy for me to navigate the entire way through.