- Codrops – “latest news and resources from the web design & web development community”
- Webdesigner Depot – news, resources and inspiration for web designers
- Smashing Magazine – “useful tips, tricks, and resources for designers and developers”
- Web Development Reading List – “A handcrafted, carefully created weekly update resource for web developers”
- Hacker Newsletter – “A weekly newsletter of the best articles on startups, technology, programming…”
- TED – “Ideas worth spreading”
- Discover.typography – “font news from H&Co.”
- Unmatched Style – “a dose of inspiration, delivered fresh to your inbox”
- InVision – a great UX/design-focused blog newsletter
BOSHrun.com has been up and running for 4 weeks now. The initial launch was successful, with only minor issues from a handful of users. This included routine things like lost passwords and activation emails going into junk folders.
The biggest problem since launch has been spam users registering on the site, once of which direct messaged a few users. This is obviously a very serious issue, and can cause huge annoyance for members. If the issue isn’t resolved quickly, it could cause members to stop using the site. I installed extra catches on the registration page, added report a user buttons and increased the spam security on the site. Since doing this, there hasn’t been a single reported problem.
I have also received a lot of positive feedback for the site:
I set up a forum topic on the site where members can give their feedback and ask for help if necessary. It can be viewed here.
Another notable element of the site is the design of the new shop. The minimalist design really shows of the products, and I’m very happy with the increased functionality of the shop (including adding in dropdown lists to select size and fit).
I’m very happy with the outcome of this project, and am interested to see how the site evolves with the increase of users and content being produced.
As of today, there are 197 registered users.
I started building the final BOSHrun website around two weeks ago. I had done a lot of the work previously, including extensive research, planning and prototyping as can be seen in earlier posts about this project, as follows:
- Client worksheet
- Concept maps and cultural probes
- Probing part 2
- Competitor analysis
- Cultural probe results
- Personas, user scenarios, use cases and user journeys
- Task analysis and content inventory
- Functional and content requirements
- Card sorting and information architecture
- Mood board and wireframes
- Clickable wireframe
- Visual design for BOSH prototype
- Summary and clickable prototype
- Building from a prototype
The existing BOSH site was rarely used, with the main bulk of activity on their Facebook group. This allowed me to take the site offline while I work on it. For this, I used the Minimal Coming Soon & Maintenance Mode plugin.
As for the rest of the site, only a handful of volunteer testers will be able to see an advance preview. The final site is due to go live at the end of September.
The site is now online, available at anitagunnschoolofdance.co.uk
I created the following style tile to give my client a clearer impression of the site than the mood board. (I downloaded the template from styletil.es).
I looked at quite a few different websites and blogs to get a feel for what I wanted. The following is a list of where I took my inspiration:
- Classic/elegant site font suggestion
- Browse through Google Fonts
- Style tile design process
- Pink polka dot texture
- Hi-res canvas texture
I also decided on a very minimalist style, with a 3-colour accent palette. I also begun to experiment with drawings and illustrations in this style using Adobe Illustrator. Figures like these can be possibly be used on the site to add interest:
The following shows some of my logo experiments alongside the dance school’s existing logo. My client was happy for me to redesign and rebrand, which gave me a lot of freedom to create something fresh and exciting.
I used Axure RP 7 to start designing my prototype, based on my previous research in this project, and of others including my Human-Computer Interaction and Design for Digital Media projects.
I gained a lot of experience last year with user-centered design and the techniques available to research this concept.
“As a main component of our idea is organising large quantities of information, clarity is key. Use of negative space, use of colour to simplify and legibility are three things that will be priorities in our design.” – part of my HCI report.
I think my work really benefits from user-centered design, and the research I’ve done previously into design principles. My first mock-up of the design is below.
I’ve used quite a minimalist approach to the design, as the negative space aids clarity. I’ve echoed the shape of the logo in the navigation bar, and kept the colour scheme minimal too. I’ve used light grey boxes to break up the page, and separate different elements.
I designed the rest of the website using the same theme and structure, for consistency and ease of use.
The design is purposefully simple, because not everyone using the site will be familiar with technology, as my Personas and other research highlighted. My competitor analysis also showed that other running sites were possibly too cluttered, and were overwhelming for first time users. My research showed that first time users and new runners are a big percentage of BOSH’s target audience, so this was very important.
The client, BOSH (boshrun.com), requires a new website.
The first thing I did was research. Understanding the ethos of the company is vital. BOSH Run is rather unique as a running club, because it allows anyone to join and actively encourages everyone of all shapes and sizes, and all fitness levels, to learn to enjoy running as an exercise. They have one rule: be nice.
This friendly, accessible club needs a website to suit.
As a group, we conducted an informal client interview, which was highly beneficial and a great starting point for the project. The client has a vague idea of functions needed for the new site, but graphic design (bar the logo and main colour) has been left completely to us. The main points I took from the interview were that the client wants something fun and friendly looking, easy to access and navigate, and that condenses all the chunks of BOSH information into one place. Ideally, the client would like a member sign in, to allow for collecting some basic information on users and to control who posts content.
I used the information gathered in this interview, along with some research on their existing website, to produce a client-worksheet (courtesy of Clearleft). There is a lot of useful information in there, but the main points to take from this are:
- It is a social site. It needs to be accessible, easy-to-use and allow for easy communication between ‘members’.
- It will be mainly user-created content. Blog/forum based.
- Aiming not to exclude anyone. It must be inviting.
- Social media integration.
- Improve on their existing E-commerce area.
This is a great starting point to begin the project.
I have been working on a new portfolio site to show my work and some of the skills I have learnt over the last six months.
With a good working knowledge of HTML5, CSS3 and JQuery, as well as an eye for design, amazing things can be made. Here is a collection of helpful blog posts, tutorials and code that can help make your website a little bit fantastic.
Responsive is key. We all need to be doing it. I spend a massive amount of my web browsing time on a smartphone. One train journey makes it apparent that phones and tablets are a huge portion of web traffic. Even on this blog, my analytics show that 27.76% of site views have been on a mobile or tablet.
Basically, too much to ignore. So my portfolio site uses media queries to set up a specific mobile site (and less drastic changes for tablet) found here at CSS-Tricks.
Everybody could use a bit of JQuery, not to rely on, but to enhance. It’s a very quick, easy way to make your website do cool stuff. And grab a load of cool at Unheap.
This is a great little article on keeping it clean by Chris Coyier. Ok, so there is no rulebook (as much as I wish there was) but there are certain things you can do to make your code cleaner, more beautiful and crucially easier to read and edit. This is a must, in a world where time is money.
Can I use…? Wouldn’t the world be a much better place if the answer was always yes. Sadly, though, that is not the case. Worst case scenario is (and rather foolishly, but we’ve all done it…) after painstakingly perfecting your site on one browser, you nervously open it in another to find it looks like someone with a grudge against you hacked your server.
Save time and energy checking browser compatibility before you code.
For HTML and for CSS, it is extremely important to make sure there are no errors in your code, and periodic checks will save lots of time later on. Mistakes are made by everyone, so whether you are a beginner or expert, validating code is crucial.
I’m impressed enough to say, I’m going to learn to be a better coder.
A blog that starts, and continues, is only successful when the author has a passion in the subject. I love all things digital media, particularly linked to art and design. I want to immerse myself in this world and share my thoughts and findings with anyone who wants to do the same.
There is so much to be seen and used and enjoyed, not only online but in the world not yet digitalised. This can only help expand our digital world as it begins to encompass everything outside of it’s vast domain.
My journey begins here, creating this blog and making a commitment to update it whenever I find something worthy of sharing.
First up, a website still under construction, but one that really appealed to me. fullfatdesigns.co.uk (Wish I’d thought of that name first, too). Simply animated, and a brilliantly soothing design. Let’s hope the website lives up to this temporary page.