Website Designing
|
Dynamic Rich UI/UX
|
Masterpage Dezign
|
Graphic Dezign
|
Presentations
|
|
The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.
- Wireframe and design elements planning
This is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, begin designing the layout using a wireframe. Pencil and paper are surprisingly helpful during this phase, although many tools are online to aid as well.
- Mock-ups based on requirements analysis
Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes you for slicing and coding when the time later on.
- Review and approval cycle
A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and contractor are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
- Slice and code valid XHTML/CSS
It’s coding time. Slice the final Photoshop mock-up, and write the HTML and CSS code for the basic design. Interactive elements and jQuery come later: for now, just get the visuals together on screen, and be sure to validate all of the code before moving on.
Every Web application is unique, but many of them contain common features. Although the implementation of any one of these features will vary, let’s look at the basic concept of the three most common ones.
- Master-Detail Views
This is the technique of showing data in two separate but related views. One view shows a list of items, while the other shows details of the selected item. Master-detail views can be implemented across multiple pages or on individual ones.
- Dashboards
Many Web applications have dashboards. A dashboard is a view of the most important information needed to take action and make decisions. It is confined to a single page and is usually the starting point of an application. Dashboards are important because they enable users to access information and take action without having to dig through the application.
- Heavy Use of Tables
Because Web applications typically deal with large quantities of data that are easily accessible and sortable, tables are unavoidable. But this is not a bad thing. In fact, tables were made for this purpose. Don’t confuse this with table-less layouts. Effective tables are easily readable. So, in most cases you will need a meaningful header, an optimal number of columns, pagination, alternating row colors, proper column alignment, sorting and filtering capabilities and much more.
SharePoint Designer is a web and application design program that provides
“no-code solutions” for business processes. It is often used to create and
manage data sources, create and view forms, and create custom workflows to manage
business processes. It also allows for customization so you can achieve a
look and feel that reflects your corporate brand instead of building a site that
looks like every other SharePoint site. One of the ways you can do this by
creating a customized master page.
Master pages contain the elements that reflect your brand in terms of color
schemes, logo, title, search box, ribbon commands, navigation tools, and other
features. Content pages will have these elements; in essence, content on
individual pages are framed by the master page. This makes a site more cohesive
and navigable. So, how do you do it?
There are two ways to approach this: creating a master page and modifying a
v4 master page from SharePoint.
Let’s go over the latter as it is easier for non-developers.
Modifying a copy of v4 master. The v4 master is the primary
master page used for SharePoint. Using it as is will give you a functional site
with the SharePoint layout and interface. Modifying this master allows for
limited branding; you can, for instance, change the header of your pages.
- Open SharePoint Designer and click on Master Pages, located
in the Navigation pane. You should see three options for master
pages: v4.master, minimal.master, and default.master.
- Right click on v4.master. Now you want to
paste a copy of the master into the Master Page Gallery. To do
this, press CTRL+P.
- Now you have v4_copy(1).master. Click on
this to see summary information in the gallery.
- Next, click Edit File. You will find this
option in the ribbon commands. Here, you can customize your
page’s tags, styles, content regions, and scripts. You can see
what your edits look like as you make them, which is helpful.
You will also work with content
placeholder controls (this represents content that can be
displayed or hidden on the content pages).
- To change the style of the master page, click on Site
Settings, then Customization, and
finally Change site theme. This allows you to
apply a predesigned theme. You can also create your own themes
and add them to the page yourself. This option allows you to
achieve a look that is more reflective of your brand.
- You can also manage styles or create custom cascading style;
to do this, click on Style and Manage
Styles.
- Make your new page the primary master page for your site by
finding Site Objects in the Navigation pane.
ChooseMaster Pages. Right click on the page
you’ve created to make it the master and select Set as
Default Master Page.
- Celebrate your hard work and bask in the adoration of your
coworkers. This may not really happen, but you can take a minute
to pat yourself on the back.
When starting a new design project, there are steps of the graphic design
process to follow that will help you to achieve the best results. Rather than
jump right into a graphics software program to try to create a final version,
you can save yourself time and energy by first researching the topic, finalizing
your content, starting with simple sketches and getting several rounds of
approval on design concepts.
STEP 1: GATHER
INFORMATION
Gathering information is the first step of the graphic design process. When
approached for a new job, set up a meeting to discuss the scope of the work and
get an idea of what your client needs. This also helps to get to know a new
client. Be sure to gather as much information as possible and take lots of
notes.
STEP 2: CREATE AN OUTLINE
Using the information from your meeting, you can now create an outline of the
content and goal(s) of the project. Once completed, share this outline (which
you will present as the proposal & timeline) with your client for approval or
for any changes before proceeding. Once this step is finalized, you know you are
all on the same page and you can proceed to the next step of the graphic design
process with confidence.
STEP 3: GET THE JUICES
FLOWING
Again, don't just simply jump in. You are still doing research here, but this is
more fun because you get to do a little visual research and brainstorm. Think
about creative solutions for the project. Have your client show you examples of
designs they like and don't like, which will help guide you in your design
process. Take a little time to digest all the information you have gathered and
document ideas, whatever they may be. Here are some things you can do to get
charged and go above and beyond your client's expectations:
- BRAINSTORM with a favorite design partner or a group of
creatives for ideas and inspiration.
- WHEN IN ROME... Dive into the respective industry. For
example, if you have a new client in the fashion and beauty
industry, visit your local bookstore or news stand and buy some
fashion and beauty magazines for inspiration and latest trends.
- REFERENCES: Dive into art and graphic design books for
inspiration.
- GET PHYSICAL: Take a walk, go for a bike ride, meditate,
people-watch. Sometimes being outside around other people and
different energy, will boost your creativity and get you
focused.
- GET ARTSY: Draw, decoupage, make something, write a poem
about your new project. It sounds silly, but believe me, it will
help you take that creative leap that you need in order to give
this your best and your all.
STEP 4: SKETCH FOR SANITY
I have found myself in front of my monitor staring at a blank page, adding and
deleting shapes, or going from my software to the internet and back to the
software - trying to put my ideas to work. Sometimes it works, but I have found
better results mapping out my ideas on paper or even in PowerPoint. What's more,
I cringe at the time and energy I have wasted creating initial design concepts
from my software rather than creating sketches to review with my clients.
So, create some simple sketches of the layout(s) you are considering. This way,
you can show your client some of your ideas without spending too much time on
design. Your client will let you know if you are headed in the right direction
and you will maintain your sanity.
Create quick sketches of logo concepts, line drawings of layouts showing where
elements will be placed on the page, hand-drawn versions of a package or
brochure design. For web design, wireframes or internet prototypes are a great
way to start with your page layouts. I prefer prototypes because I now have a
working document.
STEP 5: START YOUR ENGINE
So, you've been a good designer and you've done ALL your research, you know
where you are heading and your client is on board with your ideas/sketches. It's
time to do what you do best - DESIGN!
It's usually a good idea to present your client with at least two design
concepts (which I usually include in my proposal/agreement). This gives the
client some options and allows you to combine their favorite elements from each
concept. Inform your client that you are okay with combining elements from the
designs you provide.
STEP 6: REVISE
Once you've gotten feedback from your clients, you can implement their
suggestions to present a second round of design concepts. Make sure you are also
providing your input as the designer. This is an opportunity to show your
knowledge and abilities as a designer, thereby increasing your client's
confidence in your input as a team player. After this second round, it isn't
uncommon to have a couple more rounds of changes before reaching a final design.
You're done and your client is happy! Makes sense, right? Of course it does, but
the message here is not the actual steps, the message it to actually follow all
the steps - COMPLETELY - each and every time. That is the challenge and the key
to your sanity and your client's happiness with your work.
Be sure to follow this process, step by step, no matter how big or small the
project, no matter how rushed it is. You may just have to complete the steps in
a shorter timeframe, but you should still go through the process. If you have
gathered in-depth information, you will have an accurate outline. With an
accurate outline, you have the information necessary to sketch out some ideas.
With the approval of these ideas, you can move on to create the actual design,
which once revised, will be your final piece. Isn't that so much better than
having your client say "This isn't what I expected." after you have done all the
work?
Content Simplification I make presentations understandable and resonant. Simple, concise communications with tastefully presented visuals are the proven way to persuade audiences. Add a little enthusiasm and the mic will literally burst into flames, delighting an already awe-stricken audience. Of course, every flashpoint depends on a knowledgeable arsonist’s loving touch, so we work closely with you and your team to build an airtight case for your cause
Theme Development I understand why so many speakers scoff at the boring task of sense-making. Sometimes, it’s hard to think of an analogy for a multi-faceted corporate profile that ballasts an audience wrestling with a pesky little question: “Why am I here?”Themes, like myths or folklore, are how small- to medium-sized groups of people understand their role in the world around them. Without good storytelling, the neighborhood goes to crack and kitty-snatching, and from there we may as well be wild animals.
Slide Design For most folks, PowerPoint is like karaoke with clipart: type out the words you plan to say, insert a picture of teamwork, and call it a day. With this as a standard, we’re all better off in a bar with the bouncing karaoke ball.For our designers, PowerPoint is like a feeble middle school boy without a strong male role model at home. It stuffs into lockers and does as it’s told. Every Ethos3 designer is a perfect combination of Bill Gates and Andy Warhol, so pragmatism and precedent-shattering beauty are naturally occurring.
|