Online Magazine layout slide for Bandung Blog Village's workshop: "Online Magazine for High School Student using WordPress", Comlabs ITB Dec 20, 2008

1. Wordpress
layout
for online magazine
by Bandung Blog Village:
http://www.flickr.com/photos/kymberlyanne/2913332849/
Ryan (deathrockstar.info) & Diki (chickenstrip.org)

2. Who am I ?
Ryan
- blogger & journalist @ www.deathrockstar.info
- music enthusiast & college student (ars unpar)
Diki
- blogger & comic artist @ www.chickenstrip.org
- web programmer & (formerly) web designer

3. 1
wplayout
http://www.flickr.com/photos/sheriffof0/3001692951/

4. default theme
blog banget, xoxo...

5. theme
introduction

6. header
post
sidebar
menu
footer (widgets)

7. http://www.flickr.com/photos/blackbiscuits/1615652119/
2 magazinelooks

8. professional magazine

9. cnn.com

10. how about wp based ?

11. media-ide.com

12. twentea.com

13. http://flickr.com/photos/cayusa/2896983287/
3 okay,how?

14. download arthemia
magazine-like – made in bandung!

15. extract to /wp-content/themes

16. wp-admin, appearance, arthemia

17. select & activate

18. voila! getting close!
still need some customization

19. Arthemia Rules
- create “headline” and “featured” category
- make arthemia's files writable
- hack some index.php codes for categories
- make the folder “scripts” and “cache” writable
- custom field “Image” on the post
(with image path.. not URL, for auto image resize)

20. create categories

21. 8 category
7
6
edit index.php
5
4
3
1
home
3 6 5 4 8

22. set headline & featured

23. headline/featured
custom field: Image

24. widgets, plugins, css,
custom images

25. magazine looks
customize more!

26. http://flickr.com/photos/ikhlasulamal
4 designtrend

27. round flashes mirror effect / reflection
glossy/sheen,
3D effect
gradients
diagonal
lines
rounded
corners
vibrant,
background
hi-contrast
solid?
colors
gradient?
clean white?
plenty of
spaces,
clear text
Also:
centered layout, oversize text, glossy icons,
highlight area, screenshot reflection
web 2.0-ish?

28. http://flickr.com/photos/quinndombrowski/2587844905/
and one more thing...

30. Thank You !
http://www.slideshare.net/niwat0ri
Diki Andeas aka. niwat0ri
Email: niwatori@gmail.com
Website: www.chickenstrip.org
Credits:
Free images taken from www.sxc.hu
Flickr CreativeCommons licensed image collections (URL at each page)
Ryryn & Puty Karina Puar's image collections