S7 Creation

7Shadows - Day 13
May 16
It was a pain to decide the sizes of the thumbnails so they all fit together, but I'm getting closer to sealing it up. This is the view page. I think navigation based on album will be pretty powerful as to how you will navigate through the items. Plus, there can be several albums for the same item. Someone could start a tutorial step by step and it would be easy to follow. Anyone can start a chapter for journal pages or poetry and it would be awesome to read page by page in good order.

I used a bit of javascript here where when you full-view, it quickly hide the right portion, allowing you to zoom without reloading the page. It's pretty seamless. The Add to Favorites, Flag, Share, Add to groups and rating will use AJAX. Again, so we can enjoy fast navigation without reloading for such simple tasks.

I think the chat bubbles will be fun. One of the problems we had in the past is that short comments used to look awful because I always made comment boxes too large and intended for long comments. It's now a reality we must embrace: comments can be quick and we have to accept all of them. So, the bubbles will fun to look at for any size of comments.

I also ran into a cool script for the expanding text box. The more you type in your comment or edit text box, the more it will expand. It's pretty cool and quite useful!

7Shadows - Day 12
May 15
I've started to upload a lot of pictures to see how the new system will respond to that. Quite well. I've been spending a lot of time testing the site, and thanks to the face that this is like the 10th time I'm doing Shadowness and to my large experience in building communities in general (not just Shadowness), I must say that knowing how to respond to every possible problem that may occur is a large plus into building such intricate and extensive features efficiently and rapidly overall.

I work a lot, but I'm generally doing just a normal day of work of about 8-10 focused hours. I'm definitely not on caffeine. I probably worked more intensively when I was on Pixilis, but here, being able to decide everything yourself really allow you to go past a bunch of compromising, time-consuming steps.

Again, because I work at home, my schedule is less stable. Life is an easy distraction and I end up watching episodes of Lost and doing naps to regain energy, where at an office, I would usually rely on coffee.

Oh, I promised to about 3 people that I will show something after 14 days of run. I'm both excited and at the same time, I feel a need to work as much as I can before showing anything to keep the inspiration and motivation flowing. It's gonna be tough, but we'll see how it goes and what I'll be willing to show. By the way, I didn't miss a day of work. ;)

7Shadows - Day 11
May 14
I'm honestly happy with the outcomings of the Posts area. It's a place where you submit 1-3 photos, enter an Album and voila, your upload is done. Once uploaded, it's not public yet, so you can decide to edit anytime in the future and decide to skip the ones you feel aren't ready. The Pending page will tell you which are not ready and need editing in order to show anywhere on the site. Then, once edited in the right places, they become published and will show in the respected areas: Art, Photos or Journal. Numbers will tell you how many there are in each of those categories. Click on one of them and you will find items that are batch editable, as well as linkable to the public view page.

After using this pretty unique system, I must say it's really useful for me to upload large amounts of pictures without going through endless steps.

Eliteness
In the past, many have pointed out that they don't want to submit just anything on Shadowness because it felt too elite for them. I really do hope this new version will fix that. My idea of Shadowness is to make a place for everyone, really. Anyone can have a portfolio. Anyone can take a photo or code or write something to make it Art. Complete a portfolio with any number of items you make. I want to make it easy for all that to happen and for deserved items to really stand out to the community through meaningful and really interactive features.

7Shadows - Day 10
May 13
As you can see in the past screenshots,I got a pretty crazy setup, but I love how Mac makes it simple to juggle with tens of windows. That's something I could only dream doing on a PC.

Being both a coder and designer is a hard task in switching around. But you learn to work with it.

Blackness
I'm starting to be satisfied with the whole design package of Shadowness 7. The black is sexy and the logo stands out while being subtle enough. The content area also blends well with the background and everything complement each other well in a balanced visual environment. I'm glad I don't have go white or black. Once the main design is made, I must live with it and learn to expand it and stop changing it all with every new version. But I'm confident this time that this one is a keeper. Hopefully the fans will agree with me...

7Shadows - Day 9
May 12
While I don’t talk much about the coding, there’s much that is going on. As I code, I also bring important organization to the structure and usability. I really go carefully with each step that the user will experience and make sure he/she won’t feel lost while going through these steps. The signup, the email and the profile editing can’t be overlooked. Right now, there isn’t much but it’s really starting to shape and make sense.

