There are many things to be agreed upon when you are going to make a website. First we all agreed upon the fact that we were going to make it simplistic. We wanted it to be simple, not only because that is what seems to be modern, but also because we are new to coding and such, so that is why we chose to go a simpler way to start with. As we sat down and discussed, there were not many ideas that came to mind to any of us. But after a couple of hours of discussing and brainstorming ideas we finally came up with three different ideas that we all were happy with. We gave each of the three designers one idea each to work on that we were going to come back with next week to discuss which idea that we have worked further on that we liked best.
When we met back up again and showed each other the different layouts we had worked on there were much disagreement. We all had worked through each of our ideas and we all liked different things. But eventually we came through with the fact that we enjoyed the simple and squared one the best. Of course not all of us were happy with it, because there was a feel that it had been done before, menu to the left, content to the right and a title on the top. But we went with it anyway.
When we met back up again and showed each other the different layouts we had worked on there were much disagreement. We all had worked through each of our ideas and we all liked different things. But eventually we came through with the fact that we enjoyed the simple and squared one the best. Of course not all of us were happy with it, because there was a feel that it had been done before, menu to the left, content to the right and a title on the top. But we went with it anyway.
The problems encountered while redesigning the layout:
Firstly, we wanted to make something simple, since that is what our group agreed upon, but we still wanted it to be unique. The first problem was then to come up with something that would look simple and neat, and still not become too boring. There are times in your life when you don't have any original ideas, and you sit day in and day out trying to come up with ideas and it just doesn't happen. That was one of those days we were having for several days in a row. When we took a look around different websites, we found many interesting ideas, but we still did not want to steal anything directly off anyone.
So after thinking about it for a bit, we chose to go with a simple box where all the contents were going to go, that would have a set size for the layout. We did not originally want a set size for the layout, we wanted something that could resize itself depending on what kind of screen the visitor of the website had, but it was the most convenient idea we could come up with at the time.
So after thinking about it for a bit, we chose to go with a simple box where all the contents were going to go, that would have a set size for the layout. We did not originally want a set size for the layout, we wanted something that could resize itself depending on what kind of screen the visitor of the website had, but it was the most convenient idea we could come up with at the time.
The third real problem we encountered was the menu buttons. We did not want to search around on the Internet for already existing free images that we could use, so we decided to make them by ourselves by hand. We had already stated that we really enjoyed the icons on the menu buttons from our original ideas so we had to take the time to pixel out new icons ourselves. The bookmarks was really the only challenge with this page, and we did not want to make them entirely flat because of the fact that we did not want the whole page to look too flat. Playing around with some gradients and colours on Photoshop, we finally came out with a bookmark design that we were pleased with.
A fourth problem would be to do something interesting for the front page. We came up with something that would look appealing. The only problem would be which picture to use in the background of the big letter (our Logo) 'D'. We did not want to use a free stock image and neither would we want to choose a certain piece of art in the background to showcase anyone, because after all this was going to be a site for the whole DMD16 group.
We made several color suggestions for the layout. There was black and green, white and blue, brown and yellow. We were all leaning towards a white layout with the blue bookmarks, but we also wanted something that was darker. We did not fully enjoy the green and black. And then it came to us. Blue and black, that is what we wanted, so we did a dark gray layout with blue bookmarks.
We made several color suggestions for the layout. There was black and green, white and blue, brown and yellow. We were all leaning towards a white layout with the blue bookmarks, but we also wanted something that was darker. We did not fully enjoy the green and black. And then it came to us. Blue and black, that is what we wanted, so we did a dark gray layout with blue bookmarks.
The problems that appeared while trying to code:
The first problem we encountered was to test the website on different browsers because the website would not appear like we wanted in Firefox. The source of the problem was that the older versions of the Firefox browser would not support the transitions we had made. (e.g. the animation was when we hover over our menu buttons, it wouldn't slide down smoothly as it was intended to do, but instead it would abruptly shift down.)
The second problem was the actual making of the transition mentioned above when hovered. When the transition was added, no matter which menu button you would hover over, all menu buttons would be moving down when we wanted only the selected hovered menu button to slide down. In order to overcome that problem, we added each menu button as separate id so it would be easy to control them as individuals. Technically speaking, we created a section and added an unordered list in which the list type was set to 'none', and within that we added a list with all of the menu buttons with a separate class/id
The third problem was that we wanted to keep the same format on every page because we wanted all the content on the screen to stay in the big box that was the content box of our layout, and all the menu buttons below the box, so that the menu buttons would always stay visible even though there would be a lot of content on the page. At first we thought we could create a scrollable text box using a concept called 'iframe'. However whenever we added it, our menu buttons would disappear, therefore we changed our mind from iframe to creating a 'div' (division) where we made the text settings to overflow so that it became a text box.
The third problem was that we wanted to keep the same format on every page because we wanted all the content on the screen to stay in the big box that was the content box of our layout, and all the menu buttons below the box, so that the menu buttons would always stay visible even though there would be a lot of content on the page. At first we thought we could create a scrollable text box using a concept called 'iframe'. However whenever we added it, our menu buttons would disappear, therefore we changed our mind from iframe to creating a 'div' (division) where we made the text settings to overflow so that it became a text box.
