HTML prototypes or stuff really starts to, you start to get more native into code. Again yesterday we looked at looking at the browser to generate code for us, we looked at GridLover, which produced a type scale for us. So again I consider that a form of prototyping in the browser. I'm beginning to work with my brand and my components in the browser. I would highly recommend checking out Typecasts. They've got some great tools again that get you in the browser playing with type sizes, scale and color, and even allow you to make things like style tiles and element collages directly within the app. And they generate code that you could use. GridSet is another app that I encourage you to play with. All these things are one form of prototype. Now the last piece I wanted to show you today is this is a tool called Froont, and so this takes a lot of those idea we looked at in separate pieces and actually puts them here. Again a lot of people and products are trying to conquer this market or t...
rying to establish alternatives. Like, do I have to learn code? And how to make a website? Kinda like get in the browser sooner. So I find a lot of those tools to be compromised because they're trying to do too many things at one time. They're trying to not only let you design, and have communication, they're also trying really to produce code. And I just, I'm not sure how realistic that is. Just because they're sort of separate things. It's challenging. What I really appreciate Froont who is one of our sponsors, allows you to look at some key elements and the cool thing about Froont is when I was demoing a lot of things that I wanted to show, this is the one where I turned it on, I hit some buttons, like wow, that did something. I didn't have to like, ramp up and take my knowledge as a photo shop user and a code person and put them together and try to figure out whatever weird metaphor system they had come up with. This is what it did, I jumped in here, I was like, this is pretty nice, what, wait, what, that's great! So I start to see how this project, how these components, so they have prebuilt components, off to the side here, multicolumn desktop components, that are built and designed to become flexible on the browser. So I take an element like this four column grid, I can drop it right into my comp, I'll change those images to make them space related. But how does that get responses, wait, like what they have done is what I think is really cool about this tool is that they added these little enhancements, these animations, that like, I can see breakpoints in codepen, right, I can see breakpoints, but there's something about how they've animated and art directed these components like they've curated these components that as a designer I can imagine someone who's sort of bridging this gap, they answer a lot of questions for me, and they're enough to illustrate as a designer to a developer, this is what I intend to happen. So this is a bridge, I see this as a bridging tool. Maybe not as final code output although, they're ready to add URL's to these sites you make here. This is a publishing platform, but on more complex projects I see it as an illustrative tool, as a learning tool, something that's sort of like bridged again that gap between a traditional visual designer and a front end developer. The way that this breakpoint graph works, if you watch the icon here, so this is the portrait display on a phone, this is the horizontal display you can see the icon flip. Again this is the portrait display on a Ipad tablet, this is the flip and again this is full screen. If you want to, you can get into, more styles. And actually have Google fonts hooked up, to where you can actually select, just Typecast does this too, it allows you to pull and preview fonts that are being hosted by various hosting services into this directly so that you can use your Type Kit font, you still have to set up a Type Kit account in order to publish it, but it can be in previewing it. Again you'll see more of these partnerships that are separate business models are all kinda getting tied in together. The Google fonts of course are free so you can sort of add those in and feel okay with using that stuff. The Type Kits stuff you just have more options. But you have to set up a Type Kit account in order to sort of use those and publish those fonts.
And you wanna use Fat Boy don't you.
I can just tell.
I'm looking at that and I'm like,
There it is, that's exactly what that needed.
And if you're a designer that wants to leverage one of these frameworks but you're not gonna be able to get into a browser, then and you wanna kinda design a comp, then do a search for say, Foundation UI kits, or, you know, Foundation stencils. You're gonna find kind of files that will be full of these elements so you can kind of create the mock ups, and so that way even leverage the grids which is something that you can kinda just quickly build on top of what was already available and how that's gonna map back to you know what's going on in the browser, but already be familiar.
Yeah it will cut down on that friction. If you are of the adventurous type, CodePen we looked at yesterday, has a deserved foundation components loaded in there, so you could start playing with this stuff and seeing what things do, I highly recommend it. It's a pretty nice service. And again you're not writing this is literacy this isn't penmanship. So a couple of different kinds of prototypes that we'll just get through really quick. When we come back in our next segment we'll get into the finer levels of code literacy is how that works. Lo Res first, again, really blocky. This is the stuff that we looked at before. These are HTML Content reference elements. These are really, really simple things. They're just taking those wireframes, and we're directly, we're in Foundation but we're not adding any components. We're just using it's grid to understand breakpoints. This is what that looks like across browser windows. This is in HTML now, I can flex and pull this, I can actually see this stuff working. So this is my HTML content reference wireframe. Again, not a whole lot of nuance and design happening here. What I'm curious though, is what I suppose would happen in static form, does that make sense? Oh yeah, that ticket that I need to be at the top, this content summary brief, I still need that ticket to stay close I don't slip underneath content full, so I'm able to work that out with the front end dev. Okay cool, my ticket stays at the top, I don't lose the ticket, I still get both the mobile experience and the desktop experience and I don't get that compromise, so you can work all that stuff out. Again, really low level stuff. Next up Medium Res HTML wireframes, this is again, plain text exercises we're gonna flow this stuff into those really blocky eight bit things that we just made. We're using native Foundation components, we're not adding any styles to it we're just adding content, that as a designer we're not there to make aesthetic decisions we're there to make structural decisions. This is what that looks like. I didn't do anything yet as a designer. I haven't touched CSS. I've modeled the things in wireframe, I worked with the front end dev to draw... The front end dev really hasn't done much to customize this. This is just the stuff that came, the only customization we felt was necessary was overlapping the headline on top of the photo cause it really matched the layout in the wireframe, that's it, everything else is just drop and click no styles. So again it is important to understand that prototyping is not a simulation, prototypes rely on that UI library that we made it relies on everything that we've done it's now rolling and gaining speed at this point. It's like, this is why we did all that stuff. We keep styling to a minimum, we're not worried about production code, and we're just trying to take the thing to the next level, so thanks.