So far, I’ve played with login and remember with cookie, lost password page, logout of course and email notifications. These of course added to the signup page I’ve mentionned earlier which allow you to upload and preview your portfolio before signing up. Those uploads are stored within sessions, so there’s a lot to go back and forth to make sure the process is seamless with the database.

But I won’t speak much about the coding because I don’t think I would stop.

There’s a lot of ideas that have been going through my head. One of them is how I’m gonna use Brainstorm to be a merging feature with comments. Here’s the solution I came up with: brainstorm and comments would be the same feature. Brainstorm would be a quick-commenting, while commenting would be more like reviewing. One interesting note is that you will be able to add a comment through the brainstorm feature and chat box. Since both will share the same spaces, both comments and bs will show in the brainstorm chat space and comments browsing below each item. Comments navigation can be filthered into 3 options: All, Comments and Brainstorm. All would show both. When showing comments, brainstorm comments would be smaller and would have smaller user avatars while normal comments would be bigger.

7Shadows - Day 8
May 11
The thing with working on something for a long period of time is that you can become quite unsatisfied with specific things, and that can either compromise or make your product better.

Let’s start with the colors. The fans have been demanding a dark layout because of what “Shadowness” sounds to them. So, there’s not much of a choice but to get on with it. Designing has become hard because you can’t go crazy with this type of layout. It has to be usable. Usable means keeping it simple. To 95% of popular community sites, there’s only one clear choice of color for the background: white.

Now, needless to say, I’m gambling a lot by going with dark. In my mind, I can’t go all black, because it just doesn’t give much place for definition. You wouldn’t be able to see the shadows too. At first, I wanted to go both dark and white, but it didn’t look pretty. Also, going with 2 opposite colors won’t give flexibility to the users who want to customize their portfolio.

I decided to go with dark gray. The top part of the image explains that. I realized now that gray can become dull unless you give it a lot of contrast. The logo didn’t help, nor does the layout. Feeling helpless, I went to look back at some of the dark layouts and saw the Shadowness slideshow, which was a quick layout inspired by the Digg Spy layout. I noticed the black was quite sexy. Although, I still think I can’t go with all black, I knew I had to change a few things and bring more of that sexy black. I started with changing the logo. The reason is simple: it has to scream more and it has to be sexy against any background color such as white. I also, tried to apply a black to dark gray gradient to the layout, again to bring that sexy black. Let’s see if the sexyness lasts.

7Shadows - Day 7
May 10
Menu
I believe the menu will be interesting to use. It’s both simple and expandable. The collapseable feature is also recorded within a cookie, so it remembers when it’s in a open or closed state. All the good items are there when you need them and can be removed at will. Once removed, a button will appear on top of the menu so they can be brought back when needed. Can’t wait until we get real content so I can use it to the fullest.

Signup madness
I spent a good full day working on that signup page. It’s quite unique. Surprisingly, by taking 2 minutes more to signup, new users will be already using 70% of the major features in the community: Portfolio making, Art, Photos and Profile editing. All new profiles will have a photo and 1-3 portfolio images attached to them as well as information about the user that’s interesting to the reader.

What’s funny is that just by doing this page, I have already done 70% of the layout implementations, so the rest of the pages will be quite easier since I won’t have to go through the splicing as much. The chat bubbles are fun!

7Shadows - Day 6
May 9
Procratination... in a good way.
I’ve thought a lot on how to make Shadowness a very unique site where people wouldn’t just call it “another art community”. I think I nailed it. 2 of our very strong old features are 1) Page customization and 2) Featured artworks. I believe the Page customization can be taken to a whole new level. So, to put it in different words, I will call it Portfolio and start from there. I’ve given it a lot of thought and there’s no site that offers the making of your online portfolio in such a direct way. Not only will the new Shadowness allow that, but since the new layout is basically layoutless and based on .PNGs, the flexibility in customizations are limitless. Let me explain.

