Beginning to code the new website seems infinitely easier than the first time around. Sometimes you just have to struggle through something and make a million mistakes to get better. Originally when we first started coding I think it was really difficult to figure out how to organize the html and where to make divs and what should go in those divs. This time around I started by focusing solely on how to break the site down and where to make divs as well as looking at which ones can sit inside other ones to carry on properties. Before I think I was just learning the rules of the game and now I feel I’m able to be more strategic with the code. I believe there’s a life lesson in here… You can’t just give up when something is hard because you never know what will happen the next time you try. Also, I named things much more carefully this time around because that becomes oddly really important. You could get lost in a css file with a poor naming system.
Ally Frame
In class today we looked at coding style guides that in the real world you would give to the person coding your site. It makes a lot of sense for the designer to look at how the font size and leading and stuff looks coded before handing it off. That would also make the coders job much easier. The downside is it looks incredibly un-fun to make. Everything needs to be very basic and easy to understand quickly. For that reason I don’t think I’m going to make one for this last project. I’d much rather try coding something dynamic that you can show off when you’re done. Also, since I’ve already done the mock ups, I know what the fonts will look like. So I’m just going to try coding!
I felt confident going into critique. I’m excited about the content of my website and am pleased with the overall look. I really wanted it to be quirky and fun and I think I captured that feeling well. Coming out of crit I feel excited to make it even better. Most of my feed back was just ways to improve it and make it even more fun. My favorite idea I was given was to add sound effects throughout, specifically sounds that you would hear at a game; wheels spinning, crowds clapping, girls yelling, knee pads crashing against the floor, and all that good stuff. I think it would also be super neat to add a video behind the quote I wasn’t sure how to animate. That would add motion and interest without worrying about stepping into cheesy animated type zone. I will also probably go back and rearrange the layout with the girl yelling so the type doesn’t cover essential parts of her expression. Very minimal things to change, but things that will make the site spectacular.
Wireframes still kind of confuse me. I never know how much information you need to put on them. Plus it seems like you end up writing out how the site will move anyways so it seems silly to me to place several boxes here and there for type and image. But I did it anyways and can now move on to making a mood board and figuring out the first comp. I’m doing my website on the transformation of a roller derby girl. I want it to briefly explain the game but focus on how playing it changes girls for the better and use that to inspire other women to go get out of their comfort zone. A lot of athletic websites are really serious and use a lot of black with intense photography. It will be goal to branch out from this and do a sport website that’s super quirky and fun and makes you want to go play.
I’m pretty excited to start a new project where we design a website. Mainly I’m excited that we have to tell a story because stories are my forte. Plus we get to pick whatever topic we want which is pretty rad. What will be important in this project is getting the viewer to be drawn down the page. To do this we will need to use sound, animations, beautiful type, and also some illustrations or photos. We will also have to be wary of the body copy. Asking the viewer to read a lot will not be favorable and they probably won’t want to continue scrolling down the page.
Talking about wire framing was really helpful. The main thing to focus on with wire framing our website is to show the interface elements, the navigation systems, and how they work together. It’s also important to indicate type hierarchy although it’s not important to pick fonts or anything yet. A strong, well designed wire frame is key to designing a beautiful website. It’s like making a house. The wall colors and floor tiles don’t mean a thing if the foundation is crumbling.
Monday was a critique day. I felt like crit was very beneficial and offered some great feedback on how to make my system work even better. Web design isn’t something I’m super comfortable with so I enjoyed hearing how others would take my system even further and more effective. The main takeaway I got was that I just need to play up the flower thing and really make that the experience of my system. Figuring out how to make the petals obviously buttons would be important. Also, making the garden page the main one where people can stop and play would be ideal according to my feedback. So when you click on a flower it doesn’t necessarily bring you to a new page but creates a drop down page with info so you can easily get back to the garden. More minor feedback included putting a title on the home page. I’ll have to think of something clever.
Going in to the weekend I was thinking I had this navigation system design completely under control and I wouldn’t have to spend extreme amounts of time on it. Wrong. I know how I want the system to work and all but I am struggling to get the style I envision in my head onto the computer. I was looking at lots of seed packet designs and was going to base it off of those. However they really don’t have that great of design so I don’t know why I was trying to copy those. It’s time to wipe the slate clean and start afresh with a new approach.
One thing I am learning through this is why there aren’t a whole lot of illustration based navigation systems. It’s very difficult to change the overall style of your system when you have to redraw all the components. I’ve done several iterations now and am ready to move on away from flowers and seeds. But also working with organic, non-geometric shapes can get messy. It’s harder to make it look clean and organized. I think playing up the organic nature and not trying to fit it into grids and such will be the best choice for me now. You have to go all in or not at all. I also have big ideas for how the site would move. Hopefully I will have enough time to get to animate a little bit of it.
I’m pretty excited to go forward with the navigation system. I’m glad we just get to design it and not worry about coding it because that would be crazy hard. Hopefully making little animations to show how it works will go smoothly. I’ve done some animation stuff in the past but I always get really frustrated. Timing is difficult to get it smooth and to move exactly how you want. Luckily this will only require minimal movement so I should be able to handle that.
The websites we looked at in class were kind of insane. I have no idea how I would even start to code something where each piece on the page moves at a slightly different time. Who even has the patience to do something like that, I don’t know. But they deserve an award. The flywheel page was really inspiring though. It wasn’t full of crazy tricks so it’s something I could do with some time. But it’s also just super whimsical and creative which I love. The clever concept is something I prefer over cool code tricks. I might need to up my game a little and just make my navigation system super fun. That type of thing is more up my alley.
The box model was extraordinarily helpful to go over. I think I need to go back into the coding of my website and change what I’ve been using. I was just randomly guessing at margins and padding so I think the coding looks pretty messy to a trained eye. Reading through chapter seven really enforced the idea of the box model too. That was the part of my website I was just trying to figure out too. Perfect timing to learn about it.
The part of the chapter that was confusing for me was that different browsers use different pieces of code, like the -moz or -webkit things that go before a style. We don’t normally add any of those to our code but then I was trying to figure out how to make columns and when I looked it up it said to use -webkit and then specify how many columns you want. I’m just really confused as to what all that means and how to use it or why some styles need it while others don’t. On a more positive note I am excited about the complex navigation system. My ideas were pretty quirky so designing one should be fun. I think I’m leaning toward the flower idea because the tunnel thing would get crazy confusing and the circle one seems more common. I haven’t seen a flower navigation system before so I might as well add one to the world.
Making connections between all of the terms, talent, and technology was much harder to wrap my head around than I originally thought. I like how the test we took prompted us to make connections and categorize the stuff in several different ways. It gets you thinking about how many ways there are actually are to connect the items. Thinking about putting them into a complex navigation system kind of hurts my head. I want all possible connections to be shown but there’s just so many it’s hard to know where to start. The examples we saw in class were really helpful to get us thinking outside the box. I especially loved the British museum website, I think it was. They had artefacts organized by region they were created in, time period, and then clicking on one created lines to other artefacts that it was related to. It essentially had three different organizational systems going on at once. I think ours could easily be sorted by at least two; whether it’s a talent, term, or tech, and then show connections between each item individually. There are probably many more ways to organize them but that’s probably something I’ll figure out as I go and start getting the basic connections put down and out of my head. Right now there’s not enough room to store all of that.