Adv. web design reflection

Throughout this course I have learned that webdesign is taking many forms and being able to have a site that reflects the brand on all these different platforms makes your brand that much stronger and having all those sites connect to each other. In terms of mobile site, it's not just importing the full site on mobile devices but it having it's identity as the constraints on the mobile site are different than on desktop as well as what people expect and want from the mobile version of the site.

Boss fluid update

The fluid site for boss coffee is moving along at a steady clip. I have the navigation above the header with the boss coffee logo and the cityscape beside it. The navigation is similar to the full site with the bars separating in between. I kept a white background since it gives the site a openness as a colored or cityscape background didn't work as well as the white background does and makes it more blocky. The biggest change is instead of having two main content boxes and three below it, the fluid site has just two info boxes, one highlighting boxes with three buttons to change the product pic in the box with either pics or text info on the left side depending on the page. Since it is a coffee site having too much info or going on may distract form the product by having too much content and it is a coffee site, so there is only so much information you need unless you have stores or other presents in the marketplace.

responsive site pt.6

A solid site that does a pretty god job of transitioning the site across 3 platforms. I like the simplicity of the site and it uses the space given pretty well. I like the header and nav. bar though I might of tried to see how the header/nav looks a little bigger since there is a bit of space in between the header/nav and content. I might move the featured work to the top and move one of those text boxes on the 2nd tier of content to mix it up and to put the work front and center. The mobile site looks unfinished and to horizontal, I would split up the nav and just have featured works and about the company on the front page of the mobile site.

responsive site pt.5

Another responsive site that has some nice elements but needs some tweaks on all three platforms to get to the next level. First her name could be moved to the left and the nav. next to her name or if you want to keep it then maybe add some type of a design since it just feels awkward in the middle like that. Also the pics seem a little rectangular which can be a problem especially on the smaller platforms. So I would do 3 pics of her crafts to levitate that problem.

responsive site trends

After looking through some examples of responsive/fluid sites on the web, I have noticed a few things like a number of sites having large navigations and when on smaller platforms the navigation becomes smushed and uneven as there are so many buttons and they are often 2 lines long and if you have or want to keep that many buttons without combining them then breaking it up and have the most important ones up top and the others on the bottom. Also it seems where the responsive sites hicupps are on the mobile site as those tend o have the most issues when compared to the other sites but generally the full site and the tablet version tend to fair pretty well and the tablet version tend to be the best layout.

responsive site pt.4

Another example of a site that translates it's site across 3 platforms. The overall look and feel of the site is pretty nice with a pretty good layout but I feel like the navigation is too big and combining some of the buttons will help levitate that and will help translate to other platforms better since specifically on the phone the navigation is very bunched and 3 lines long. Also I would move her name to the left as the central look doesn't really work. I like the focus on the pics though on the phone site the pic with the gray background kind of throws me off a little so maybe a pic with a lighter background as that top pic might fit in better.

responsive site pt.3

This simple site has some potential and nice groundwork but needs some tweaks/changes here and there to reach its potential. The site does a god job of translating to other platforms and keeping it's identity but there seems to be a lack of content on the site, it seem a little bare. I think the nav. bar should be moved above the pic as the nav. bar seems to get smushed and lost by the pic and i don't like having just text underneath the nav. as it sort of blends together. Also the site seems a too centered a can use some other elements to make the site more lively.

responsive site pt.2

This site has some nice ideas but some elements don't translate or work as well across the different platforms. I like the focused and streamlined look, the site isn't overburden' the viewer with info. The contact-phone number area in the top left feels awkward and should be moved towards the bottom as it just doesn't match with top part or have social media buttons like on the phone website, since it looks like they aren't on the other sites. On the phone site the social media buttons seem put of place and in some ways looks like a different site and doesn't resemble too much of the brand established with the other sites, so incorporating elements from the other sites should help the mobile site become more useable and not just cut and pasted together.

boss fluid update

For the fluid site, I decided to go with a sleek look with a more focused design so that it translates better when being scaled. Keeping elements from the first full site like the white background but bringing some elements like the cityscape into the header from the mobile site to tie them in. This site will have more focus on the products and the info and text will be more streamlined and highlighting the most important info needed for the viewer/consumer and still being informative.

fluid website pt.4

Here is a mock up of a fluid site that has the groundwork of a good,solid site and with some tweaks can move up to the upper tier. I like the overall look, it is very clean and nice, photos are good box design. I don't know how I feel about the orange text on the side as it does seem to get smushed on the side and since the rest of the site is so pic. heavy maybe having some sort of text in-between might help solve that issue. The nott design logo could use some orange to tie in with the rest of the site sine there is splahes of orange on them.

fluid website pt.3