The logo and left menu as well as all the icons are in .PNGs. By simply changing the background, everything still looks great and seamless. Building a portfolio is all about presenting a clean and clutter-free layout that gets right to the content people want to see. So, how can we build one rapidly and easily? With the new engine, all you have to do is 1) Upload your picture, 2) Change the background color or upload a picture as a background 3) Change the texts colors. Choose a preset theme and you can skip 2&3.

I’ve already started slicing and dicing the layout. Furthermore, the site is already on a LIVE site where PHP development has began. The preview on the top left is actually a real working signup page. I’m pretty excited about it because I’ve put a lot of efforts in the signup process. I’m confident that the site will be much more interesting once our new users will have to go through the process of entering interesting information and profile making within a friendly and interactive, yet clever (hopefully) signup and account editing process. Btw, it’s all previewable. :)

7Shadows - Day 5
May 8
So, I took on the biggest challenge, which is to design the user page. This page is probably the most important of all. This will be the signature of Shadowness. If users had to use Shadowness for one reason it would be the highly customizeable feature, pretty-looking and fun user page.

Customizations
Users would be able to set their own page links: by default it would be Home (would lead to your page if you’re logged), Main, Portfolio, Photos, Contact Me. Why? Because you want to share your user page, make it your boss, friends or mom, they have to get right to the content you want them to see. Not about your friends and whatnot. You can start a portfolio or personal gallery. It would be sorted by albums and menu links could be created by these albums. IE: Portfolio, Dark Art, Layouts, Animations etc. Then, anyone would be coming to your site and think “oh, let’s see this guy’s Portfolio”. Colors would be totally customizeable as you’d expect.

Even tough I want the page to be interesting to first-time visitors, I still believe that it shouldn’t be dull to hardcore visitors. So commenting and “Eye” feature are pretty important for that purpose. Eye feature pretty much keeps track of everything about the user such as what group that user has joined, what item user has commented and so on. Pretty much like mini-feed on Facebook. It’s a clever feature and it makes up for the lack of everything else that I usually show on a user page such as Favorites list, Friends list, Watch list... The challenge will be to adapt it to the Shadowness concept.

Collections
Just like how artworks get albums, I think photos or journal should have the same. It makes it easy to navigate through the pages.

7Shadows - Day 4
May 7
I was pretty unsatisfied with the lack of originality in my first 2 mockups. I had also tried to make white alternatives to them but got a bit lazy to finish them. I needed to make Shadowness stand out more. The question now is how.

So an idea came to my head. The best layout is no layout. The first 2 mockups felt they were too much layed out that we couldn’t breath. Whenever I hide the lines, I almost felt relieved.

I started browsing artworks and drag one of them to a new layout. Then, I browsed a cool-looking black adium skin and got a vague idea of how I wanted the menu to be. I designed it. Put both elements together, added some texts and got something. I added colors to the logo. Although, the layout is pretty non-existant, I had a pretty good idea as to how I wanted to lay out things later on. But capturing that simplicity and originality was key to what I wanted to achieve so i had to grip on it.

To have a black menu is perfect because black looks great in front of any dark or middle-colored backgrounds. It’s a little more tricky on a light background, but I don’t think I should be worrying about that because I intended to make it customizeable -- you would be able to loose the images and customizeable the core flat colors.

I spent the rest of the day working on sub-pages such as Home and Browse. They both looked great. If it happens later on that I would dislike the layout, I was pretty sure that I was in the right direction and that is key.

7Shadows - Day 3
May 6
After the first mockup, I wasn’t too sure how it well it would apply to the rest of the pages of the site such as the View page and User page. I want this site to be highly customizable and as effortlessly as possible.

Mockup 2
So I started a second mockup, this time more based on a community that’s pretty hot to the Shadowness users nowadays and that’s Facebook. I like the simplicity and flatness of their layout. But I’m not sure how good it would look on a dark layout...

And... it didn’t have enough contrast. It also felt too much like Facebook. There is something about trying to get a more usable product and end up copying something largely. I hate that. It’s not that I don’t have the creativity, it is that liking too much something will refrain you from being original at all. I disliked the look of the logo and how it doesn’t stand out.

Mini-Brainstorm
I also started thinking how cool it would be to have a mini-brainstorm feature where anyone signed or not could post ideas on how to improve the items posted. People would be able to discard posts or vote up and posts would not be sorted by time but by number of thumbs up.
Just an idea...

