Creative Thinking Space http://meganstephens.posterous.com Megan Stephens workbook for Digital Interactive Media posterous.com Tue, 21 Aug 2012 22:43:43 -0700 Rationale http://meganstephens.posterous.com/rationale http://meganstephens.posterous.com/rationale

I'm glad I finally got through my first time designing a website and carrying it through (kind of) to the end product. My website was for Vinyl Collectors around the world. 

I identified this audience as a smaller community globally, but it's quite a big local community for me to tackle, so I gave a basic idea as to how it might work. I had a lot of trouble with the coding etc from the start as I was a week behind, missing 3 classes, and then having to miss another 2 because of the Typography focus week that was being held for my paper. Annoying. However, I pushed through and kicked my A into G. 

My grid was simple enough in terms of a mainframe, and the menu bar was always to be at the left hand side of the page, no matter what section the user was in. I wanted it to be graphic but easy to use. Instead of having a home button, I chose to use The Collective logo to route the user back to the home page, where all the albums were showcased. 

I wanted the homepage to be visually captivating as well as informing about the artist, and didn't want the user to have to leave the home page to view the information, therefore used an overlay javascript to achieve this, and just inserted the image I wanted to show. If I had had more time, I would have made the scrolling, and the 'Buy Now' button work, but you get the picture.

I like the way the site moves from page to page, but if I was to do anything differently I would go through the site with a fine-tooth comb and weed through all the text, although it's clear. 

The site is community based simply by being able to swap and share the records in a web to physical form, and being able to post on the forums, and view user profiles, connect on social networking sites and share thinking about LP's and music in general. 

I recieved some good feedback at the class, which if I choose to, should enable me to build the site more, as there is a definite audience out there who would use a site like this.

 

NB: If you look at the last post I did, it shows how the overlays work with each page. Thanks. 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Tue, 21 Aug 2012 21:43:00 -0700 Final with overlays that were designed, but not put in working model http://meganstephens.posterous.com/final-with-overlays-that-were-designed-but-no http://meganstephens.posterous.com/final-with-overlays-that-were-designed-but-no

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Tue, 21 Aug 2012 21:39:00 -0700 And the final of my website design http://meganstephens.posterous.com/and-the-final-of-my-website-design http://meganstephens.posterous.com/and-the-final-of-my-website-design

Happy with the layout

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Tue, 21 Aug 2012 20:54:00 -0700 A few of the overlays I planned to use http://meganstephens.posterous.com/a-few-of-the-overlays-i-planned-to-use http://meganstephens.posterous.com/a-few-of-the-overlays-i-planned-to-use

These were for the About, Swap and Profile overlays

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Tue, 21 Aug 2012 20:50:49 -0700 Design http://meganstephens.posterous.com/design http://meganstephens.posterous.com/design

What I was working with while working on the html, including one overlay.

I was a bit scared to start this but as one of the previous posts show, the screenshot of the initial workup with the html etc shows that the grid is 1/3 to 2/3 in ratio; which can then be changed to 1/3 equally across. 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Tue, 21 Aug 2012 20:42:00 -0700 Page Transitions http://meganstephens.posterous.com/page-transitions http://meganstephens.posterous.com/page-transitions

http://tumblr.com uses a cool transition from login to sign up, that I really like. I doubt I would have been able to do it but it was on my mind to use if I took the site further and had more time. 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Tue, 21 Aug 2012 20:34:04 -0700 It's been a while http://meganstephens.posterous.com/its-been-a-while http://meganstephens.posterous.com/its-been-a-while

Since I posted anything, even though I have constantly been doing work. I forget to screenshot everything as I go, and I was so intensely into getting this website layout finished that I forgot to post. My Bad. 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Tue, 21 Aug 2012 20:34:00 -0700 A few Screenshots of my work in progress before I start showing the final design http://meganstephens.posterous.com/a-few-screenshots-of-my-work-in-progress-befo http://meganstephens.posterous.com/a-few-screenshots-of-my-work-in-progress-befo

They're a bit meaningless but this was the start of my website, I found it quite difficult to put together and struggled to get my head around it at first, but I want to keep at it and improve my skills.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Mon, 06 Aug 2012 22:45:00 -0700 Index Page http://meganstephens.posterous.com/index-page http://meganstephens.posterous.com/index-page

Still a draft, minor tweaks to happen, but pretty happy with how this is looking

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Sun, 05 Aug 2012 20:52:00 -0700 Creative direction http://meganstephens.posterous.com/creative-direction http://meganstephens.posterous.com/creative-direction

At interim today it seemed my site was looking to be on track, need to do more pages obviously but I'm getting there :) Good to know.

On the other hand, have been working on more design stuff for my pages, namely the title of my site 'The Collective' and these are a few of the options, with some colour to consider.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Sun, 05 Aug 2012 17:47:00 -0700 More of a look at what the website could look like http://meganstephens.posterous.com/more-of-a-look-at-what-the-website-could-look http://meganstephens.posterous.com/more-of-a-look-at-what-the-website-could-look