This next fluid site shows another example of a site an look across three different platforms. The full site has an interesting look, I like the background but the nav.is a little small. I do like simplifying the nav. on the other platforms but where does the other info or tabs that got cut go, If somebody who uses the full site goes on one of the mobile sites, will they be able to find the info they need with the nav.bar trimmed down? I feel like the three button nav. on the tablet might be better on the phone, since the tablet can handle the full nav. bar while the phone can be more of a lite version of the site.

fluid website pt.2

 Here is another example of fluid design and how a site can look across three different platforms. Obviously this site is a more of a mock-up of how a site can look but it does  some nice things while other things can be touched up. The site adjusts well under the different platforms, staying true to its design and layout. The nav. seems a little small on the full site and the white space at top as well on the full site is a little bothersome.

responsive site pt.1

This is example of how a website can look across three different platforms and how to attack each platform and make them united but also how to make them unique. Moving the nav to the top on the 2 mobile platforms is nice and giving each button space from each other is nice. I actually like the 2 mobile sites more than the full site because some of the horizontal elements throw me off and I feel like the the nav. bar on the top works better than having it on the side.

fluid site pt.1

This photography site is good example of fluid design both on how it works and when it's done mostly right. How the site handles the sizing down is nice, with none of the information getting lost and the picture stays in focus which is important since it is a photography site. The handling of the nav. bar is interesting and a creative solution with the side nav. bar. If it becomes a problem then a solution might be to move some of the nav. to the bottom and keep the most important tabs on top. The site is clean with focus on the picture and the lines are nice.

fluid boss site

fluid websites are on the rise with a variety of resolutions out there a solution to make sure the site looks right on all resolutions and sizes is to create a fluid site that adjusts to the size, so if your changing the size of the window the website will change with it. Doing this site allows a redesign of sorts and take elements from the other sites and put them in one, so this boss coffee site will be cleaner and sleeker with more focus on each page and so when changing the size there isn't a sort of jarring effect to the site.

boss moblie site reflection

It was a interesting challenge to create a mobile site for boss coffee while keeping the image already created but also not just simply cutting and pasting from the full site and giving its own identity while still being connected to the full site. Biggest thing was navigation placement and splitting it up with 3 buttons on top and 2 on bottom was a good choice to maximize space. Also knowing what info will go own the mobile site so it is not full of text and takes away from the aesthetic and cleanness of the site. Also the useability of the site is very important as if the buttons are too small people won't be able to press what button they want and will get frustrated and go somewhere else and making sure the text and pics look right on the phone and not misshapen and everything fits nice and neat.

mobile site pt.7

This mobile site for a app building site has some nice features/ideas but poor decisions and execution hurt it especially for a mobile app company, i expect there site to actually be good. I like the having the nav. drop down with a press of the button and the slight opacity is nice, gives more room for content but the pages are kind of bland and there use of every color known to man for there text doesn't help matters and on the home page the white box bottom seems really out of place, like its not a part of there site. This site has potential but it needs a lot of work to get it there.

mobile site pt.6

This mobile site for an app, is very nice and with a sleek design and pages that gives all the info you need for the app. I like the sub-pages and the same management between the pics and the text is nice and its easy to read and follow. I feel like there could be some sort of color or change of font size or the font itself to distinguish the header from the body type. There doesn't seem to be a nav. besides the read more option and I think a nav will help especially the home page since compared to the subpages, doesn't seem as strong but overall a nice foundation for the site and a few tweaks here and there will bring it to the next level.

mobile site pt.5

This mobile site for watches(?) is a soild, slick look and presentation. The color scheme is nice and fits well throughout and having the arrow hiding and showing the navigation is nice though some might not see it or realize what it does right away and I like the buttons on the bottom though they might be small on a phone so having less and making them a little bigger might solve that potential issue. The subpages and nav. are nice and clearly defined and easy to use. Overall a solid mobile site that uses its limitations well and understands that a watch site is more about the pics then tons of info, especially on a mobile site.

mobile site trends

After looking at several mobile sites, it's easy to see trends and interesting to see what people do with a limited freedom when it comes to mobile site design. Obviously the biggest thing is clearly defining the buttons for the navigation because it is easy to accidentally press something accidentally on a phone, so have separating these buttons with lines and boxes is almost a must in most cases(depending on how many you have) but I have seen quite the variety when it comes to where the navigation goes on the pages from on the top, top and bottom and in the middle as well and really where you put the navigation is the few things that can stand out from other similar sites. Also more mobile sites are condensing the info on the sites and giving the important and  need to know info, instead of compacting all the info from the full site.

mobile site pt.4

This mobile site has some nice layout and focus but some design decisions hinder the site. The site is for peak performance clothing and the the color scheme is nice with the two bars encasing the middle and the focus on pics is nice since it is about clothing, though I wonder what the other pages look like since they just feature the more picture based pages and they don't have any descriptions. the white font on the snow makes the font hard to read and I have to squint to read what it says, so hanging that font color to a grey or black or blue will fix that issue since the text just gets lost in the picture. And i don't understand the purpose for some of the pages, seems incomplete.

