Today, I stumbled across a side project that was initiated by Matt Mullenweg. It’s called MP6 for apparently no reason at all, but it’s definitely great. Take a look.
wp-admin theme uses the design language I love so much right now. It’s flat, there’s black, white and gray. It’s simple. My own mockups look somewhat similar. There’s no indication this is true, but I think that this was in some part sparked by WordPress Ghost. The release by Matt of this plugin is probably no coincidense either, because John O’Nolan (the Ghost guy) is also getting ready to display his initial results I think.
You can get the MP6 plugin here.
Here’s a sample:
The trouble is, with the tabs on top, the application window’s title bar height is reduced to a bare minimum, making it difficult to click on the app or move it around. Tabs on top also causes the page title to be displayed within the tab (rather than in the title bar), so we can abandon any chance of knowing the entire page title, even for those sites that set this HTML tag to some meaningful value.
And why on earth are the tab close buttons on the right?
Ahren has more comments about Chrome’s design and over all Google product design, and I left my response there too.
Four years ago, I unveiled my modern online presence with the purchase ifupdown.com. Three years ago this July, I created this blog that was formerly located at ryan.ifupdown.com. Last summer I bit the bullet and bought my own name as a domain, ryanrampersad.com. Earlier this year, in early May, I brought my blog out of the dark ages with a new and bright theme. Today, I’m pushing out a new front page that will represent my entrence into college and beyond on ryanrampersad.com.
The old front page did little to promote finding me online. As that page is directly visible on my business cards, in my email address and essentially is the #1 in Google Juice™ for “ryan rampersad”, it is important to utilize the landing and funnel people into other avenues of connecting with me.
The new design has some technical bonuses. It is based off of HTML5 with the NormalizeCSS. It’s so much easier to use than the ResetCSS of the days of yore. In fact, I wrote my own grids because after all the time I’ve spent trying to get frameworks to stop sucking, I realized it’s actually easier to calculate the sizes, paddings and everything myself. And the flexibility is infinite too, so it’s better this way.
The design high lights two aspects better: me and social. Me as in my huge name sprawled across the top and social as in my nice array of badges representing my socialite locations.
It’s not a big leap, but it was enough to look refreshed.
That is all.
A couple days ago I began using the WordPress 3.2 release candidate. I was impressed by the back-end overhaul and the interface streamlining. So much so that I wanted to update yet again my own theme.
The theme is powered at its core by Hybrid. I call it Ryan’s Hybrid Theme because an original name was just so unoriginal. The initial release went live on May 2nd, and 50 days later, here we are with another update.
The new theme is here! Let me know what you think in a comment.
Over the weekend, I’ve started working on new a new theme. It’s still going to be powered by the excellent hybrid theme but won’t rely on the hybrid classic child theme. The child theme has been a separate installation for a long time now and it’s time to move on from it. It’s changed a lot since the old days.
Here’s a quick preview of the new design. It’s not finished yet, but it’s getting there. It’s a breath of fresh air.
An example of the new Aside post format! (Click for full-size.)
You know what I think? It’s a little too white. I need some help with that.
Hybrid Original child theme updates
I love hybrid theme. I suck at designing so anything that makes it kinda easy to make this blog look halfway decent is great. It’s hard though to keep this old child-theme relevant though. The updates to it are few (although that’s not really a problem) and it seems like it’s become stale. That stale vibe probably something to do with me and my content though.
However, to keep the entire theme looking in time with the rest of the web, I felt like some new rounded corners were needed. The boxy theme that it originally was can be great is come settings, but I think it looks better for my use this way. The main post area and the widgets has a 10 pixel border radius while the navigation area has only 5 pixels, since they’re smaller.
But, I can’t really stop there. I need to make the text on this blog readable. It sucks reading this highly designed font (can you tell I’m not a designer, when I don’t know the real definition of serif and sans-serif?) Right now, the fonts are by default supposed to be Georgia, Times, Times New Roman and serif. Those might be great for a site introduction blurb on an introduction page, but for every single word in this blog? No, it’s terrible.
Fonts like helvetica, geneva and arial are all great fonts that are totally plain. I like plain and boring. But when replace the font, I run into the problem of the font size. Hybrid Original has it’s default post font size set at 16 pixels because it was meant for a serif font, with all sorts of fancy bits. It had to be huge to see it. To fix it, setting the sans-serif font to just 14 pixels, I solved that problem. However, there is another problem: it applies to everything. Instead, I want these plain fonts to only apply to the posts themselves but not any code blocks or blockquotes. Fine, I got it now.
I’m reasonably happy with this now. I have fixed the font I’ve hated for ages and I added rounded corners. Excellent. I hope you enjoy the new pleasing to the eye, more relevant, design.
It’s been about a month since I last published a blog post but during that time I haven’t been sitting idle. My other website, which is private file hosting, has had a front-page redesign. Check out the main page of mntbd.com.
My plans for mntbd are a private uploading system and also a private shortlink system, which once coded, would be released to the public for people’s own private use.
This marks my return to blogging, at least, I hope.
My friend asked me today, as apart of one his assignments for his Computer-tech class, what would I say if I had to pick the five most important aspects of web design. Well, I wasn’t sure at first, but after some thought, I came up with the five things I would say are the core aspects of web design. (Let’s note that neither my friend nor I are web designers in any way. I know enough to get around but I have no design experience; I’d love some though.)
The list isn’t in order since there is no way I could say one is above the rest.
- The use of White space – White space refers to the place where no content is, like text or focus-images. Just plain nothing interesting space. That isn’t to say something interesting can’t be there, but it is extra and not apart of the content of the page. Effective use of the white space on a page can let you relax or if it’s poor, it can distract you. For an example of white space, I think google and vimeo come to mind. Few visual elements.
- Typography – The way your words look on a web page are so important that many people don’t bother about it. While it is excusable because there is no consistency of fonts online; it should be noted that most computers have sharp and soft fonts. You should Arial for big display-words, Courier New for blog posts and certain fonts for certain things. Another aspect of typography is the size. You see big things first. For instance, if you have just a sentence on page, you should make it big, if you have four blog posts you should make them small. Twitter is the first things that comes to mind when I think typography. If you couldn’t easily read tweets, would you?
- Content Width – I was going to write content position but then I thought, no, the width is more fundamental. Generally, websites today are designed to look the same when the browser is re-sized. Therefore, the width of your content area, such as 90%, 800px, 1024px, or whatever size, is important because if you can mess up the content when the window size changes, that’s a problem. Additionally, there is a certain line length people can tolerate reading. Would be easier to read if my blog was the entire width of the window? It’s generally easier to read in a constrained area. As a coder and a lover of YUICSS, I suggest that yahoo is a prime example of various content widths. This is also related to white space because if you have a low content width you get more white space, generally.
- Navigation Place – While this would go hand in hand with Content Width actually, I wanted to suggest this even in view of the former reason and also in spite of it being partially functionality-oriented. Navigation is functionality but it is also design. Look at the yahoo sites, the navigation on the main page is along the side and top. Look at Google’s main page. You see links across the top. Look at these examples for ideas of how design in navigation is critical.
- Title – While it might seem like the title isn’t design dependent, it is. If you look at the title of the current window you’ll see something like “5 Core Web Design Aspects |Ryan Rampersad’s blog,” right? I designed the title to be in the order it is. While this could fall into functionality, you see the design of the title as in the post first and then the site title. You need this because you want your users to know exactly what they are looking at. When you minimize a window, what would you like to see? “Ryan Rampersad’s blog” or the current title? You’ll probably know you have my blog open but you might forget which post you’re reading exactly. The title is important.
These are my honorable mentions. I don’t think can you constrain this type of list to just five.
- Honorable Mention – Contrast – I thought of an important design aspect that I love dearly. Contrast. Why do you see sites with black backgrounds and bright text? Simply for contrast. It has a key role in all designs because without contrast, you couldn’t actually see anything; it’s hard to read yellow font on a white background. My blog is example of contrast, blue background, white foreground, black text.
- Honorable Mention – Imagery – This could go along with contrast actually but I wanted to give a mention to gradients, fancy borders, elegant logos and also rounded-corners that we all sought for so many months.
That’s what I think of design. Keep in mind that I don’t see design as in borders and colors, I see the code behind them. You show me Apple’s set and I wonder how they centered a click-able button on top of an image. Nevertheless, I love design.
Today, I attempted to make a logo. It didn’t go well. Not well at all.
Since I made ifupdown back in 2007, it’s needed a logo. This year in fact, did I even attempt to make a homepage. It’s orange and pretty simplistic. It’s not something a person looks at with much enthusiasm. I certainly don’t. I’ve had no concepts for branding, really, since I have so little ability for design oriented work. Well, that was until recently.
Current Ifupdown Logo
After I made the mooWalkthrough last year and additionally the Fluff Grabber this year, I found out that there was a huge need of a brand. For that reason, during the summer, I took away the old 1and1 domain parking page and replaced it with a spruced up homepage. The cheap logo I made was just some text with some silly arrows. Like I would put that on a business card. I also think the colors are also messed up. I think the colors for the WordPress Admin center are better than orange. Honestly, I only picked orange because I didn’t want more blue. (Or dark colors.) I support black text. I see all sorts of blogs with black as the background and white (or a light equivalent) text color. It’s hard on the eyes. People coming from Google have adjust to read the blog if it’s black on white. (The new theme has a dark blue background, but the background where all the text is white.)
Ifupdown Logo Prototype 4 min
The logo I was attempting today was a more of a symbol. I’m not sure what designers call it but, it was a shape. What I had planned was an up and a down arrow without shafts. The right side of the up arrow would half merged with the left side of the down arrow. Visually, it makes the up and down words make sense, but the if is still left out. I’m not sure how to visualize ifupdown. I really have no idea. You can get an idea of how this looks with this svg image or by looking to the right. Prototype Ifupdown 4 min
I’m going to try again sometime, but it won’t be for a while. Does anyone have any ideas on what I could do? I’d really like to make the logo myself and I’m willing to learn in order to do it.
A user on TalkPHP posted, by the name of TerrorRonin, their new Google Design.
Google Redesigned Preview
As Google’s sensitivity to regular users declines, the changes that are made every so often push the fans of google out the door slowly but surely. They know we’ll walk back in at some point, but this design looks elegant, clean and uncluttered. It is easy on the eyes, very smoothÃ‚Â and truly fitting with the current trends of design on the web.
A letter from chasehutchins.com, appears on the google page when you first load it, but won’t appear on subsequent loads once it is closed.
By the way, the I’m feeling Lucky and Google Search buttons are switched!
A letter to Google