Brief: Blog pages + interaction design report
We continue in the two fold development - blog theme + OSD project:
- Come up with proposals for change in the form of an information architecture and a set of proposals
- Make draft for the first email you’ll send the list/individual developers involved in the project
- Continue your research and comment on the process of design that has been done in the project so far.
And on the theming end - work on the singular.php page, try to finish it by next week.
And again, if you’re stuck, use the mailing list. If you learned a cool trick and want to share, use the mailing list. If somebody got stuck and you think you might be able to help, use the mailing list.
Enjoy.
Brief: Reports from you OSD project + Mainpages
I want to start switching gears towards the final assignment. So each one of you should post about your progress with your OS project of choice:
- Sign up to the development mailinglist of the project
- Tell us who are the leading figures
- What are the leading issues
- Try to search for ‘design’ and ‘interface’ as a keyword in the discussion. What were the discussions around it, where did they lead? Are there already interface designers involved? How do proposals appear on the list? Is there a discussion? Do people meet in person?
- Is there a development blog? A forum? Where is the development taking place
- When you get to the step of introducing yourself / offering help, what do you think will be the best way to do that?
- Based on what you’ve learned so far and the feedback you got in class, what do you think can be your contribution to the project?
- Write all of these assessments in a post by Thursday, April 10th, 8pm.
I think we made some progress in the workshop yesterday and I want to be done with the main page by next week, so we need to still keep up the pace. Let’s break it down again:
By Tomorrow, April 5th, noon:
- Post a comment to your posts summing the feedback you got in class.
- Post at least three more comments to two of your fellow students.
By Tuesday, April 8th, noon:
- Submit a link to your blog with the header.php and footer.php index.php & sidebar.php implemented according to your design (in other words - the main page - ready) Like last week, with this link post a screenshot of the page too (it will be important for the documentation of your process)
By Wednesday, April 9th, noon:
- Post at least 4 comments to your fellow students on what they posted.
By Thursday, April 10th, 8pm:
- Post the link + screenshot of your main page, done. (by Friday next week your main page should be ready for critique as a WP theme).
And again, if you’re stuck, use the mailing list. If you learned a cool trick and want to share, use the mailing list. If somebody got stuck and you think you might be able to help, use the mailing list.
Enjoy.
Brief: Theming on
The next two weeks are broken to two parts.
Part One:
- Get the HTML+CSS of your main page done before next Friday (March 21st) and post the link to our blog. with a reference to the design made in photoshop (upload a png image to your post).
- Comment on every post made to the blog with your feedback, we need to start helping each other so we make some more progress.
- Post about three open source projects you are thinking of contributing to as your final assignment (the contribution can be any form of design, from interface design, through web design, through icon design to logo, banners, stickers, posters and t-shirts designs)
Part Two (for next class, March 28th):
- Break the design into header, footer, main.php, sidebar and so on… and try to turn it into a theme based on the Sandbox theme.
- Read Eric Steven Raymond’s The Cathedral And The Bazaar. It might help your approach to the development of your blog and we will have a discussion on the book after the break.
- Write a post about the open source project you chose to contribute to as a designer. Try to lay out the ways in which you envision your contribution taking place.
In two weeks from now we’re all going to be theming like there’s nothing to it. please release early, release often meaning, try to post your progress on our blog or mailing list, remember, Given enough eyeballs, all bugs are shallow. If you run into problems let us know, we’ll try to crack it together, promise!
Brief: We’re theming!
Thanks Michael!
Over the next two weeks we will start making our themes. Starting from design, through HTML/CSS and further through Wordpress. You’re going to have two main deadlines over the next two weeks:
By Tuesday, March 3th:
- Upload the Photoshop designed mainpage of your blog. Based on the way you defined it for today (purpose, inspiration and so on)
Rather than using only html/css elements, try to think how background images can help you spice up your design, check CSS Zen Garden (and others) for inspiration. Use Firebugs to check how things are done behind the scenes. - Comment on at least 3 posts by other students (if you post early you get more feedback, so start working this weekend)
- Try installing themes on your blog and look through their structure
- Install the Sandbox-BP theme into your wp-content/themes folder, turn it on, play around with it.
By Friday, March 7th:
- Upload the revised design for your blog based on the feedback you got from your classmates.
- Start writing your extend.css file to add to the default styling
By Tuesday, March 11th:
- Post a link to your blog with your own design starting to be implemented and with questions and tips about building a theme
- Use our discussion list to flag issues and questions to the rest of us (by all means don’t wait for the last moment)
- Comment on other’s posts and questions
For our next class Friday, March 14th:
- Try to have your main blog page as close to completion as possible.
Enjoy!
thanks again Michael!
see you in two weeks,
Mushon
Brief: Finish the tutorial, start thinking of a blog
Hi Class.
Next week I will unfortunately not be with you, I will be replaced by Michael Mandibeg, a new media artist, design educator and web developer who will be introducing you to the behind the scenes of WordPress.
We will give our tutorial another week so we can feel good about moving to the next assignment and knowing we have learned some CSS while we were at it. We will also setup our hosting plan and install Wordpress. And we’ll also start research towards our final project involving infiltrating a real open source project and giving our Graphic Eye for the Open Source Guy.
So:
- If you still need to, finish your tutorial CSS layout. Use the Blueprint mailinglist and our mailing list to bounce ideas instead of slamming your head agains the keyboard.
- Choose the theme for your Wordpress theme:
- What kind of blog is it? (if it’s even a blog…)
- Who is it for?
- What are the functions it should fulfill?
- Pick three inspiration sources one for content, one for structure and one for presentation.
- Go theme hunting through the thousands of free-software themes out there on the internet. Post three of them to our blog in the form of a thumbnail + a links to the theme page.
- Install the The latest Wordpress release on your site:
- Follow the one click install id you’re on any of these (and others) that provide it.
- Or the step by step 5 minute install tutorial on Wordpress.org or the visual tutorial over here.
- Next week Michael will show you around the nuts and bolts of Wordpress, so make sure you’re prepared.
- Start searching for an open source project to contribute to.
Tutorial: More design, More Blueprint, More CSS (final)
Now that we got some initial experience with Blueprint let’s dive a bit more into it.
- First of all I would like you to subscribe to the Blueprint CSS mailing list where you can both ask some questions when you run into difficulties, learn from other people’s experience, and yes, one day also help others with their BP & CSS questions…
- Second, go back to your PSD file and make changes to it based on the feedback you got in class.
- Third, fix your css grid if it need any more fixing and go straight into all the details, styling all the graphic and typographic elements in the page including :hover states, images and all. Feel free to steal take inspiration on other html/css design you find online. Visit the html validator every now and then, and try to see what you can learn from it.
- Post at least once to the blog this week with a tip for the rest of us, some cleverway you found of doing something or even a problem you have that you want us to help you solve. Please post before Tuesday 11:59pm.
- Buy a domain name for yourself and a hosting space that supports PHP 4+5 and preferably also provides one-click install for Wordpress. You are welcomed to do your own research and compare your results on the blog and through our del.icio.us tag OSDP.
* Personally, I can recommend Dreamhost which (even though lately they’ve been pretty bad with downtimes) are still a good bang for your buck (they host most of my site, and I have yet not moved). Anyway, I have arranged a serious discount for you so if you register through this link and entering our promotion code:OSDor by mentioning my email as a referrer (disclaimer: it’s a win-win referrer program so I am benefiting from your discount too).
- The final links to your works should already be hosted on your own sites.
- If any of you have technical (or other) problems with this assignment, or want to consult me on anything, please email me.
(don’t wait for the last moment with it)
Brief: Tutorial#2 - HTML+Layout
Now that we have made our initial introduction to Blueprint CSS I would like you to start using the grid to build your webpage’s layout. That, not before you design the page in photoshop.
For next week:
- Try to imagine your tutorial as a part of a larger site. Where would that tutorial be published? It’s up to you. You will design this page in context and so, the design should be convincing as a part of a larger site, including navigation bar, and links to the other pages of this site and maybe even outside it (partner banners / ads / endorsements…). This will be the only page of that site we will design, but try to imagine more than only the page itself so it would seem convincing as a part of a larger context.
- Design your page as a Photoshop composition and upload it to the blog as an image.
- When your design is ready convert it into HTML and CSS using Blueprint.
- Add new html elements for the site context you will be designing and feel free to make the adjustments needed to your previous HTML file to fit your new layout.
- Use new HTML elements ids and classes to style your page, use Firebug to monitor the html and css and to learn how would your tweaking of the code modify the browser rendering of the page.
- You should work only on the layout, you need not yet work on the typography, images and styling, we will do that next week. As far as the layout goes, it does not have to be very sophisticated, but try to make sure you’re teaching yourself new things while you’re at it.
- Post your questions and references to the blog, we would try to work together finding ways around problems and tricks to solve them. Use the instructions on the How-To page to post code examples in your posts.
Next week we will enjoy a Great, Wide Open presentation by Cyrus Chan.
Enjoy.