mobile site pt.3

This mobile site has a nice simplicity to it but has some cosmetic issues that hold it back. This mobile site is for the typographic circle and I like the simplicity and cleanness look of the site, easy to navigate and buttons are easy to use and a nice layout. Though for a site called the typographic circle, they use a lot of fonts and it kind of annoys me especially on the home page and on on of the sub pages there is a splash of red and it's no where else on the site and a i think some small dashes of color like red here in there like in the social media buttons would be nice and bring some life to some of the pages.

mobile site pt.2

Another solid mobile site that hits some good notes with some other areas that don't hit quite as good. The main page is nice and simple especially for something like getting a quote. Obviously blue and orange go well together and the orange bar on top is nice, though i might have seen what lines between the nav bar buttons would have looked like and i don't like the map background it looks like a texture more than a flat map which would have worked better, it's just it kind of throws me off. The sub-pages are nice and easy to use and follow if you want a quote.

mobile site pt.1

This mobile site for AMADC is a nice solid mobile site that has both nice visual design as well as functionality. The red bar under the the black bar at the top that encases the logo(?), is nice and gives that nice splash of color and in the navigation on the secondary pages the red bar expands. I like the boxes as buttons (assuming there buttons). There easy to see and won't have to worry about hitting a button that you didn't want to hit. On the secondary pages the typography is nice though some of the text isn't noticeable though on the phone it could be a different story. Overall the colors are nice and the site has a nice flow and useability that is essential for a any website but especially a mobile site.

boss mobile site

with internet browsing on a tablet or phone becoming a norm, mobile sites have become more important for companies and developing a nice mobile site can be tricky with not a lot of wiggle room when compared to a full site. With limited space, the big thing becomes showcasing important info and leaving more detailed info for the full site and something that is easy to navigate both visually as well as physical since if the buttons are too small, narrow, etc. the user won't be able to use it and get frustrated and go somewhere else. So mobile sites are about a extension of the main site/brand and useability of the viewer both visually and physically.

Boss coffee website update

The website for Boss coffee is moving at a steady pace, layout is about finished, just deciding what is going to go win the areas on the sub-pages as they will have the same look, since I don't want the site to jump around. I decided to put a twitter feed next to the flash portion, since there really isn't too much you can do with a small box and the other info is going below the flash portion and will also have social media buttons on the footer. Definitely want to keep the site clean and not too much going as I want it too reflect the brand and the logo is clean, simple and continuing that branding over to the site.

coffee websites pt.11

This website has some nice elements and layout and the execution of the site is very solid. I like the nav. bar as it is easy to use and see and what a nav. bar should look like on most sites. Also the the layout below is nice with changeable box and the circles fit well with the site. I think the area above the nav. bar is a bit overcrowded and I would move some of that info. to other parts of the page to air it out a bit and not have it so bunched up.Overall a solid site page with a clean look and thought to the layout.

coffee websites pt.10

This site has some interesting ideas but the execution is not as sharp as the ideas. Well first i would move the search up closer to the top and move the nav. bar in that what ever the bar is because the nav. bar is sort of floating there and needs something under it. The 4 image box is an interesting idea but they seemed kind of slapped there and I would either put lines or boxes to separate them and put what the images represent on top of the image instead of below it. The image on the top is fine though I don't know how it relate to coffee as it seems more like fruit than something related to coffee. Also a footer would be nice.

coffee website pt.9

Another intriguing site that has some interesting features. I like the shapes of the image boxes for this site, it gives it a unique look. Having the nav. bar underneath the images doesn't really work and gets lost since your eye is drawn to the pics and up. So I would just move up the nav. bar and make it stick out a bit more and it would fix the weird empty space up top. I would make the text boxes at the bottom blue because I understand the light brown is the coffee inside the cup but the blue in my opinion will probably look better and I don't like having the whole site be different shades of brown, I like some splash of color here and there.

Flash ads patterns

Looking at someone's or companies flash ad portfolio, I noticed that a lot of the ones they showed were longer than I would expect them to be but they did have a a lot of info to doll out and the words often slid in there ads as well. Also they used more static images and the images would change kind of like a slideshow a certain extent and most of those were more square than a long rectangle. They often looped but these ads were more in the category of popup ads then one the companies official site which is what were tasked to do for our site.

coffee website pt.8

This is an interesting coffee website that has a nice look to it. This site has a slightly different look than the other coffee websites, I have featured. Even though i usually like having the nav. bar on top, I don't mind the nav. bar underneath the pic, though the two different texts is very odd and doesn't really work and they should just stick to one font choice for the nav. bar. I would put the address up top with the city and the phone number and replace the box with the directions/address with a pic. Also I would put phoenix, AZ and not just phoenix since I imagine there are other phoenix's and it is odd not to have the state initials. I like the background color/texture and the overall layout is nice.

