These are some screen shots of the final website.
The Home Page including the main blog.
The comment feature for the blog posts.
The articles page showing more of the blog and also how the menu drops down.
The Preview gallery showing sample pages from the Illustration special.
The Past Issues Gallery where who can purchase the Magazines.
The job search feature.
A page about Amelia’s Magazine and it’s founder.
Initially the standards of html had not stuck in during my first attempt of making the website. And at this I hadn’t decided to use Amelia’s Magazine as my subject. I was going to mock up my own website using my own personal identity elements I had already designed in a prior project. But with such great images and articles in Amelia’s Magazine’s website it was evidently a good change in choice. It’s visual aesthetic was evidently appropriate for the aesthetic I had designed in my wire-frames and site architecture.
In my design I’d taken elements like the ‘Shop’ button from Wooden Toy Magazine’s and the idea of including a blog through Dumbo Feather’s website. It is evident that Amelia’s Magazine should adopt such positive features of these established websites but find a way to differentiate itself to gain a competitive advantage.
So prior to choosing Amelia’s Magazine as my subject of invention; I had no clue how to place all the divisions and how to target those divisions for individual style. It took a lot of patience and time to get my head around how html and css works. So with my second attempt to make a website; iy was slightly more successful now that I had a better direction in what content to include; that is with the original material in Amelia’s Magazine’s website.
The main issue with this one was I had difficulty separating the the 3 sections in to 3 divisions; that is sidebar 1 and 2 and the center which included; the header, navigation menu and the content.This was due to the use of ‘float’ which I found to difficult or organise and control. So I abandoned this attempt as I knew that it was crucial to have the home (main page) next to finished or just about perfect in order to be able to make the other pages.
As opposed to using ‘float’ to position my 3 sections I used ‘position’ absolute and relative to allow them to sit nicely into place with a little adjusting with margins and padding. Although at this stage I had not managed to fix the content box where I would include the blog and gallery etc it’s was due to not being to target that division properly. But when I did fix that issue I designed the content to function like a blog and the gallery to become interactive using shadowbox javascript.
I implemented the tag cloud, which I learned how to make by viewing the page source of Amelia’s Magazine’s website and the drop down menu in the navigation which I was helped through HTML Dog’s website.
The other pages featured forms and link elements to make it a ‘functional’ and user-friendly website. I wanted this re-design of Amelia’s Website to be more in touch with its users it terms of being more accessible; so adding in features such as the shop button, the jobs page and e-mail page etc
I had also added a sign-up to our newsletter form; but removed this after user testing as it caused a lot of complications. User testing was incredibly frustrating and time confusing but essential in making the website a working entity.
In the wire frame I had the content box set to a specific height so I can add in a scroll bar so you can navigate down that section only without losing the menu or the home page button etc however, in response to peer feedback I had removed this feature as it made the user feel almost restricted in viewing the page.
Despite being a very challenging experience I also found it very rewarding as I have enhanced and developed as a designer with these new skills. Web Media is a fundamental discipline to the design industry as it is the infinite doorway to inspiration, clients, jobs etc. So with these new skills I have learnt I hope to develop them further to become more efficient and formidable in web design.
I also mentioned that i wanted the re-designed website to be more interactive; so how I have try and do this was include javascript element ‘shadowbox’ which enlarges the gallery image for public viewing. These little features makes the overall website seem more elegant and sophisticated.
So in my final stages of adding features in my additional pages, I’ve made up my own blog format for the main page; which is recognised through the form options as well as the date and author of the post and ‘read more’ to lead the user to more of the article.
The implementation of the blog is the really enhance and personalize the user’s experience but allowing them to leave their mark on the website which is something Dumbo Feather was key in doing.
In the wire frame I had the content box set to a specific height so I can add in a scroll bar so you can navigate down that section only without losing the menu or the home page button etc however, in response to peer feedback I had removed this feature as it made the user feel almost restricted in viewing the page.
Now I had begun making the other pages and adding forms and link elements to make it a ‘functional’ and user-friendly website. I wanted this re-design of Amelia’s Website to be more in touch with its users it terms of being more accessible; so adding in features such as the shop button, the jobs page and e-mail page etc
I’ve also added a sign-up to our newsletter form to further reinforce the user-friendly orientation; although this is already an element on the original website but not focused on and not stylised to strengthen the visual language.
so now I’ve add in the complete elements such as the privacy box
and the drop down menu’s extra border line removed (the bottom of the box was doubling with each list item)
I’ve gotten the elements back in position as well as the content part working with further adjusting to the css file; it took time for me to learn what to target and how to label it. So now it’s add the other details for to make the website next to complete such as an image for the shop button and another ad and some more detailed content which I get to later. I also need to a privacy and copyright section under the tag cloud separate from the pink box.
When I did add in the Tag Cloud and justified it, it threw sidebar 2 out of whack and the content.
As opposed to using ‘float’ to position my 3 sections I used ‘position’ absolute and relative to allow them to sit nicely into place with a little adjusting with margins and padding. Although at this stage I had not managed to fix the content box where I would include the blog and gallery etc it’s was due to not being to target that division properly. I also had not implemented the tag cloud, which I learned how to make by viewing the page source of amelia’s magazine’s website and the drop down menu in the navigation which I was helped through HTML Dog’s website.
A diary of designing and coding my first website, that is, a redesign of Amelia's Magazine's min-website; drawn from a competitive analysis of related websites, my site architecture and wire-frames and general inspirations.