I like where this is heading, still needs lots of work done to it but you can get an idea to where it might head. 

Screen_shot_2012-08-06_at_12

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Thu, 02 Aug 2012 20:15:00 -0700 First Layout http://meganstephens.posterous.com/first-layout http://meganstephens.posterous.com/first-layout

Just seeing how things work for my proposed site. Still have lot s of work to do, but it says it could be possible I think anyway. Using just block colours, have done the home page and the "about' page.. not too bad at the moment. Could be kind of cool to have a Online users panel on the side of the about page or even the home page. Will add in keys later. 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Thu, 02 Aug 2012 16:47:00 -0700 Sitemap draft: http://meganstephens.posterous.com/sitemap-draft http://meganstephens.posterous.com/sitemap-draft

Better late than never, just got to a scanner: 

Sitemap1003.pdf Download this file
Sitemap1005

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Thu, 02 Aug 2012 16:38:00 -0700 More grids: http://meganstephens.posterous.com/more-grids http://meganstephens.posterous.com/more-grids

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Thu, 02 Aug 2012 16:31:00 -0700 Overlays http://meganstephens.posterous.com/cool-site-i-found http://meganstephens.posterous.com/cool-site-i-found

I liked the way this overlay worked.


Picture_39
Here are the grids I did over the layout of RichBrown's one. 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Thu, 02 Aug 2012 16:12:00 -0700 More site inspiration http://meganstephens.posterous.com/more-site-inspiration http://meganstephens.posterous.com/more-site-inspiration

Have been looking at more sites to see if I can work out their grids and if I can follow a similar one for my Vinyl Collective website. Everything is still so broad but I'm working at getting that down to a solid idea or maybe two so that at interim I can clearly know where I'm going.

Screenshots taken from http://www.amazeelabs.com/en/services and from http://www.suedhausbau.de/

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Sun, 29 Jul 2012 20:30:00 -0700 Grids for Sketching http://meganstephens.posterous.com/grids-for-sketching http://meganstephens.posterous.com/grids-for-sketching

http://benmartineau.com/works/grids-for-sketching.php

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Sun, 29 Jul 2012 19:59:23 -0700 Some more examples of Vinyl/Record Collecting websites http://meganstephens.posterous.com/some-more-examples-of-vinylrecord-collecting http://meganstephens.posterous.com/some-more-examples-of-vinylrecord-collecting

Have had a scout around o the net and there aren't many sites that cater to the audience I want to cater to. They're all boring looking, hard to navigate websites with lots of tabs, no clear headings and LOTS of text. Boring. But I will give them a bit of credit, some do have some good ideas, they're just not pushed creatively to engage an audience. For more people to visit the site and actively use it, they need engaging design and clear navigation. 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Sun, 29 Jul 2012 19:59:00 -0700 Site inspiration - Dust & Grooves http://meganstephens.posterous.com/site-inspiration-dust-grooves http://meganstephens.posterous.com/site-inspiration-dust-grooves

Dust & Grooves website has it right in my opinion. It satisfies its needs. Has lots of tabs etc for navigation but it's still clear, and stays the same throughout the website. Aesthetically pleasing to me, I like the design, it's simple and uses photographic elements to bring colour in. Muted otherwise. Has links to social media. If there was anything I wanted to add it would be a 'swap' section which is what I want to do with my site. I also want a user profile for anyone who wants to swap etc. But I want to do something like this for mainly Australia/NZ residents, as that is the market that is missing out.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens
Sun, 29 Jul 2012 17:54:00 -0700 User Profiles for community website http://meganstephens.posterous.com/user-profiles-for-community-website http://meganstephens.posterous.com/user-profiles-for-community-website

Dust and Groove

 

Picture_5
This is a community website dedicated to Vinyls/Records in America I think.

 

User Profiles:

Typical User who is an active member of the group:

Age: 25 - 60

Sex: Male (predominantly) maybe 20% female.

Geographical location: Worldwide (probably Europe/USA mostly though)

Time spent online: 10-13 hours per week

Estimated Income: $250 - $1000+ per week

Amount of free time: Possible an hour or two at the end of the day, or lunch breaks etc.

 

Typical user who isn't a member of the group, that you need to attract:

Age: 16 - 25 year olds

Sex: Female (more) and male.

Geographical Location: Asia Pacific/Australasia

Time spent online: 10 - 25 hours per week

Estimated Income: $200 - $500 per week

Amount of free time: Outside study and work, possibly 3 hours. 

 

I don't know if I'm even doing this right, but for now this will do.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/2089804/552677_10151086683275568_1380439573_n.jpg http://posterous.com/users/n5stU2UkG1eA2 Megan Stephens meganstephens Megan Stephens