Website design workflow

Simple Website Design

WorkflowAHMED BOLICA

ALEXANDRIA WEB DESIGNER

Ahmed Bolica

Ahmed Bolica ( Ahmed Abdllah ) Egyptian web designer / UI Developer .Graduate from Faculty of Commerce, I didn’t really find my passion in accounting, auditing and creating carefully-stacked excel sheets; I found it in DESIGN!

start his career 4 years ago with small online portfolio and now Bolica act as a company (publicity and search engine ) with big list of clients and provide many services with talent team.

Also have good experience in SEO , Blogging and Diet :D :D

Here also as co-founder of Alexandria Web Designer small community for web designer based in Alexandria try to share Knowledge , experience and help each other.

Alexandria Web Designers

Alex WD is a community that has a mission of bringing together enthusiastic and ambitious web designers, in Alexandria and all over Egypt, to connect, share knowledge and get hold of best job opportunities.

By providing web designers with proper resources needed and presenting a pool of talented web designers for companies, a great link will be created that will definitely elevate and strengthen the web field in Alexandria and Egypt.

Website Design ProcessDISCOVER - DESIGN - DEVELOP - DEPLOY

Discover

Discover1- KICKOFF Let’s meet up and get to know each other. From our early meetings and research, we'll establish communication protocols, milestones and timelines, deliverables and scope, roles and expectations.

Discover2. PROJECT ANALYSISWe will work with you to help determine the requirements of the project, from a technical, creative, and organizational perspective. We’ll analyze content, writing style, visual design, and interface design, and make sure we understand everything there is to know about your industry.

Discover3. IA & CONTENT STRATEGYUsing the knowledge gained from our discovery conversations, we will audit existing content both quantitatively and qualitatively. What exists on your current site? And, more importantly, is it doing what you need it to do? We'll create a site map for your project and show where everything belongs. This process will inform what and how we communicate, and establish the features your users need. Well-planned, well-structured content will help us create both the interaction and visual design systems.

Discover4. STRATEGIC DIRECTIONAll of the information found during the discovery phase will be complied into a concise document that outlines the search, content, technical, and creative strategies. This document will act as the project map, keeping all team members in line with a focused strategy.

Design

Design5. UX SKETCHESWe will work with you through an iterative process to create rough wireframes, or UX sketches, for key views. This will help establish the design system, while communicating a sense of the functionality. This is also where we decide on the break points for the responsive design.

Design6. INTERACTION DESIGNOnce we all agree on where we’re headed, we’ll wireframe and document the remaining views, with the functionalities established by the page tables and feature list. Each and every view scenario will be documented to visualize all the content and features we’ve planned. Along with that we’ll create rough greybox HTML prototypes to demonstrate responsive interaction patterns.

Design7. VISUAL DESIGNWith functionality fully documented in the wireframes, we’ll layer in the branding elements, colour palettes, and typography that give each site its unique look and feel. Through an iterative process between our team and yours, we’ll make all the big decisions about typographic hierarchy, vertical rhythm, and interface details. We can create static visual mockups, browser-based prototypes, or both.

Design8. STYLEGUIDE / DOCUMENTATIONNext, we’ll create a styleguide that will document the design system so that they can be properly implemented. All the details from the grid to hover/touch states to typography styles to content messaging will be detailed. This guide will demonstrate the design thinking and personality of the system. Depending on the complexity of the site, this could be created in an interface harmony canvas.

Develop

Develop9. HTML OR THEME BUILDNow it’s time to get down to business and build HTML/CSS/javascript themes: functional, browser-tested, HTML pages ready for testing. We’ll make sure all content is governed by CSS and meets W3C standards. We’ll use javascript for interactive elements, rather than flash or silverlight. We’ll also help you adhere to best practices for online readability, and include a print CSS for readers that want to print out your content.

Develop10. CMS BUILD & TEMPLATE IMPLEMENTATIONNext, we’ll create a styleguide that will document the design system so that they can be properly implemented. All the details from the grid to hover/touch states to typography styles to content messaging will be detailed. This guide will demonstrate the design thinking and personality of the system. Depending on the complexity of the site, this could be created in an interface harmony canvas.

Develop11. CROSS-BROWSER/DEVICE TESTINGHere's where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different due to device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.

Deploy

Deploy12. CONTENT MIGRATIONWe believe in helping our clients create and maintain useful, usable content. Depending on your organization’s needs, and our audit of your current website, we’ll help you define the scope of the content migration phase. As we all know, a website without content is a black hole of sadness. Content #FTW!

Deploy13. USER ACCEPTANCE TESTINGUser acceptance testing (UAT) helps us confirm that your new site meets the objectives and requirements we defined early in the project. It's like moving into a new house – you need time to discover how everything works and get comfortable with living there. You’ll need time to come to terms with how your content fits into the design and workflow, and make any adjustments and edits you need.

Deploy14. DOCUMENTATION & TRAININGWe will prepare text and video documentation on to help you understand and use your new CMS and site. We will generally provide a period of user acceptance testing following the official “handoff” of the website, to make absolutely sure that everything meets your needs. We’ll also provide additional support and training where necessary, and take care of any bug fixes to make sure that your website is ready for launch.

Deploy15. LAUNCH PLAN & RELEASESo close! Next up, our team will create a launch plan to archive the current website (if needed) and release the new website to the public, as well as a quality checklist to ensure that all project requirements are met. We’ll make sure that the new website is submitted to the appropriate search engines, and that web analytics are installed and configured. We'll also work with our smarty-pants friend at the status bureau to make sure you understand how to access and act on web analytics reports.

Deploy16. HAPPY END A website is a living thing that continues to grow and change throughout its lifecycle. So in some ways, your work is never done (sorry), but achieving a milestone like this definitely deserves a party! Even though this is just the beginning of the real life of the website, it’s good to celebrate after all this hard work. Nice work team. Now back to work!

Thank You !WWW.BOLICA.NET WWW.ALEXWED.NET