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.