On paper
Something unusual for me -- I started puting ideas and drawing layouts on paper. So, I don’t want many categories so it would be simple to select and browse. Shadowness is small and it shouldn’t pretend that it’s big. We would have Digital Art, Traditional Art and Tutorials. 3 big Art sections that covers every background possible.

History with Facebook
A lot of you know that I worked on CampusNetwork with Adam Goldberg -- its founder-- , which years ago was made about at the same time Facebook started to get really popular. CN was quite richly made while Facebook chose simplicity. As Adam says, a lot of it was a guessing game. However, I'll make a bold but true statement: Facebook wouldn't probably exists if it wasn't for an early version of CampusNetwork -- CUCommunity, an idea started by Adam of a photos/journal community for students (made before Facebook). Shadowness V3 is the start. It's what inspired CUCommunity which in turn inspired the making Facebook. They, Mark Zuckerberg and his team, made a better and more usable product, hence why we made CampusNetwork to compete with it. As you know, Facebook is now one of the most popular Websites, and we abandonned CampusNetwork to move on with other projects.

7Shadows - Day 2
May 5
Just like iPhoto, you would have an ever-present menu on the top left that’s totally customizeable. Users would be able to set up their menu the way they want by naming it and point to a link of their choice. Like on digg, you could set home to any of those links.

Chat
One of Shadowness’ strong feature in the past is the ability to interact with community members through a shoutbox. Granted, almost every website such as Deviantart left that idea and I must say it’s a shame. I wanted to revive that, but not in an imposing way. I had to rename it. I want to call it “Brainstorm”. Brainstorm -- because it would be a place to contribute ideas and interact in realtime just like a real-time conference.

Browsing
Top right would be your browsing features by time, category, style and number of items. Search is pretty important so it has to stay up there.

Working at home
Working at home is hard. You need to know yourself so well so you take out the best of you against distractions. Sleep being one of them. I have to moderate the food I eat. Eat too much and I will go straight to bed within an hour. Coffee is good -- added with snacks, it allows you to stay away from hunger for a few hours.

7Shadows - Day 1
May 4
I started shaping the community by the method that I’m so familiar with -- an artwork. This will bring the essence. The colors, the feel, the concept will all emerge from it. For me, it’s called inspiration.

I wasn’t very satisfied with the original artwork, but at least, I got an idea of what colors to choose. Many has pointed out Shadowness needed to be dark. I wasn’t so sure, but I knew I had to compromise. After all, I’m doing this for the Shadowness fans, and they are not to be neglected this time.

I am very inspired by Apple. It seems pretty clear to me that many of today’s top applications are following Apple’s design cleverness. You can think of Youtube where the new menu has that subtle gradient and rounded borders or Facebook where the menu always has that arrow which minimize/maximize and an icon that precedes the text. It’s clever. Usability is important.

It’s undeniable that most applications and products by Apple have pretty much that consistency and simplicity that people love, so on my first mockup, I started thinking about taking some of iPhoto’s elements to this new Shadowness. I wanted it to be so simple and useful for users to browse galleries, set up a portfolio based on albums, all within an easy-to-navigate layout. Yet, I’m not too sure how well it will apply on a Web layout.

7Shadows - Premise
May 3
After using today’s top Web applications, I realized how much I screwed. Just an idea is not enough, and knowing too much is restricting one's creativity. My dream of building a place for designers has started to degrade day after day ever since surviving was the only thought in my head. I have let down the avid users of Shadowness who had grown so fond of it since its first days.

But tomorrow is another day. And I have learned.

Today’s Art industry is loosing to the trend of 2.0, where too many believe that creative design is not necessary anymore. Coders are overrated for their work while designers are being paid cents even though they have brought the genius that has shaped the simplicity and inspirations of today’s cyberness. Just like how Apple is taking the merits it has deserved, it is time that designers follow the same example. We need to stop loosing to the shallowness of made-easy tasteless templates. We need to show that we understand simplicity better than anyone. Because it’s our job.

Shadowness7 is not just any version. It will be completely revamped. All the coding and designs will be redone, and the database restarted from scratch. Portfolio will be our main focus. Something will be unique about 7 and you will soon know what I mean.

Yours very truly,
Meng