coffee website pt.7

This site went in a more simple direction, which i don't really mind but some of the placement of certain assets. I feel like the nav. bar should be moved to the top because it feels like the top of the website is missing something and since there are only a couple of tabs you can still have that horse and buggy image there, just move it to the right a bit to fit the nav. bar. Also by moving the nav. bar it will get rid of some of the awkwardness because the pics feel cut off right now. I like the photo centric page, though some of the words on the bottom image can get lost.

 

Boss coffee website update

Finishing up the main layout for the site, decided to put a social media box next to the flash element since the flash portion doesn't take up the whole 955 width pixel length and below it on the left will feature 3 products and on the right will probably be a about us sort of thing. I am leaning towards doing a solid color for the background though I am not sure what color to use yet, will probably wait until layout is finished and then test different backgrounds since that is not complicated process. Though the one thing that will probably be said at the critique is that as of now don't have the tie design in there that was part of the animation though I see that as more of a product design of the site as some of the thoughts I had about placement of some sort of tie element seemed tacky and didn't flow with the site since it is a more vertical style and the coffee part isn't a part of it.

Flash use on websites

In my personal experience I don't notice flash being used that much, back in the day it probably was but I had dial up for most of that so i never saw those sites but besides the ads banner, I don't see any sort flash or flash like elements. My personal experience with flash is making a interactive kisiok but most of the time when you see flash on the internet at least in my experience is with flash games. Putting flash elements in our boss coffee sites has given an interesting thought process for the site and I can see why it can be useful for certain things/aspects of site but also why general it is not something the common man sees on there trope of sites they visit on a daily basis.

Coffee website patterns

While looking at a shit-ton of coffee sites, I have naturally noticed some trends/patterns. Almost all the websites I saw, specifically the ones I liked had pics of the product not just coffee cups with coffee in them and were featuring a new product or a product somewhere on the page. Also the use of a solid color in the background that compliments the page and is not overpowering. Also the home pages anyway don't have a lot of text and generally feature a big picture window up top with some text/pic combo on the bottom to even things out and give a nice flow to it. Interestingly a good number of sites featured some sort of shade of green in there site,which is interesting since the likely number on answer on the big board for most would be a shade of brown but I like the fact that some sites don't just throw brown around because it is a color associated with coffee.

coffee website pt.6

This coffee website has some elements that could work but the execution is not that good. the wood texture background could work but right now it is too overpowering and needs to be toned down a bit, either use different type of wood or alter the photo in Photoshop a bit so that is not so overpowering. The logo is fine though it is hard to read, so i would make it smaller and have the name of the company beside it so we aren't left wondering what is the name of this company. There needs to be something else added to the front page to make it stand out a bit more and not so insignificant. I would also move there slogan to above the navigation bar since it takes up way too much space.

coffee website pt.5

This coffee website page is an example of a nice well designed website page. The flow of the website is nice and everything gets equal footing and its simple and it understands that it is a coffee website so it doesn't have to try and be this whacky site that will eventually be dated, its a smart design that will last a little while without any major changes needed. I would tilt the logo a little to the left because it seems to skewed and kind of throws me off a bit. The colors are nice and nice use of the red on the tabs and headlines.

Boss coffee website flash portion

The flash portion of the website will be a ad of sorts introducing a new blend of boss coffee (boss dawn blend). The flash ad will be simple with the ad moving across a cityscape with the sky changing from night to dawn (Purple to sky blue) and it when it stops it will have some text introducing the new blend and it will last about 4-5 secs. and won't loop since personally i would find it annoying if it was. Don't know if it will carry over to other pages or not, if it does i might do some changes to the text at the end to switch it up a bit.

Boss coffee website

My website for Boss coffee is chugging along, My design is more simple and for the site to have some breathing room and no overload with info, pics, etc. The site will have a flash ad of sorts on the front page. I might have the flash animation on each page but with different accompanying it since I will have a the same layout on each page or some pages and replace it with  pics but the bottom part of the site will have pics and I don;t want to overload the pages with pics, want some sort of balance with it. Thinking I might do a solid color for the background or maybe a nice city background though I don't know how that would look.

coffee website pt.4

This coffee website has some things that are going in the right direction while other elements are not working. The background texture is nice and not overpowering and the picture idea is nice though i don't know if those pics are click-able and how do they relate to this coffee company. The navigation should just be a straight line instead of having the different tabs on top of each other because it seems like they go together instead of being separate buttons. the smudge behind there company name is unnecessary and doesn't really need to be there or move it somewhere else. The coffee cup is nice though i would move it up a tad, the coffee beans seem a little off though.